カッテネはAmazonや楽天の商品リンクを見やすく、美しく表示してくれる非常に優秀なプラグインです。
でもちょっとだけ、ほんのちょっとだけだけど、もっとよくしたい部分がありました。
とても悲しいことに、ボタンの文字数が多いと収まらないんですよ。はみ出ちゃう。
だから今までは単純に「Amazon」「Kindle」「楽天」「Yahoo!」というボタンにしてたんですが…
- 「Yahoo!ショッピングで探す」ボタンにしたい!
- スマホのボタン表示を縦型にしたい!
という欲求を爆発させまして、方法を探しに探した結果ついに完成しました。
ね?キレイに表示できてますよね。とても嬉しいです。
私にはコードを書く力はないので、RoughLog(ラフログ)様が公開しているCSSを使用させていただきました。ありがとうございました。
それでは、具体的に画像付きでやり方を確認していきましょう。
めちゃくちゃ簡単!3分もあればできますよ。
まだカッテネがインストールできていないという方はWordPressでのカッテネの使い方を誰でもできるように画像50枚以上使って超詳しく説明します。の記事を参考にしてインストールするところから始めましょう!
カッテネのカスタマイズ方法
それでは具体的にカッテネのカスタマイズ方法を説明していきます。
まずは下のリンクからラフログのページへ飛びましょう。
そしたら、記事の中盤あたりにCSSのコードがありますので、コピーしましょう。
コピーしたらWordPressの編集画面をだして、外観→テーマエディターを選択
そしたら、
- 子テーマ(私はCocoon Child)が選択されていることを確認
- スタイルシート(style.css)を選択
- あいているところ(下のほう)に貼り付け
- ファイルを更新ボタンを押す
これでカスタマイズは完了です。あなたが投稿している記事のカッテネを確認してみてください。
うまく表示されていればバッチリです。
カッテネをカスタマイズした理由
僕がカッテネをカスタマイズしたかといいますと。理由が3つありまして、
- ボタンの文字を「Yahoo!ショッピングで探す」としたかった
- スマホ表示を縦型にしたかった
- 成功者の意見があった
これらが理由でした。
なんとなく「Yahoo!」より「Yahoo!ショッピングで探す」のほうが分かりやすいかなと思いまして、1つ目の理由はほぼ自己満足ですね。
2つ目の理由は利用者さんの気持ちになって考えてみたところ、この形のほうがボタンの押し間違いがなさそうだし、見るのに疲れないと思ったからです。
3つ目の成功者はブロガーならみんなが知ってるマクリンさんですね。僕がブログを始めたばかりのときにこんなツイートを見つけました。
「物販アフィリで収益どうやって上げるの?」と聞かれたので、僕なりにやってることを挙げてみた☺️
twitter マクリン より
✔︎商品リンクは縦列表示で視認性アップ
✔︎ボタンの選択を増やし、購買を逃さない(最大4)
✔︎各見出し最後に入れる
✔︎テキストリンクも各見出し1〜2個まぶす
✔︎文は画像に添えて読みやすく
これを読んで、初心者ブロガーだった僕は素直に
いつか商品リンクをつかうときは縦型表示をしよう
と決意したのでした。
まとめ
本記事では「カッテネカスタマイズ!CSSコピペでスマホのボタン表示を縦型にしよう」ということでカッテネの簡単カスタマイズ方法を見てきました。
あまりこだわりすぎてもただの自己満足です。
カスタマイズするのは記事を見に来てくれた方がボタンを押しやすくなるようなリンクにすること。
それをしっかり頭に入れていきましょう。ありがとうございました。
コメント