PR

カッテネカスタマイズ!CSSコピペでスマホのボタン表示を縦型にしよう

ブログ

カッテネはAmazonや楽天の商品リンクを見やすく、美しく表示してくれる非常に優秀なプラグインです。

でもちょっとだけ、ほんのちょっとだけだけど、もっとよくしたい部分がありました。

カスタマイズなしの表示(パソコン)
カスタマイズなしの表示(パソコン)
カスタマイズなしの表示(スマホ)
カスタマイズなしの表示(スマホ)

とても悲しいことに、ボタンの文字数が多いと収まらないんですよ。はみ出ちゃう

だから今までは単純に「Amazon」「Kindle」「楽天」「Yahoo!」というボタンにしてたんですが…

  • 「Yahoo!ショッピングで探す」ボタンにしたい!
  • スマホのボタン表示を縦型にしたい!

という欲求を爆発させまして、方法を探しに探した結果ついに完成しました。

カスタマイズ後の表示(パソコン)
カスタマイズ後の表示(パソコン)
カスタマイズ後の表示(スマホ)
カスタマイズ後の表示(スマホ)

ね?キレイに表示できてますよね。とても嬉しいです。

私にはコードを書く力はないので、RoughLog(ラフログ)様が公開しているCSSを使用させていただきました。ありがとうございました。

それでは、具体的画像付きでやり方を確認していきましょう。

めちゃくちゃ簡単!3分もあればできますよ。

まだカッテネがインストールできていないという方はWordPressでのカッテネの使い方を誰でもできるように画像50枚以上使って超詳しく説明します。の記事を参考にしてインストールするところから始めましょう!

スポンサーリンク

カッテネのカスタマイズ方法

それでは具体的にカッテネのカスタマイズ方法を説明していきます。

  • WordPressワードプレスでのカスタマイズ方法です。その他のソフトを使用している人はごめんなさい。
  • カスタマイズは自己責任でお願いします。うまくいかない場合があっても責任は取れませんのでよろしくお願いいたします。
  • 事前にバックアップをしていただくことをオススメいたします。

まずは下のリンクからラフログのページへ飛びましょう。

\クリック(タップ)/

そしたら、記事の中盤あたりにCSSのコードがありますので、コピーしましょう。

CSSコード

コピーしたらWordPressの編集画面をだして、外観→テーマエディターを選択

外観→テーマエディター

そしたら、

  1. 子テーマ(私はCocoon Child)が選択されていることを確認
  2. スタイルシート(style.css)を選択
  3. あいているところ(下のほう)に貼り付け
  4. ファイルを更新ボタンを押す
CSSの貼り付け

これでカスタマイズは完了です。あなたが投稿している記事のカッテネを確認してみてください。

うまく表示されていればバッチリです。

きちんと表示されましたか?

カッテネをカスタマイズした理由

僕がカッテネをカスタマイズしたかといいますと。理由が3つありまして、

  1. ボタンの文字を「Yahoo!ショッピングで探す」としたかった
  2. スマホ表示を縦型にしたかった
  3. 成功者の意見があった

これらが理由でした。

なんとなく「Yahoo!」より「Yahoo!ショッピングで探す」のほうが分かりやすいかなと思いまして、1つ目の理由はほぼ自己満足ですね。

2つ目の理由は利用者さんの気持ちになって考えてみたところ、この形のほうがボタンの押し間違いがなさそうだし、見るのに疲れないと思ったからです。

3つ目の成功者はブロガーならみんなが知ってるマクリンさんですね。僕がブログを始めたばかりのときにこんなツイートを見つけました。

「物販アフィリで収益どうやって上げるの?」と聞かれたので、僕なりにやってることを挙げてみた☺️
✔︎商品リンクは縦列表示で視認性アップ
✔︎ボタンの選択を増やし、購買を逃さない(最大4)
✔︎各見出し最後に入れる
✔︎テキストリンクも各見出し1〜2個まぶす
✔︎文は画像に添えて読みやすく

twitter マクリン より

これを読んで、初心者ブロガーだった僕は素直に

いつか商品リンクをつかうときは縦型表示をしよう

と決意したのでした。

まとめ

本記事では「カッテネカスタマイズ!CSSコピペでスマホのボタン表示を縦型にしよう」ということでカッテネの簡単カスタマイズ方法を見てきました。

あまりこだわりすぎてもただの自己満足です。

カスタマイズするのは記事を見に来てくれた方がボタンを押しやすくなるようなリンクにすること

それをしっかり頭に入れていきましょう。ありがとうございました。

コメント