JINの初心者ブロガーがリンカー(RINKER)をカスタマイズ

RINKERカスタマイズ

とっても便利な商品管理プラグイン「リンカー(RINKER)」

お世話になってます!

表示形式を少し変えようと、カスタマイズ方法を公開されているRoughLogのサイトを参考に追加CSSをいじってみました。

なかなかいい感じにできたのですが、スマホの表示に少し違和感が残りました。

カスタマイズはCSSをコピペして頂ければOKですが、サイト(使用されているWordPressテーマ等)によってはCSSをコピペしてもうまく反映されない部分があるかもしれません。

とありましたので、テーマ「JIN」だからなのかもしれません。

そこで初めて追加CSSを自力でいじるという冒険をしました!

初めてにも関わらず、結果は大成功でした。

もしかするとお悩みの方もいらっしゃるかもしれないので共有したいと思います。

コピペのBEFORE、AFTER

基本的にはRoughLogで提供されているコードをそのまま追加CSSにコピペすればOKです。

今回はうまく行かなかったところ(スマホ表示)のみご紹介します。

※この記事の前提条件は以下の通りです。

  • プラグイン「リンカー(RINKER)」がインストールしてあること。
  • RoughLogで紹介されている追加CSSが設定してあること。

BEFORE

RINKER_BEFORE

なんか、スマホで見たときに商品名からボタンまでが左に寄っている・・・。

この余白がすごーく気になります。

AFTER

 

RINKER_AFTER

すっきり収まりました♪

スタイルシートの変更点

変更点

変更点は、99行目辺りのdiv.yyi-rinker-infoに「width:100%」を追加です。

これで希望通りのレイアウトになりました。

スタイルシートの変更方法

ちなみにですが、スタイルシートを自力で変更したのは今回が初めてです。

これまで、提供されているスタイルシートをコピペするだけでやってきました。

多少、色のコードを変えるぐらいはしていましたが、ちょっと触って壊れてしまうと困るので・・・。

やってみたらできたのでだいぶうれしいです(^^♪

みなさんも、ちょっとやってみませんか?

まずはバックアップ

スタイルシートはwordpressのダッシュボードから【外観】→【カスタマイズ】→【追加CSS】で編集することができます。

編集画面を開いたら、全部コピー(ctrl+a→ctrl+c)して、メモ帳か何かに貼り付けておきましょう!(保存を忘れずに!)

編集しながら確認する方法

一旦バックアップを取ってあるので、何かあったらすぐに復旧できます。

安心して作業しましょう。

追加CSSを開いたら、右のエリアにはRINKERの表示があるページを開いておきましょう。

スタイルシート編集

この状態で左側のスタイルシート編集画面にて設定を編集します。

編集した内容はリアルタイムに右側の画面プレビューされますので、「ここを変更したらこう変わる」と確認しながら作業ができます。

そして、編集画面の右下のボタンが大変便利です。

画面サイズの切り替えボタン

このボタンによって、右側に表示される画面が、PCサイズ、タブレットサイズ、スマホサイズと切り替わります。

わざわざスマホで確認しなくてもいいので、すごく便利ですね!

まとめ

という訳で、今回は初めてのスタイルシート編集にチャレンジでした。

コードを変更することによって影響が出る部分を確認しながら作業ができるので初心者には大変ありがたい機能です。

これを機に、もっとスタイルシートについて勉強しようと思った次第です。

ABOUT ME
まつみ
まつみ
もっと輝く50代応援メディア『50blog』を運営するアラフィフ女子まつみ@老後戦略家です。 現在は社内SEとして働きながら、これからの新しい働き方のために猛烈にポジティブに活動中です。 楽しく過ごす50代、おしゃれに暮らす50代、未来に備える50代。 50代は大忙しです。 もう若くないから・・・なんて言わずにもっともっと輝きましょう! 一緒にがんばる仲間も募集中!twitterフォローよろしくお願いいたします。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です