【初心者向け】ワードプレスgiraffeでカエレバのボタンのカスタマイズをする方法

カエレバともしもアフィリエイトの設定は無事に終わったけど、他の人がやっているみたいにボタンのカスタマイズをやってみたい」

 

「でも初心者だからCSSとかよくわからない…」

 

「テーマを編集なんて怖くてできない…」

 

そんな初心者のあなたに、少~しだけ初心者の域を抜け出せたこの私が、カエレバのボタンカスタマイズ方法を画像を使って一つずつ説明していきます。

 

焦らず一緒に進めて行きましょう♪

スポンサーリンク

カエレバのボタンをカスタマイズする前に…

カエレバのボタンをカスタマイズする前に、カエレバの設定ともしもアフィリエイトの設定はお済ですか?

 

まだの方は下記の記事をご参照ください。どちらも初心者向けに書いています。

>>もしもアフィリエイトの設定はこちらの画面からできます。

>>カエレバともしもアフィリエイトの初期設定方法の説明はこちら

>>カエレバでの商品リンク作成方法の説明はこちら

 

カエレバのボタンをカスタマイズする前に…2

大切なことです。

 

 

サイトによってはうまく反映されない可能性もありますので、カスタマイズの際は事前に必ずバックアップを取り、作業は自己責任で行いましょう。(by.Yoshiさん)

 

大切なことなので2回言います。

 

必ずバックアップは取りましょう。

 

そして、作業は自己責任で行いましょう。

カエレバのボタンをカスタマイズする方法

今回は、ブログメディア「RoughLog (ラフログ)」を運営されているYoshiさんが提供してくださっているCSSコードを参考にさせていただきます。

 

 

なんてったって、「カエレバ」「ヨメレバ」「トマレバ」のCSSをまとめてカスタマイズしてくださっているので、ありがたやありがたや…。

 

 

 

まずは、ワードプレス(もちろんgiraffe)の管理画面を開いてください。

 

外観>カスタマイズへ進みます。

 

すると…


こんな画面が開きます。
左側のメニューの中から追加CSSを選択します。

 

すると…

 


こんな画面が開きます。
この赤枠の部分に、Yoshiさんのブログ内で紹介してくださっているCSSコードをまるっと貼り付ければOKです。

 

と、言われても初心者には言葉だけでは難しいですよね。

 

なので、ここから先も画像で説明します。

 

↓のCSSコードをまるっとコピーをしてください。(Yoshiさんのコードをそのままお借りしました)

 

コピーしたら、先ほどの画面↓の赤枠内に貼り付けて、上にある『保存しました』ボタンをクリックして保存したら終了です。

赤枠の中にもともと入っている、

『/*
ここに独自の CSS を追加することができます。

詳しくは上のヘルプアイコンをクリックしてください。
*/』

この文言はさサクっと消してからCSSコードを貼り付けてください。

 

ちなみに、Yoshiさんのブログ内には「このままだと周囲を囲む枠線がないので、もし外枠を追加したければ、上記CSSコード内の~~~の部分を以下のように変更してください。」という文言がありますが、これは初心者には難しいですよね。

と、いうわけで、外枠ありパターンのコードもこちらで用意しました。
↓のコードは外枠ありのパターンですので、外枠ありがいいなという方はこれをまるっとコピーして赤枠内に貼り付けてくださいね。

上記のCSSコードをまるっとコピーしたら、

 

↑の赤枠の中に貼り付けて、上にある『保存しました』ボタンをクリックして保存したら終了です。

 

赤枠の中にもともと入っている、

『/*
ここに独自の CSS を追加することができます。

詳しくは上のヘルプアイコンをクリックしてください。
*/』

この文言はさサクっと消してからCSSコードを貼り付けてください。

 

 

もしも、コードを貼り付けて保存したのに、うまく変更されない場合は、ブラウザのキャッシュをクリアすると反映されることが多いのでやってみてください。

Googleのcromeの場合は、設定>詳細設定>閲覧履歴データを消去するでキャッシュの消去が可能です。

ただし、我々アフィリエイターはcookieが命なので、アフィリエイター仲間のためにもcookieは消去しないようにチェックを外してあげてくださいね。

 

 

はい、これでカエレバのボタンをカスタマイズできました♪

 

以上です。

まとめ

ワードプレスのテーマgiraffeだとこんなに簡単にカスタマイズできちゃうんですよね~

 

ほんとにありがたい!

 

 

ジュンイチさんとYoshiさん、ありがとうございます!!

 

>>ワードプレスgiraffeの日付表示を消す方法

>>ワードプレスgiraffeの『この記事を書いている人』を消す方法

>>ワードプレスgiraffeで記事に自分のTwitterアカウントと連動させる方法

↓↓↓この記事が少しでもあなたのお役に立てたなら、ポチっとしていただけるとうれしいです
にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村

スポンサーリンク

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください