【もしもアフィリエイト】かんたんリンクのボタンの文字と商品画像を小さくカスタマイズする方法

ブログ

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

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

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

＼リンクをかんたんに同時作成／
もしもアフィリエイトをはじめる

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

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

リニューアルされたかんたんリンクはボタンカラーも編集できて便利ですね。

今回は商品画像サイズやボタンのフォントサイズも変えたいという方のために、小さくカスタマイズする方法をシェアします。

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

追加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テーマのフォントサイズになっていますが、「!important」を付けることで優先的に11ptに表示させることができます。

PC表示
スマホ表示

CSSが反映されない場合

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

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

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

まとめ

カスタマイズは後回しにしようとしていたのですが、CSSでデザインを変更することでモチベーションが上がって、ブログを書くことに集中できますね！

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

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