simplicityで「カエレバ」をボタン化する簡単な方法

今回は以前の記事でご紹介したAmzonアフィリエイト等でリンクを作成するときに便利なツールである「カエレバ」でカスタマイズしたリンクを作成する方法をご紹介します。

私自身ブログ初心者で「CSS」について詳しくないのでコピペで出来るカスタマイズ方法についてご紹介します。

本日もiKouya.comをお読みいただきありがとうございます!Kouya(@4_kouya)です。そしてカエレバ初心者のKouyaです。

今回はAmazonアフィリエイトリンクの作成にとても便利なツール「カエレバ」でカスタマイズしたリンクを導入する方法について書いていきたいと思います。まず、最初にカエレバについて少しご紹介します。

「カエレバ」とは?

「カエレバ」とは「わかったブログ」の管理人であるかん吉さんが運営されているwebサービスのことです。このようなサイトですね。

スクリーンショット 2015-12-10 23.07.17

もちろんこのままの状態でも十分便利なツールであり、普通にAmazonで作成したリンクよりも綺麗でみやすいものを使用することができます。しかし、このツールの一番の魅力はカスタマイズできることにあります。今回は難しいことはせずにコピペだけでカスタマイズする方法をご紹介しようと思います。ブログ初心者の方は参考にしていただければ幸いです。

 

「カエレバ」の基本設定を行う

まずは基本的な設定を行う必要があります。基本的な設定とはAmazonアソシエイトや楽天アフィリエイトのIDを登録することですね。こちらについては記事にしているのでコチラを参考に設定してみてください。「Amazonアフィリエイトを作成するときに超便利なツール「カエレバ」をご紹介

 

「カエレバ」のカスタマイズ方法

それではカスタマイズ方法についてご紹介します。カスタマイズを行うにはCSSの知識が必要になってくるのですがブログ初心者の私にはそのような知識はないので、今回は『Shufulife(主婦ライフ)』さんの記事『コピペで完了!STINGER5でヨメレバ・カエレバのカスタマイズ』を参考にさせていただきました。

まずは何もカスタマイズしていない状態のリンクがこちらです。最近はまっているドルチェグストのカプセルです。

スクリーンショット 2015-12-12 15.44.37

これでも十分なのですが、アマゾンや楽天などのショップのテキスト部分をCSSでボタン化にします。

カスタマイズするとこのようにボタン表示をさせることができます。ボタンが表示されることによりスッキリした印象があります。文字も大きく押しやすいので見ている人にもありがたいのではないでしょうか。

カスタマイズ方法

それでは、カスタマイズ方法について説明します。カスタマイズといってもコピペをするだけなのでとても簡単です。今回はこちらの記事を参考にさせていただきました。

CSSの編集

それではカスタマイズしていきましょう。まずはCSSの編集画面を開きます。左側のタブから「外観」→「CSS編集」の順にクリックします。

スクリーンショット 2015-12-12 16.23.28

すると、以下のようなCSSスタイルシートエディターというCSS編集画面が表示されますので、こちらにCSSコードをコピペしましょう。

スクリーンショット 2015-12-12 13.15.00

 

私が使用させていただいたCSSコード

今回私が使用させていただいたCSSコードは以下のものになります。

これをコピーしてそのまま貼り付ければOKです。とっても簡単ですよね。

スクリーンショット 2015-12-12 16.30.01

これでカスタマイズは終了です。一度きちんと表示されているか確認してみることをお勧めします。またこちらのCSSコードをいじれば自分だけのオリジナルのものを作成することもできます。自分のこだわりを持ったリンクを作成したい方は挑戦してみてはいかがでしょうか。

 

まとめ

以上、コピペで出来る「カエレバ」のカスタマイズ方法についてでした。私自身CSSの知識も何もなく初めてだらけのことだったので2時間ほど思考錯誤してやっと思い通りの表示をさせることができました。カスタマイズについてはまだまだなので、また時間があるときにやってみたいなと思っています。

いろいろな方々のブログを参考にさせていただいたのですが皆さんとてもわかりやすく、かつ見やすいブログで改めて自分の未熟さを実感しました。これからはブログのカスタマイズにも力を入れていきたいと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です