「カエレバ」のリンクボックスに枠をつける方法

  • ブックマーク

Amazonや楽天のアフィリエイトリンクを作るのに便利なカエレバ。
当ブログでも利用させていただいています。便利ですね!

そのままでもシンプルで使いやすいですが、CSSを変更することでデザインのカスタマイズも可能です。

僕はカエレバで表示されたエリアを区別するために、枠を追加してみました。

「カエレバ」のリンクボックスに枠をつける方法

方法はいたって簡単。
カエレバで吐き出したソースの1行目のstyle=“”の中身を変えるだけです。

初めに入っているstyle=“〜”の中身を下記のように変更します。

div class=”kaerebalink-box” style=”text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;”

div class=”kaerebalink-box” style=”text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden; border:1px solid #cccccc;

 

これで枠線が表示されるようになりました。下のようになります。

151004-kaereba-01

下記のように設定を変えると細かい調整ができます。

枠を太くしたい:
borderの設定を変更してください。
border:1px solid #cccccc;

border:10px solid #cccccc;

151004-kaereba-02

枠線の色を変えたい
borderの設定を変更してください。
border:1px solid #cccccc;

border:1px solid #336699;

151004-kaereba-04

背景に色をつけたい:
border:1px solid #cccccc;のあとに下記を追加してください。
background-color: #ff9bdf;

151004-kaereba-03

カラーコードは下記のようなサイトで設定することができます。
http://html-color-codes.info/japanese/

設定をブログ内で使い回す方法

ちなみに毎回このソースを追加するのが面倒なので、このように設定すると使いまわせます。

1)WordPressの管理画面にログインします。

2)外観→テーマの編集 を選択します。

3)「スタイルシート」を開きます。

4)下記を追加します。場所はどこでも構いません。分からなかったら、一番下の行に追加してください。

.kaerebalink-box{
text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;border:1px solid #cccccc;
}

 

5)カエレバの吐き出されたソースをブログに貼り付ける時に、1行目の「style=“〜”」を削除。

1〜4は一度設定すればOKです。
4の設定を更新すると、今までにブログ内で書いたカエレバリンクエリアが一斉にデザイン変更されます。
※ただし、5の「style=“〜”」の削除が済んでいない場合は、設定が混ざってしまいます。

以上、カエレバのカスタマイズ方法でした。

styleの中を変更することで、枠やテキストの装飾ができます。
あなたのブログに合わせた好みのスタイルにしてみてください。

この記事も読まれています

  • ブックマーク