カエレバをCSSでカッコ良くカスタマイズする方法を大公開!コピーして貼り付けるだけの簡単設定!

シェアボタンを押して情報を共有しましょう。

colored-pencils-179167_1920

こんにちわっふる!どうも、橋尾渡です!(笑)

今回は、かん吉さんの作った「カエレバ」をカッコ良くカスタマイズする記事を書いていきたいと思います!この前「カエレバ」について詳細を書きましたので、よくわからないという人は下記のリンクに移動してください。

カエレバは、かん吉さんの作ったAmazonや楽天など様々なリンクを出して取りこぼしを無くすアフィリエイト必須のツール!
こんにちは!こんばんは!どうも、橋尾渡です! あなたは「かん吉」という人物をご存じだろうか、ブロガーの世界ではとても有名な人物...

カエレバをカスタマイズしたいけど、どこをどういじったらいいのかよくわからない!という人のためにコピーをして貼り付けるだけという簡単な方法でご紹介したいと思います。

さて、カスタマイズしていくのは「amazlet風-1(改)[ロゴ無し]」というカエレバの基本型です。このデザインが一番カスタマイズしやすいのではないでしょうか。他にもいろいろデザインがあるのであなたの好きなデザインを選びましょう。

スポンサーリンク
レクタングル(大)広告

カエレバをカスタマイズする

スクリーンショット_042016_020811_PM

これがカエレバの初期デザインです。商品画像の横にはタイトルとショップへのリンクがありますね、今から全体に枠を付けてAmazonと楽天のリンクを装飾します。ショップリンクを装飾すればだいぶ見た目が変わると思われます。

最初にカエレバのリンクボックスに枠を付けましょう。ボックスに影を付けてやるとオシャレ度が一気にアップします。

スクリーンショット_042016_041707_PM

上記のコードを入力すると、ボックスに枠が付いて影もでましたね。これで十分にオシャレです(笑)続きまして、「Amazon」「楽天市場」のリンクを装飾していきましょう。

スクリーンショット_042016_050322_PM

各ショップへのリンクは枠と影を付けたほか、枠を丸めてみました。リンクの下にあった下線は消して、ボックス全体がリンクになるように設定しています。あとは色を付けるだけですね。

スクリーンショット_042016_051537_PM

ご覧ください。各公式サイトに忠実な色を再現してみました。この配色なら一目でなんのサイトかわかりますね。これで、リンクを踏んでもらいやすくなる可能性もあがることでしょう。

以上でカスタマイズは終わりです。次は上記のコードをまとめたものをワードプレスのテーマ編集で記入していきましょう。

CSSを反映させる

では、こちらが上記で記述した全てのCSSコードなのでコピーして貼り付けていきましょう。ワードプレスの管理画面にある「外観」から「テーマの編集」を選んでください。

スクリーンショット_042016_055934_PM

スタイルシートに空白を作り、コードを貼り付けましょう。

スクリーンショット_042016_061821_PM

貼り付けることができたら、保存を押しましょう。そうすることによって、CSSのコードがブログに反映されます。

まとめ

コードを貼り付けた際にレイアウトが崩れる可能性があります、そういった場合はコードを消してください。これは飽くまでもカスタマイズの一例なので参考程度にしてください。

それでは、そろそろカエレバをCSSでカスタマイズする記事を終わりたいと思います。ありがとうございました!

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

シェアボタンを押して情報を共有しましょう。

フォローする