もしもアフィリエイトのかんたんリンク機能を使ったことはありますか?

Amazon・楽天市場・Yahoo!ショッピングの商品リンクが簡単に作れちゃうんです。

もしもアフィリエイトの審査を通過したので、早速使ってみました!

\リンクをかんたんに同時作成/

使い方はブログで紹介したい商品を検索して、プレビューで確認。自動生成されたHTMLソースをエディタに貼るだけ。

おしゃれなリンクカードができるんですよ!

あれ?「Yahoo!ショッピングで見る」の「る」が改行されてしまいますね…

今回は、このかんたんリンクのレイアウトが崩れてしまう問題を解決していきます。

当ブログの執筆環境は以下のとおりです。
・WordPress:5.4.2
・使用テーマ:Nishiki

改行される原因

かんたんリンクのプレビュー画面と比較すると文字やボタンの大きさが異なっていますね。

これはWordPressのテーマやバージョンによってレイアウトが崩れてしまうことが原因です。

追加CSSでフォントを小さくカスタマイズ

ボタンの文字が改行されないようにフォントサイズを小さくしてみることにします。

CSSでボタンのスタイルを変更しましょう。

「外観」→「カスタマイズ」→「追加CSS」に以下のコードをコピーして貼り付けます。

div.easyLink-box div.easyLink-info p.easyLink-info-btn a{
	 font-size: 11px !important;
}

貼り付けたら右上の「公開」ボタンをクリックして保存してください。

商品画像サイズを小さくカスタマイズ

ボタンを一列に並べたいので、さらに商品画像サイズを小さくします。幅と高さを130pxに指定します。スマートフォンで見ると画像のバランスが悪いので、マージン(余白)をautoにすると左右中央に表示されます。

div.easyLink-box div.easyLink-img,
div.easyLink-box div.easyLink-img p.easyLink-img-box,
div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht{
         max-width: 130px !important;
         max-height: 130px !important;
         margin: auto;
}

!importantとは?

追加CSSで指定したプロパティを最優先にするために、値の後ろに「!important」を付けます。

セレクタ{
	プロパティ:値 !important;
}

デザインのベースとなるWordPressテーマのフォントサイズが16ptになっていますが、「!important」を付けることで優先的に11ptに表示させることができます。

PC表示

スマホ表示は以下のようになります。

スマホ表示

CSSが反映されない場合

それでもうまく表示されない場合、ブラウザのキャッシュが最新ではない可能性があります。

キャッシュとは過去に閲覧したWebサイトのデータをパソコンに一時的に保存し、もう一度同じページを開いた時に保存したデータを参照することで表示速度を上げる機能です。

Google Chromeでキャッシュを削除するには、Macの場合「Command + Shift + R」、Windowsの場合「Shift + F5」で再読み込みし、最新の表示内容を確認しましょう。

まとめ

カスタマイズは後回しにしようとしていたのですが、やはり気になるのでCSSを追加することで解決できました。

これでブログを書くことに集中できますね!

自分が読んだ本などを紹介するときにとても便利なツールです。

かんたんリンクは初心者に優しい機能なのでぜひ使ってみてください。