「Rinker(リンカー)」スマホ・タブレット表示のレイアウト調整 CSSカスタマイズ

「 Rinker(リンカー)」とは、WordPressのプラグイン。

Amazon・楽天・Yahooショッピングの商品リンクの作成をWordPress上で行うことができます。

また、商品検索から追加までの流れが非常に簡単で、リンクはショートコードでわかりやすく管理されています。

このプラグインの製作者は、
在宅フリーランスプログラマ&ブロガーのやよいさん。[@oyayoi19

初めて商品リンクをとりあつかう私でも使いやすく、便利なプラグインです。

さて、今回はそんなWordPressのプラグイン「Rinker(リンカー)」の、
スマホ・タブレット表示のレイアウト調整をしたCSSカスタマイズを書き残します。

確認事項

以下の項目よりCSSカスタマイズの実行、動作確認をしています。

  • WordPress 4.9.7
  • WordPressテーマ「ストーク(STORK)」
    バージョン:1.1.8
  • レイアウト確認
    iPhone5 ディスプレイ (1,136×640px)
    スマホ→縦表示 タブレット→横表示
  • CSSカスタマイズは子テーマでおこなっています。

Rinkerのデフォルトレイアウト

カスタマイズ前のレイアウトです。

PC

スマホ

タブレット

ボタン文言を追加した場合

商品リンクボタンのテキストは、ショートコードに属性を追加することで変更することができます。

今回は各ショップボタンに「~で探す」というテキストを追加して、デフォルトのレイアウトを確認してみます。

PC

スマホ

タブレット

カスタマイズで変更する点

特に気になる3点をあげます。

外部リンクマーク

私が使用しているWordPressのテーマ「ストーク(STORK)」では、デフォルトで表示されてしまうようです。

商品リンクには特に必要もなく、ボタン幅も広がってしまうので削除します。

商品リンクボタンの配置バランス

PC・タブレット表示ではボタンが全て左揃えになっていて、右のスペースが空いています。

商品リンクの枠内にバランスよく配置したいので、中央揃えに変更します。

商品リンクボタンの文字の見切れを改善

今回カスタマイズをしようと思った一番の理由です。

スマホのディスプレイは幅が狭いので、商品リンクボタン内に文字が収まらずに見切れてしまっています。

フォントサイズを小さくしても、テキストを追加した場合などはもっと文字数が多くなるので、限界があります。

そこで、商品画像が左に表示される横並びではなく、上に表示される縦表示に変更して、ボタンスペースを確保します。

カスタマイズ後のレイアウト

PC

スマホ

タブレット

こちらが実際の商品リンクです。↓

さきほど上げた変更する3点以外にも、マウスオーバーのエフェクトなどカスタマイズしてたりします。

PC・タブレット・スマホ画面から確認したい方はどうぞ。

コード

レイアウト調整は56行以下の/* PC・タブレット・スマホ レイアウト調整 */のコードになります。

レイアウト調整については、こちらの記事を参考にさせていただきました。

以上でおわります。
ありがとうございました。