WPテーマDiverでカエレバをデザインカスタマイズして使う方法

カエレバをWPで使うには、WP側で設定する必要があります。
カエレバの登録はコチラ▶ ▶ ▶ カエレバ 

【広告コード生成の時の注意】
下のチェック部分、をここにあるようにしておきます。

カエレバ登録画面

 

これからの作業はカエレバで登録を終了してからの作業です。やることは簡単です。
*他のテーマを使ったことがないので、他のテーマにも共通するかどうか、わかりません。

 

Diverの設定

 

  1. ダッシュボード → Diverオプション → 投稿設定を開く
  2. 一番下にある「カエレバ・ヨメレバ・・・」にチェック入れる。

 

カエレバ設定説明1画像

 

これで終了。
ひょっとしたら始めからチェック入っているのかもね。w

それでは試しに、記事にカエレバで作った広告コード(ブログパーツ)を貼りつけてみましょう。(テキストエディタでね。)

これで表示されるDiverのデフォルトの見え方が↓の画像の上になります。

カエレバの表示例2パターン

私的には、デフォルトのままだと、画像もフォントサイズ・ショップボタンも大きすぎると思うので、それぞれを小さくするようにカスタマイズしました。
それが下の方の画像です。全体に左寄りになって、コンパクトに見えますよね。

カスタマイズしました、なんちゃって!!

デカイのが嫌なので、解決策をお願いしま~す。

で、高木さんに書いてもらっただけ(>_<)

そのCSSがこれ↓
これをコピーして「追加CSS」に貼りつけて保存します。

/** 画像サイズ **/
.booklink-image, .kaerebalink-image, .tomarebalink-image{
width:80px !important;
}

/** 文字サイズ **/
.booklink-name>a, .kaerebalink-name>a, .tomarebalink-name>a {
font-size: 14px !important;
}

.content .kaerebalink-link1>div{
width: 26%;
}
.content .kaerebalink-link1 a{
padding: 1%;
font-size: .8em;
}

 

 

*カエレバの表示を少し変える、カスタマイズ方法
  1. メニューから
  2. 外観→カスタマイズ

テーマの設定メニュー画像

 

《もうひとつのカスタマイズメニューの出し方》

サイトを開いた上にあるメニューで「カスタマイズ」クリック。

テーマのカスタマイズ説明2

カスタマイズメニューの使い方説明画
この一番下にある「追加CSS」に高木さんが書いてくれたCSS(上の囲みの中)を貼りつけます。
右上の「変更」ボタンをクリックして保存。終了。
 

 

この本オススメ。いいコンテンツそのものがSEOといわれていますが、いいコンテンツ、いい記事って言うけど、日本語解析出来ないGoogleロボットが何を持って判断してるのか?
そういうことが腑に落ちます。
おすすめの記事