カエレバのカスタマイズ方法まとめ

前回はAmazonや楽天等物販のアフィリエイトに非常に便利なツール「カエレバ」の基本的な使い方を紹介したので今回は「カエレバ」のカスタマイズ方法を解説していきます。

カエレバのカスタマイズについては探せば色々なサイトで紹介されていてコピペでカスタマイズ完了なんてサイトがあって非常に便利です。ただ、私個人的にはコピペするよりも仕組みを知って少しでも知識を身につけたいというタイプなのでカスタマイズの解説付きでのんびり書いてみたいと思います。

スポンサーリンク
アフィリエイトBパートナー募集

カエレバのカスタマイズの手順

今回はカエレバの背景色やリンクの色、文字の色、ショップリンクをボタン化というようなカスタマイズをしていきます。ある程度自分でデザインできるようにコメントを入れながら1つ1つ解説していきますね。

基本的なCSSを追加しておく

カエレバのリンク作成画面「デザイン」の部分で「amazlet風-2(CSSカスタマイズ用)」というのを選んでリンクを作成していく訳なんですが、この「amazlet風-2(CSSカスタマイズ用)」を選択すると他のデザインと違ってほとんどCSSの記述がないリンクコードができます。

ほとんどCSS記述のない状態からCSSを書いて行くのは結構面倒だし大変。という訳でCSSがある程度付属しているデザインのCSS部分だけを抜き出して変更したい部分だけを変更したらよくない?という結論になりました。

という訳なのでとりあえずある程度CSSが付属しているデザイン「amazlet風(改)-1」というデザインのCSSを抜き出してみる事にしました。

カエレバカスタマイズ-1

↑このデザインのCSSをまずは抜き出しますので、ブログのスタイルシート(CSS)の一番下にでも追加しておいて下さい。

/* amazlet風(改)-1 */
.kaerebalink-box{
  text-align:left;
  padding-bottom:20px;
  font-size:small;
  /zoom: 1;
  overflow: hidden;
}

.kaerebalink-image{
  float:left;
  margin:0 15px 10px 0;
}

.kaerebalink-info{
  line-height:120%;
  /zoom: 1;
  overflow: hidden;
}

.kaerebalink-name{
  margin-bottom:10px;
  line-height:120%;
}

.kaerebalink-powered-date{
  font-size:8pt;
  margin-top:5px;
  font-family:verdana;
  line-height:120%;
}

.kaerebalink-kakaku{
  color:.990000;
  font-weight:bold;
}

.kaerebalink-cart{
  margin:10px 0;
  width:100px;
  height:25px;
}

.kaerebalink-detail{
  margin-bottom:5px;
}

.booklink-footer{
  clear: left;
}

.kaerebalink-link1{
margin-top:10px;
}

/* この部分はショップのリンク部分 */
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkyahoo,
.shoplinkyahooAuc,
.shoplinkseven,
.shoplinkbellemaison,
.shoplinkcecile,
.shoplinkkakakucom{
  display:inline;
  margin-right:5px;
}

こんな感じ。このCSSを追加しておいて必要な部分だけを変更していけば良い訳です。

さて、CSSの記述に関しては下に書いた物(後から書いた物)が優先されます。つまり同じ記述が2つあっても後から書いた物が優先されるので、上記コードをCSSに貼り付けてその下(後)に変更したい部分のCSSをどんどん追加して行く方が慣れていない人にはやりやすいと思います。

そのためまずは基本となるCSSを記述しておき、変更する部分を追加していきましょう。

カエレバ全体の背景色の変更と枠線

カエレバのリンク全体の背景色は自分のサイトのカラーに合わせて変更する事もできます。分かりやすいようにグレーにしてみました。グレーになっているこの部分です。

カエレバカスタマイズ-4

この部分の背景色を変更するには次のコードをCSSに追加してカラーを変更しておきましょう。

/* カエレバ背景色 */
.kaerebalink-box{background-color:#fff;}

また、このカエレバのリンクの外側に枠線を付けたい場合には次の記述もできます。

/* カエレバ枠線 */
.kaerebalink-box{border:1px solid #000;}
  • border:枠線
  • 1px:これが枠線の太さ
  • #000:ここが枠線の色

となりますので、好きな数値やカラーに変更して下さい。

テキスト部分をカスタマイズ

商品画像の部分で変更する部分ってほとんどないので、リンクの「テキスト部分」をカスタマイズしてみましょう。このカエレバのテキスト部分は3つの部分に分解できます。それぞれにクラス名が付けてあります。

カエレバカスタマイズ-3

  • 商品名(posted with カエレバも含む)「.kaerebalink-name」
  • posted with カエレバ「.kaerebalink-powered-date」
  • 商品詳細「.kaerebalink-detail」

それぞれに名前がついているのでこのようにカスタマイズが可能です。

/* 商品名の部分 */
.kaerebalink-name{
  font-size:15px;  /* 文字の大きさ */
  font-weight:bold;  /* 文字を太字に */
}

/* 商品名の部分(リンク) */
.kaerebalink-name a{
  color:#0066cc;  /* リンクの色 */
  text-decoration:none;  /* アンダーライン無し */
}

/* 訪問済みのリンクの色 */
.kaerebalink-name a:visited {
  color: #9f9f9f;
}

/* カーソルが乗った時 */
.kaerebalink-name a:hover{
  color:#7a8285;  /* カーソルが乗った時のリンクの色 */
  text-decoration:underline;  /* リンクにアンダーライン */  
}

最後の「 } 」までスクロールしてコピペ下さい。この商品名の部分は「posted with カエレバ」の部分も含む領域ですが「posted with カエレバ」部分は個別にカスタマイズする必要があります。商品名と同じような文字の大きさや色にするのであればこのように追加。

/* posted with カエレバの部分 */
.kaerebalink-powered-date{
  font-size:15px;  /* 文字の大きさ */
  font-weight:bold;  /* 文字を太字に */
}

/* リンク部分 */
.kaerebalink-powered-date a{
  color:#0066cc;  /* リンクの色 */
  text-decoration:none;  /* アンダーライン無し */
}

/* 訪問済みのリンクの色 */
.kaerebalink-powered-date a:visited {
  color: #9f9f9f;
}

/* カーソルが乗った時 */
.kaerebalink-powered-date a:hover{
  color:#7a8285;  /* カーソルが乗った時のリンクの色 */
  text-decoration:underline;  /* リンクにアンダーライン */  
}

これも最後の「 } 」までスクロールしてコピペ。テキスト部分の3番目「商品の詳細部分」も文字の大きさや色を合わせておきましょう。この部分はリンクではないので簡単に。お好みで調整して下さいね。

/* 商品詳細部分 */
.kaerebalink-detail {
  color: #000;  /* 文字の色 */
  font-size: 15px;  /* 文字の大きさ */
  font-weight: bold;   /* 文字を太字に */
}

以上でテキスト部分は終了。続いてショップリンクの部分をボタン化してみましょうか。

ショップリンクをボタン化

ショップ部分には「Amazon」「楽天」以外にも「Yahoo!ショッピング」とか他にも色々ありますが、やり方は同じなので「Amazon」と「楽天」を基準に解説してみます。

ショップ部分をボタン化するとこんな感じになります。

カエレバカスタマイズ-5

こんな感じにボタン化するには「外枠の線」を付けて「背景色」を付けて「ボタンの幅」を決めるという感じでやっていくとボタンになります。それから位置調整の記述もしていくことになります。

ちなみに各ショップのリンク部分はこのようにクラス名が付けられています。

  • Amazon「.shoplinkamazon」
  • 楽天「.shoplinkrakuten」
  • Yahoo!ショッピング「.shoplinkyahoo」
  • ヤフオク「.shoplinkyahooAuc」
  • 7net「.shoplinkseven」
  • ベルメゾン「.shoplinkbellemaison」
  • セシール「.shoplinkcecile」
  • 価格コム「.shoplinkkakakucom」

とりあえず「Amazon」と「楽天」の2つを利用すると仮定してCSSを書いてみましょう。他のショップも同じように書けます。

/* Amazonと楽天のボタン */
.shoplinkamazon, .shoplinkrakuten {
  text-align:center;  /* 文字をボタンの中央に */
  margin-right: 10px; /* ボタンとボタンの間の余白 */
  float: left;  /* ボタンを横並びに */
  width: 45%;  /* ボタンの幅 */
}

.kaerebalink-link1 a {
  display: block;
  height: 40px;  /* ボタンの高さ */
  line-height: 40px;  /* ここはボタンの高さと同じ数値に */
  border-radius:5px;  /* ボタンの角をちょっと丸く */
  -moz-border-radius:5px;  /* ボタンの角をちょっと丸く(Firefox向け) */
  -webkit-border-radius:5px;  /* ボタンの角をちょっと丸く(Google Chrome、Safari向け) */
}

/* ボタン上に余白 */
.kaerebalink-link1 {
  margin-top: 15px;
}

/* 左寄せを後から解除するための記述 */
.kaerebalink-link1:after {
  content:"";
  display:block;
  clear:both;
}

それからショップのリンク(Amazonとか楽天とかの文字)部分ね。アンダーライン消したり文字色を変えたり。

/* Amazonと楽天のリンク部分(ボタン内のテキスト) */
.shoplinkamazon a, .shoplinkrakuten a{
  background-color:#1F5E73;  /* ボタンの背景色 */
  color:#fff;  /* 文字の色 */
  text-decoration:none;  /* アンダーライン無し */
  font-weight:bold;  /* 文字を太字に */
  display:block;  /* ボタン全体をクリックできるようにブロック要素にする */
}

これAmazon「.shoplinkamazon」と楽天「.shoplinkrakuten」一緒に書いていますが、もちろん別々に書くこともできますので、それぞれフォントの色や背景色を変更したい場合には別々にしてCSSを書いてもOK。

それと他のショップリンクも全部同じデザインのボタンでいいなら上記全てのクラス名(Yahoo!ショッピングとか7ネットとか)も「 , 」で区切って全てのクラス名を追加してもOKです。

ここのボタンで設定する「width」でボタンの横幅が決まります。ここの数値を大きくしすぎるとボタンが入らなくて下に「カラム落ち(下に落ちちゃう)」するので注意。それとボタンを横に3つ並べたい場合等にはこの「width」を30%くらいで良いと思います。

こんな風に3つ並びます。

カエレバカスタマイズ-6

この横幅に関しては確認しながら調整しておく事をおすすめします。

あ、それからボタンにカーソルが乗った時に色を変えたりもできるのでついでに追加しておきましょう。

.shoplinkamazon a:hover, .shoplinkrakuten a:hover{
  background-color:#7a8285;
}

という感じで一応PCページの表示はこれで大体できてきましたが、これで終わりではないのです。今度はスマートフォン用のCSS調整が必要です。

ちなみにWordPressなどのレスポンシブデザイン以外のブログ、例えば無料ブログなどはPCとスマートフォンのCSSが別になっているので、スマートフォン版のCSSにも同じ記述が必要なので注意。

スマートフォンページ用のCSSを追加

スマートフォンは画面の横幅が狭いのでPCページでのカエレバのように画像を左に寄せてしまうとちょっと厳しいです。こんな感じになってしまいます。

カエレバカスタマイズ-7

という訳なのでスマートフォン表示では「画像の左寄せ」を解除してボタンも1列に1つずつに調整してこんな感じにしてみました。

カエレバカスタマイズ-8

それではスマートフォン用のCSSを追加していきましょう。まず必要になるのは次の記述(WordPressの場合)。

@media screen and (max-width: 599px) {
 
/* この間にCSSを書いていく */
 
 }

これは簡単に説明すると「ブラウザのサイズが599px以下の場合には」という条件分岐ですね。この条件分岐の中にスマートフォン用のCSSを書いていけばいいという訳です。代表的な7インチのタブレットのブラウザサイズが600pxなのでそれより小さい599px以下という条件分岐にしておきました。

無料ブログなどの場合はスマートフォン版のCSSが別になっている場合が多いので、条件分岐の部分の中身だけスマートフォン版のCSSに追加。WordPressの場合はそのまま普通のCSSに追加でOK。

/* カエレバスマートフォン表示 */
@media screen and (max-width: 599px) {
.kaerebalink-box {
  margin-top:10px;  /* カエレバ全体の上に余白 */
  margin-bottom:10px;  /* カエレバ全体の下に余白 */
  text-align:center;  /* カエレバリンク内テキストは中央寄せ */
  padding:10px;  /* 全体的な余白 */
}
 
/* カエレバの商品画像部分 */
.kaerebalink-image {
  float:none;  /* 画像の左寄せを解除 */
}
 
/* ショップリンクボタン(Amazonと楽天) */
.shoplinkamazon, .shoplinkrakuten {
  width:90%; /* ボタンの幅を横幅の90%に */
  display : block;  /* 横並びだったボタンを縦に並べる */
  padding : 0;  /* 余計な余白を削除 */
  margin-bottom: 10px; /* ボタンとボタンの間の余白 */
}
}

これも最後の「 } 」までスクロールしてコピペ。最後に「 } 」が2つあるので忘れずに。

という訳で一応スマートフォンのCSSも完成。後はお好みで微調整をしながらPCとスマートフォン両方の表示を確認をしておきましょう。

それから念のため再度確認しておきますが、このカスタマイズを適応させるにはカエレバのデザインで「amazlet風-2(CSSカスタマイズ用)」を選択して「更新」ボタンクリックしてリンクを作成する事をお忘れなく。

カエレバカスタマイズ-9

以上でカエレバのカスタマイズは終了です。

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

カエレバのカスタマイズ方法まとめ”に19件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    REN様

    返信ありがとうございます。ホントですね!治ってますね。そんな方法があるとは知りませんでした!勉強になりました。

    えっと、Seesaaブログでのスマホページの位置調整という事なので、「スマホページ用のスタイルシート」に次のコードを入れて試してみて下さい。

    .tomarebalink-link1 {
        margin-left: 20px;
    }
    
    
    .shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkseven a, .shoplinkjalan a, .shoplinkknt a, .shoplinkjtb a, .shoplinkrurubu a, .shoplinkikyu a {
        padding: 10px;
    }

    中身が2つに分かれていて、スマホでのボタンの左に余白を20px入れて真ん中くらい?に調整できるか確認をお願いします。数値は後で調整して下さい。

    後半の部分はボタンの太さをpaddingで変えれるかな?と思いましたので、とりあえず10pxにしてみましたが、こちらも後で調整してみて下さい。

    以上一度試してみて上手く行かない場合には再度コメント下さい。またちょっと調整してみます。

  2. REN

    しげぞう様
    色々とありがとうございます。
    カエレバのホームページに対処法が出ていたので、
    試したらなんとか治ったみたいです。
    そこでもう一つお知恵を!
    パソコン版はなんとかできましたが、スマホでは上手く
    できません。ボタン化まではなんとかできたのですが、
    どうしてもリンクボタンが左寄りになってしまいます。
    あと、ボタンを太くしたりすると、例の変な余白ができたり、
    1個飛ばしになってしまったり、パソコンでなやんでいたときと
    同じ症状が出てしまいます。
    cssをいじっているうちに、正直分け分からなくなってきました…。
    助けてください。

  3. しげぞう 投稿作成者

    REN様

    返信ありがとうございます。ブログもチェックさせて頂きました。原因と対処に関しては幾つかありそうなのでちょっと書いてみます。

    まず、スタイルシートですが、全てのショップリンクの部分、つまり以下の部分にmargin-bottomを一度入れます。こんな感じ。

    .shoplinkamazon, .shoplinkrakuten, .shoplinkyahoo, .shoplinkseven, .shoplinkbellemaison, .shoplinkcecile, .shoplinkjalan, .shoplinkjtb, .shoplinkknt, .shoplinkikyu, .shoplinkrurubu {
        margin-bottom: 5px;
    }

    ボタンの下に余白を5px入れるコードですが、REN様のブログの場合はまずこれが必要になるかと思います。

    上記のコードを追加してもおそらくまだ解決にはならないと思います。というのも、原因となっているのがアフィリエイトのコード自体です。楽天のショップリンクの部分に「もしも」のリンクがあるんですが、他のリンクボタンのコードが「もしも」ではないため、コード自体の仕様というか余白がバラバラになってしまいます。

    対策としては2つあります。

    1.「もしも」自体のアフィリエイトコードをちょっと改変する方法。
    2.もしも経由ではなく楽天の部分だけ楽天経由のリンクにする。

    2番目に関しては実際にやっていないので、これで揃うかどうかは検証してませんが多分揃うのではないかな?と予想してます。

    1番目の方法ですが、もしも部分のアフィリエイトコードが次のようになってます。

    <div class="shoplinkrakuten"><a href="http://c.af.moshimo.com/中略" target="_blank" title="楽天トラベル">楽天トラベル</a>
    
    <img src="http://i.af.moshimo.com中略width="1" height="1" style="border:none;"></div>

    分かりやすくするために改行を入れましたが、下の段の「img src=””」から始まる部分を削除するとボタンは揃うようになります。ただ、このimgタグはアフィリエイトリンクの表示回数(インプレッション)を計測するためのタグですし、リンクの改変は避けるべきと思いますので、おすすめはできません。

    なので、一度「もしも経由」にしている楽天リンクを楽天経由のリンクに変更してみて試してみる事をおすすめします。

  4. REN

    しげぞう様
    お返事ありがとうございます。
    やってみましたが、このようになりました。

    (URLは削除お願いします!)
    一番下の方に反映されています。

    ・上下の間が空かない。
    ・1箇所欠けてしまう。

    このような症状が出てしまいます。
    修正方法はありますでしょうか…?

  5. しげぞう 投稿作成者

    REN様

    コメントありがとうございます。私自身トマレバを使う事がないので、詳しくはないのですが、同じブログで使ってもOKと思います。一応ちょっとコードだけ調べてみました。基本的にはカエレバと同じような構成だと思いますが、「class名」が違いますね。

    コード自体はこんな感じの構成になっているみたいです。

    <div class="cstmreba"><div class="tomarebalink-box">
      <div class="tomarebalink-image">
      %%imageUrl%%
      </div>
      <div class="tomarebalink-info">
        <div class="tomarebalink-name">
        %%afiLink%%
          <div class="tomarebalink-powered-date">posted with <a href="http://tomareba.com" rel="nofollow" target="_blank">トマレバ</a></div>
        </div>
        <div class="tomarebalink-address" style="margin-bottom:5px;">%%address%%%%map%%</div>
        <div class="tomarebalink-link1">
          <div class="shoplinkrakuten">%%rakutenLink%%</div>
          <div class="shoplinkjalan">%%jalanLink%%</div>
          <div class="shoplinkjtb">%%jtbLink%%</div>
          <div class="shoplinkknt">%%kntLink%%</div>
          <div class="shoplinkikyu">%%ikyuLink%%</div>
          <div class="shoplinkrurubu">%%rurubuLink%%</div>
          <div class="shoplinkyahoo">%%yahooLink%%</div>
        </div>
      </div>
      <div class="booklink-footer">
      </div>
    </div></div>

    上記のコードを見ると構成はほとんど同じで「class名」が違う感じなので、カエレバのカスタマイズをそのまま残しておいて、上記のclass名だけトマレバ用に変えたコードもスタイルシートに追加してみると上手くいくかもしれません。

    それと、ショップリンクの部分で「shoplinkrakuten」はカエレバと同じ?みたいなので、新たに他のショップリンクのボタン用(shoplinkjalanなど)のスタイルも追加という感じかと思います。

    ちょっと説明が分かりにくいかもしれませんので、また分からない場合にはコメントもらえたら嬉しいです。どうぞよろしくお願いします。

  6. REN

    しげぞう様
    お久しぶりです。RENです。ってたくさん質問があるので記憶には無いと思います。

    質問があります。カエレバをカスタマイズして、非常に効率よくなったのですが、トマレバも同じようにカスタマイズしたいです。CSSコードをそのままtomarebaに変えてやってみたら一応なったのですが、段ずれが起きたり、1個飛ばしでリンクボタンが付いたり、ヤフーや楽天はカエレバのカスタマイズショップリンクと同じ名前なので、色々と影響をお互い受けてしまいます。また、実際カスタマイズ後、自分のサイトを開いてみると、リンクボタンが、上下くっついてしまいます。何か良い方法はありませんか?
    それとも、カエレバとトマレバのカスタマイズは同じブログ等では使わない方が良いのでしょうか?日記的なブログなのですが、どうしても普段の買ったものの紹介や、旅行先の紹介どちらもしたいのですが…。

  7. しげぞう様

    返信ありがとうございます。
    もしも経由でカエレバを綺麗に表示することは難しいのですね。。。

    お手数をお掛け致しましたm(__)m

  8. しげぞう 投稿作成者

    翔様

    返信ありがとうございます。スマホでのカエレバの件ですが、これ、私も初めて気がついたのですが、Seesaaブログだと同じ症状になりますね。余計なボタンが出現します。原因を調べてみたのですが、どうやらPCとスマホで何故かコードが変化してます。何故かスマホに切り替えると余計なリンクタグが1つ追加されているため、その不要なリンク部分までボタン化してしまう現象です。

    WordPressなどでは問題なく行けたので、おそらくSeesaaブログのシステム的な部分が原因かと思われます。なのでスタイルシートの問題ではなく、原因はそれ以外にあるかとおもいます。実際にカスタマイズしていない状態でも同じように余計なリンクタグが増えてます。

    以前はこのような事は無かったと思うのですが、最近何か仕様の変更?みたいなのがあったのかもしれません。

    対策としてはもしも経由のリンクではなく、本家Amazonや本家楽天のリンクを使うと大丈夫でした。お手数かけて申し訳ないのですが、Seesaaブログの場合は本家のAmazonや楽天でカエレバを使うのが良いかもしれません。

  9. しげぞう様

    急ぎといいながら返信が遅くなってしまい
    大変申し訳ございません!

    一応コチラが当記事を参考にCSSをカスタマイズして
    カエレバリンクを作った記事です。

    稚拙な内容で申し訳ないのですが、スマートフォン版のみ
    表示がおかしくなります。

    PCのCSSはボタンの色を変えたりしたのですが、スマホの方は
    そのままコピーしただけなので、なにもいじっておりません。

    するとこんな感じになってしまいました泣

    お手空きの時で構いませんので、対処法が
    あれば是非教えてください!

    下手くそな記事でお見せするのも恥ずかしいですが
    何卒宜しくお願いいたします

  10. しげぞう 投稿作成者

    翔様

    返信ありがとうございます!原因はスタイルシートの記述もしくは私のコードにおかしい部分があるかも知れません。できるだけ早く解決したいという事なのでもし良かったらブログのurl教えて下さい。

    コメント公開時にはurlは削除しますのでどうぞ宜しくお願いします!

    明日は午前中はバタバタなので返信は午後になると思います。できるだけ早く解決するようにしていきますね!

  11. しげぞう様

    いつもお世話になっております。
    シーサーのdescriptionの件では丁寧に回答して
    頂きましてありがとうございました。

    今回もまた質問させていただきたいのですが、
    この記事を参考にシーサーでカエレバのCSSを
    カスタマイズしてみたところ

    PCでは綺麗に表示させることができたのですが、
    スマホではなぜかおかしな表示となってしまいます・・・

    載ってある情報をそのままコピペしているので
    いじったりはしていないのですが、解決策は
    ありますでしょうか。

    ちなみに変な表示というのは

    アマゾンと楽天のリンクボタンが上下に二つずつ
    ぴったりとくっついた状態で表示されているんです。

    ▭ ▭ 
    ▭ ▭

    ↑上手く表現できないのですがこんな感じです。

    ちなみに上下の空白がなく、ぴったりくっついた
    感じになっていて、アマゾンと楽天の文字は
    上の部分の四角にだけ表示されています。
    (下の四角は文字が書かれていない)

    いわば、アマゾンと楽天のリンクが下にもう一つ
    できてしまっている状態なんです。

    ちなみに両方ともクリックはできるみたいです。

    かなり不細工に見えてしまうので、一刻も早く
    なんとかしたいのですが、解決策があれば
    教えていただけないでしょうか。

    宜しくお願い致します。

  12. りた

    しげぞう様
    お忙しい中、ご返信誠にありがとうございますm(_ _)m

    しげぞう様のご回答を頂いたことで、AMPの実装における先送りを決意することができました!笑

    また何かご質問するかと思いますが、今後共宜しくお願い致します!

  13. しげぞう 投稿作成者

    りた様

    コメントありがとうございます。ショートコードの実装ができたようで良かったです。AMPに関してですが、現在私もまだ対応していませんし、今の所対応するメリットをそれほど感じてはいません。AMPに対応するとJavascriptが使えないという事ですので、Javascriptを使うアドセンスなどは特別の設定をしないと表示されない可能性もありますね。

    現在色々調べてみるとこれらの解決策なども出てきていますが、本当に全てのデバイスで問題がないのか?デメリットがないのか?などもう少し様子を見ながら決めてもいいと思います。AMPの対応でメリットが多いと判断できれば実際にやってみて記事にしようと思いますが、まだまだ先になると思います(笑)また対応したら記事にしていきますので、どうぞよろしくお願い致します。

  14. りた

    しげぞう様
    りたと申します。

    ご返信遅くなりましたが、本日「ショートコードのプラグイン」を導入した結果、所望のカスタマイズを達成することができました!本当にいつもありがとうございますm(_ _)m

    大変恐縮ですが、また1つご質問させて下さい。現在AMPに対応しようと試みているのですが、しげぞう様はもう導入なさいましたか?もし、導入していらっしゃれば、記事にする予定でしょうか?

    また、1つご教示して頂きたいことがあります。
    お恥ずかしい話、グーグルの広告に影響でるという記事がある上に情報が乏しいことから、私には敷居が高いと感じており悩んでおります。私のようなエラーに対応できない初心者はAMPを導入しない方が良いか、ご教示して頂きたくご質問差し上げました。

    お手隙の際に、ご回答して頂けたら幸いです。
    何卒、宜しくお願い致しますm(_ _)m

  15. りた

    しげぞう様
    りたと申します。

    ショートコード承知しました!自分が困っていることを「どのように検索していいか」わからず、いつもしげぞう様に頼る形になっています。ほんと、申し訳ありません。そして、ありがとうございます。。。!

    現在外出中のため自宅につき次第、とりかかります!

    また何かお聞きすると思いますが、今後とも宜しくお願い致しますm(_ _)m

  16. しげぞう 投稿作成者

    りた様

    返信ありがとうございます。なるほど、全ての記事ではなく一部の記事だけという事であれば「ショートコード」を使うのが良いと思います。「funcitons.php」を使ってショートコードを作成し、それを呼び出すような使い方になります。広告の張替えは「functions.php」で全て一括で変更できます。

    このブログでは解説はしてませんが、「WordPress ショートコード」などで検索すればかなり情報があると思います。

    ただ、「functions.php」は記述ミスでエラーがでますので、エラーが出た場合にはFTPから直接「functions.php」を元に戻す必要があります。ちょっと難しいと感じるのであればショートコードを簡単に使えるプラグインもありますので探してみても良いと思います。

    私の場合はプラグイン無しでショートコード使ってますので、どのプラグインが良いのかは分かりませんが、更新されているプラグインでおすすめのプラグインを探してみて下さい。

  17. りた

    しげぞう様
    ご返信が遅くなり、大変申し訳ございません。

    現在、一部の記事のみ、それぞれ関連する本をカエレバで紹介するつもりです。個また、それぞれの記事にマッチする図書を自動的にhtmlに組み込むことは難しいと考えておりますので、手動でカエレバによる紹介図書を手動で記事に導入するつもりです。

    なので、◯◯◯=「カエレバ」のコードと定義するだけでOKと判断しているのですが、いかがでしょうか?

    我儘でご無礼なお願いばかりで、大変申し訳ございません泣

    引き続き、宜しくお願い致しますm(_ _)m

  18. しげぞう 投稿作成者

    りた様

    コメントありがとうございます。多分カエレバで紹介する本を全ての記事の記事下に表示したいという事だと思うのですが、アドセンスと同じようにHTML自体に組み込むのが良いと思います。

    ただ、ちょっとPHPファイルの確認まではできないので、幾つか教えて下さい。

    1.アドセンスは「singel.php」に入れてますか?それとも「content.php」ですか?
    2.SNSボタンを呼び出すコードはどのPHPファイルに入れてますか?

    上記2点が分かれば対処できると思いますので、一度教えて頂けると助かります。

  19. りた

    しげぞう様
    ご無沙汰しております。

    りたと申します。

    本日は「カエレバ」について、ご質問したくご連絡差し上げました。

    現在各記事の最後に、関連図書を1冊記載しようと考えています。普通に全ての記事にリンクを貼れば良いのですが、直接コードを貼り付けると、本の年度が更新する度に全てのリンクを貼りかえなくてはいけなくなります。

    個人的には、◯◯◯=「カエレバ」のコードと定義し、◯◯◯を貼ることで、年度が更新した時には、カエレバの部分だけ1度変えるようにしたいと考えております。

    非常に初歩的な質問なのですが、この、◯◯◯=「カエレバ」のコードに定義する方法を教えて頂けないでしょうか?

    いつもながらど素人の質問で申し訳ありません。お手隙の際に、ご教示して頂ければ幸いです。

    何卒宜しくお願い致します。