ヨメレバ・カエレバを使ったリンクボタンのカスタマイズで注意すること

アフィリエイト

アフィリエイトブログを運営している方によく使われているヨメレバ・カエレバ。

複数のECサイトへリンクを飛ばせるので便利なのですが、カスタマイズする時は注意が必要です。

私がつまずいたところを解決策とともにお伝えします。

※2019年8月31日追記:Cocoonに変えました!記事内容はSimplicity2を利用していた時のものです。

 

スポンサーリンク

ヨメレバ・カエレバのボタンをカスタマイズしたい!

Simplicity2の場合、CSSは「テーマエディタ」で編集

ある日、自分のブログを見ていて気付いたのですが。

 

カエレバのボタンがきれいに表示されていない!

 

 

え?いつから?おかしいな。

前に一度ちゃんと設定したはずなのに。

たぶんどこかのタイミングで何かやらかしたんでしょう。設定し直しです。やれやれ。

で、どこをやり直すかなんですが…。

すっかり忘れてしまったので、またググって確認です。

当ブログではテーマにSimplicity2を使用しています。

※追記:2019年9月以降はCocoonです。

ヨメレバ・カエレバのボタンをきれいに表示させるためには、CSSを編集する必要があります。

そしてSimplicity2では、CSSを編集する場所が2つあります(それ以外にもあるかもしれませんが、今のところ私が触っているのは2ヶ所です)

どっちにコードを貼ったらいいか迷いますね。

  • 外観→CSS編集(→追加CSS)
  • 外観→テーマエディタ→(「テーマの編集」画面)→スタイルシート(style.css)

これについては、作者のわいひらさんがSimplicityのサイトで質問にお答えになっています。

子テーマのstyle.cssでCSSを編集することをおすすめします。

 

今回私がうまくいかなかったのは、いつのまにか両方にCSSを書き込んでしまっていたからのようです(のちほど、他にも原因があったことに気付きます…)

そこで以下の対処をします。

  1. 「外観→CSS編集」の方を全部消す
  2. 外観→テーマエディタ→スタイルシート(style.css)にコードをコピペする

 

コードは、こちらを参考にさせていただきました。ありがとうございますmm

さて、直ったかな?

 

 

・・・・・・。

 

 

直ってない

 

なぜ?

カエレバ・ヨメレバのテンプレートは「amazlet風-2(cssカスタマイズ用)」を選択

そもそもカエレバ・ヨメレバのhtmlが、ちゃんと選択されていませんでした。

CSSをカスタマイズする時に選択するのは

amazlet風-2(cssカスタマイズ用)

ですね。

 

これまたなぜか、いつのまにかamazlet風1になっていたんです・・・。なんでや。

せっかく貼っても、見にくい表示になっていたら、誰もボタンを押してくれませんよね~。

あー、全部見直して、貼り直しですわ。

まとめ

順番としては、(上記の流れとは違いますが)以下の順で確認しながら設定すると良いと思います。

  • カエレバ・ヨメレバのhtmlがamazlet風-2(cssカスタマイズ用)になっているかどうか
  • CSSの編集はテーマエディタで(コードを2か所に書き込まない)

一度はちゃんとできていたのに、クッキーを削除とか?何かをいじってしまったせいか、表示が崩れていたようです。はあ・・・。

いつになったら「初心者」を卒業できるのでしょうか・・・。

スポンサーリンク
使える英語を身につけよう~♪٩( ‘ω’ )و
世界とつながるDMM英会話
使える英語を身につけよう~♪٩( ‘ω’ )و
世界とつながるDMM英会話
タイトルとURLをコピーしました