【Simplicity2カスタマイズ⑩】カエレバ・ヨメレバ・トマレバをカスタマイズする!

s-kaerebalink

Word Pressの超優良で且つ無料テーマであるSimplicity2のカスタマイズを備忘録的に残しています。

Simplicity2のカスタマイズの一覧は、こちらのページからご覧ください。

今回行うカスタマイズは、「カエレバ・ヨメレバ・トマレバを綺麗に表示させるためのカスタマイズ」です。

ブログを書いているなら少しでも良いと思った商品は紹介したいし、さらにそれで自分のブログ経由で商品が売れて報酬をもらえるならありがたいと思うのは普通の感情でしょう。

そんな時に超役立つのが「カエレバヨメレバトマレバ」。

これはブログを書いている人であれば知らない人はいないんじゃないか?というぐらい有名な方ですが、わかったブログを運営しているかん吉さんという方が無料で提供してくれているサービスです。

ここではツールの詳しい話しは割愛しますが、これを綺麗に表示させるためのカスタマイズのコードを載せておこうと思います。

スポンサーリンク

カスタマイズ前とカスタマイズ後の変化について

まず何もカスタマイズしないままで表示させた場合とカスタマイズ後の表示がどうなるかを見比べてみたいと思います。

まずはカスタマイズ前。

上から、カエレバ・ヨメレバ・トマレバの順に表示させています。(商品などは、自分が今買いたいものや読みたいものや泊まりたい場所を選んだだけです。w)

※【amazlet風 – 2(CSSカスタマイズ用)】を選択してリンクを作成しています。黒枠は画像を見やすいようにしているだけで、通常のままだと枠はありません。

▼カエレバkaereba

▼ヨメレバyomerebas

▼トマレバtomareba

ん~ダメなわけじゃないですが、見にくいと言えば見にくいですね。

これをCSSコードを入れてあげると…こんな風に変わります。(実際にクリックすればリンク先の飛びます。)

▼カエレバ

▼ヨメレバ

▼トマレバ

それぞれのリンクがボタン風になって、さらには背景を薄い黄色にして目立つようにしてみました。

スポンサーリンク

スタイルシート(style.css)に追記する

今回のカスタマイズはかなり簡単で、CSSコードを記述するだけ。

ということで、カスタマイズ用のコードは以下で、これをスタイルシート(style.css)に追記します。

これを追記すればそっくりそのままの表示がされます。

スマホ用のカスタマイズも忘れずに行う

上記コードはPCでは綺麗に表示されますが、スマホになると形が崩れてしまいます。

なので、スマホ限定の以下のコードをスタイルシートに追記します。

これでPC表示もスマホ表示も綺麗に表示されるようになります。

ヨメレバが「Amazon」、「Kindle」と横に並び、「楽天ブックス」だけ下段に表示されてますが、これをもし横に三列にしたいというなら、コードの【shoplink~】と書かれている次に【width】というコードがあります。

現在は44%にしてますが、この数字をいじくれば短くしたり長くしたり出来ます。

自分好みに色々と長さを決めたり背景の色を調整したり、色々カスタマイズしてみてください!

カエレバ・ヨメレバ・トマレバのカスタマイズ / まとめ

今回はAmazonや楽天のアフィリエイトリンクを綺麗に表示させるための、カエレバ・ヨメレバ・トマレバのカスタマイズをしてみました。

覚えてくるとカスタマイズは楽しくなってきますよ!

ぜひ参考にして下さい。

その他のSimplicity2のカスタマイズをご覧になりたい場合はこちらの記事を参考にして下さい。

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。