【初級ブロガー必読】Amazonリンク便利ツール『カエレバ』でボタン実装カスタマイズ!

シェアする

  • このエントリーをはてなブックマークに追加
SNSフォローボタン

フォローする

みなさん、夏の予定は立てました?今年の夏は今年しかないですよ?「来年楽しめばいいや…」なんてもったいない!今年の夏は今年しかないんだ!!

こんにちは。夏を謳歌し続けてます。りむです。

ブロガーのみなさんは、きっと当たり前のように『カエレバ』を使ってると思うんですけどね。Amazonのリンクとか、キレイに見せる最強のツールです。かん吉さんが作成してくれているツールですね。

ぼくは今まで(2017/713まで)デフォルト(もかり風)のまま使っていたんですが、WordPressブロガー飲み会で仲良くなったブロガーさんたちに

「『カエレバ』使ってるんだったら絶対にボタンを設置したほうがいい!」

ってアドバイスもらって、でもコードとかよくわからなかったので何をしていいのかサッパリピーマンだったんですが…今回、ぼくのブログカスタマイズの顧問(勝手に思ってるだけですけど)のらすさん(@Tips4Life_me )に手取り足取りほぼすべてやってもらってボタン設置ができました!

かっこいい!!(最近、らすさんにおんぶに抱っこです)

ということで、今回は『カエレバ』にボタンを設置する方法です。

デフォルトのままじゃもったいない!プラグインなしでも簡単に『カエレバ』ボタンを設置する手順!

手順は簡単!プラグインなしでも作業完了!「コードとかPHPって何?」っていうブロガーでも確実にボタン設置ができます。この手順通りに作業を行うと、ぼくの表示とまったく同じ状態になります。

でもね、「自力でやれっ!」って言われたら絶対にできなかった作業手順です。

(ちなみに、ぼくは2017/7/14時点でWordPressブログ運営8ヶ月ですが、コードに関しては一切勉強してこなかったので、何が書かれてるのかサッパリピーマンです。教えてくれる人が近くにいるって心強い!)

STEP1:Simplisity2のスタイルシートにコードをコピぺする

まずはWordPressのスタイルシートにコードをコピペしましょう。ぼくの場合、使用しているテーマが『Simplisity2』なので

外観→テーマの編集

からスタイルシートの編集。スタイルシートの最後尾に

/* Amazon Btn */ .shoplinkamazon { width: 150px; background: ; background: -webkit-linear-gradient(top,,); background: linear-gradient(to bottom,,); border: 1px solid; border-color: ;display: inline-block; border-radius: 5px; margin-bottom: 5px; } .shoplinkamazon a { display: block; padding: 7px 1em 7px 1em !important; color: #111; text-decoration: none; } /* 7net Btn */ .shoplinkseven { width: 150px; background: ; border: 1px solid; border-color: ;display: inline-block;border-radius: 5px; margin-bottom: 5px; } .shoplinkseven a { display: block; padding: 7px 2em 7px 2em !important; color: ; text-decoration: none; } .shoplinkseven img { display: none; }

そのまま貼り付けます。(コードはらすさんから頂きました)

これでボタンの実装は完了です。

STEP2:『カエレバ』のリンクコードの編集する

続いて、カエレバのリンクコードの修正です。

カエレバのリンクってめちゃくちゃ長いですね。一部抜粋でいきますね。もかり風のデフォルトコードだと

<div class=“shoplinkamazon” style=”display:inline; padding-right:5px;background: url(‘http://img.yomereba.com/kl.gif’) 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;”><a href=”http://www.amazon.co.jp/gp/search?keywords=%E5%BC%B1%E8%99%AB%E3%83%9A%E3%83%80%E3%83%AB&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=自分のID” target=”_blank” >Amazonで探す</a></div><div class=“shoplinkseven” style=”display:inline; padding-right:5px;background: url(‘http://img.yomereba.com/kl.gif’) 0 -100px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;”>

みたいなコードが書かれてると思うんですが、この赤字部分が曲者で。このコードがあるとボタンがうまく表示されません。なので一気に削除します。

ただ、長いコードの中から探すのは結構大変ですよね?そんな時の目印になるのが青字部分です。これを見つけてしまえば楽勝です。ぼくはAmazonと7.netしかリンクしてないので2ヶ所の削除のみです。

作業はこれだけ!あとは膨大な過去記事を編集するのみ!!

これでボタン実装の全行程は完了!ふたつのSTEPで完成するので、コードがよくわからないっていう初心者の方でも簡単に作業が完了します。記述するコードに詳しくなれたら、さらに自分好みのデザインやカラーに変更できるようになりますね!

ただ、初心者の方やコードに明るくない人は要注意です。

ネットで検索すると、一気にリンクコードを変換できる便利プラグインもあるようですが、よくわからないまま使用するとせっかくのサイトがグチャグチャになってしまう可能性があります。

この記事を読んでいる初心者の方は、まだまだ記事も多くなく、手作業で修正できる範囲駄と思うので、ひとつひとつリライトしながらコードの削除をすることをお勧めします!(ぼくは300記事のリンクを手作業で修正する暴挙にでてます)

あっ!!それと

「変更してみて自分のサイトを見てみたけど更新されてない…」

って場合は、過去のキャッシュ(?)が残ったままで表示されていないケースがあるので(ぼくもそうでした)、GoogleChromeのシークレットモードで検索して確認してみるといいですよ!

シークレットウィンドウの表示の仕方は

  • Windows:『shift+Ctrl+n』キー
  • Mac:『shift+command+n』キー

です!

スポンサーリンク
太もも

シェアする

  • このエントリーをはてなブックマークに追加

フォローする