ブログカスタマイズ

楽天アフィリエイトのリンクの「外側の薄い枠線」を消す・センター寄せにする方法

投稿日:2018年6月16日 更新日: 投稿者:

わたしは楽天アフィリエイトの広告を使わせてもらっていますが、ブログにリンクを貼る時に、「余計な枠線があるなぁ…」と気になりました。

楽天アフィリエイトの画像やテキストを囲む黒い枠線。これはいいんですが、さらにその周りに灰色の枠線が…。

こんな感じですね。

なぜ画面いっぱいに枠線が??これ、いらないですよね(・_・;)
見た目が全然よくないです。

ブログを見てもらった時に、楽天アフィリエイトでもなんでも、変な配置をしてると「このブログだめだなぁ…」「変な見にくいブログ」と思ってもらっては悲しいので、枠線を消す方法を考えました。

これはやっちゃダメ!楽天アフィリエイトの注意事項

まず、ダメな方法を念のために書いておきます。

「楽天アフィリエイトの外側の枠線を消す方法」というふうに検索すると、こんな方法が出てくることがあります。

「楽天アフィリエイトの広告のHTMLソースを少し変えて、灰色の枠線の部分だけ消そう。」

というものです。

たしかに、楽天アフィリエイトのソースを見てみると灰色の枠線部分を形作っている部分があり、そこだけ消せば問題なく枠線部分だけ消える…ように見えます。

だけど、このやり方だと問題大ありなんです!

楽天アフィリエイトの規約を読めば分かると思いますが、いの一番に、「HTMLソースは変えてはいけない」と書かれています…。

参考:楽天アフィリエイトのよくある質問集(https://affiliate.rakuten.co.jp/guides/help

ですので、HTMLソースの中身を変えるのはやめましょう。

一応楽天アフィリエイトのHTMLソースの構造を見てみると、

<table border="0" cellpadding="0" cellspacing="0"><tr><td><div style="border:1px solid #000000;background-color:#FFFFFF;width:250px;margin:0px;padding-top:6px;text-align:center;overflow:auto;">
・・・・・長いので途中省略・・・・・
<p style="font-size:12px;line-height:1.4em;margin:5px;word-wrap:break-word"></p></td></tr></table>

こんなふうになっていますよね。

一番上の

<table border="0" cellpadding="0" cellspacing="0"><tr><td>

一番下の

</td></tr></table>

このtableタグがあるので、灰色の薄いグレーの枠線が表示されることになります。

自分のサイトがtableタグのborderを表示しないように設定していれば、表示されません。

borderが表示されなくてもいいならサイトの大元のCSSを書き変えた方が楽ですが、borderを表示することの方が多いなら別の方法で枠線を消しましょう。

今回はこのtableタグを消したり変えたりすることなく、楽天アフィリエイトの外側の薄い枠線だけを取り除く方法を紹介します。

楽天アフィリエイトの外側の枠線を消す方法

楽天アフィリエイトのHTMLソースの中身を変えることは規約違反ですが、外側から変えるならOKだと書いてありました。

CSSを使って、外側の薄い枠だけ取るように指示してみます。

HTML

<div class="example">ここに文章</div>

CSS

.example table, .example th, .example td {border: none ;}

順番的にはCSSを書いてからHTMLを書きますが、そのやり方をWordPressの例で紹介します。もちろん知っているよ!という人は読み飛ばしてくださいね。

CSSの書き方

WordPressの管理画面から、外観→テーマの編集→スタイルシート (style.css)に進みます。

楽天アフィリエイト 枠線

スタイルシートの一番下に、先ほどのコードを書いておきました。
これで「ファイルを更新」して下さい。

HTMLの書き方

今度はHTMLの書き方です。WordPressで記事投稿画面に行きましょう。

楽天アフィリエイト 枠線

楽天アフィリエイトを貼りたい所に貼って、このようにHTMLタグで挟みこめばOKです。

いちいちHTMLタグの手打ちをするのは面倒だと思うので、このブログでは「AddQuicktag」というプラグインを使っています。

ボタンを押すだけでHTMLタグが挿入されるので便利ですよ!

こうしてHTMLとCSSを設定することで、楽天アフィリエイトの薄いグレーの枠線はこんなふうに消え去ってくれます↓

もちろん、通常通り楽天商品ページへ問題なく飛べます。

楽天アフィリエイトの枠線を消す時の注意点が、場合によっては少しあるので、次でお話していきます。

楽天アフィリエイトの枠線を消す時の注意点

先ほどのやり方で、楽天アフィリエイトの外側のグレーの線だけを消す分には大丈夫だと思います。
が、グレーの線もその内側の黒い線も両方消してしまうのは、あまり良くないかもしれません。

※楽天アフィリエイトのそもそもの機能に、「枠線を消す」というのがあります。
(それで消えるのは黒い枠線だけで、外側の薄いグレーの枠線の方は消えない)

黒い線も消してしまうと、ブログ中の画像やテキストなのか、広告なのかの区別がよく分からなくなってしまう場合があると思います。

広告は広告!で分かりやすくしておかないと、誤クリックを誘発しているとみなされる場合があります…。

画像だけを貼る場合の楽天アフィリエイトの注意点

画像とテキストを含む楽天アフィリエイトを使う場合は、枠線がデフォルトで付くと思います。

だけど、画像のみの場合は枠線は何も付かないと思います、わたしがやった時は付かなかったです。

ですので、画像のみで楽天アフィリエイトを使う場合も「広告」と分かるように注意しなきゃいけないですね。

見た目はちょっと格好悪いかもしれませんが、「これは楽天商品ページへのリンクです」のように明記することをオススメします。

楽天アフィリエイトの広告をセンター寄せにする方法

楽天アフィリエイトの外側のグレーの枠線を消して見栄えを良くするついでに、センター寄せに表示させたい時のやり方を紹介してみます。

楽天アフィリエイトのソースを、丸ごとこのタグで囲います。

<div align="center">
</div>

広告のソースの上下にこれを書けばいいだけですね。これで楽天アフィリエイトをセンターに表示できます。

「楽天アフィリエイトのリンクの「外側の薄い枠線」を消す・センター寄せにする方法」まとめ

今回は楽天アフィリエイトの、外側の薄いグレーの枠線を表示しない方法をご紹介しました。

やっぱり自分のブログは、綺麗に見た目もよくしたいですからね!
今後も気になった点があればご紹介していこうと思います。

頑張ってブログカスタマイズしていきましょう!

-ブログカスタマイズ


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

お問い合わせフォーム WordPress

お問い合わせフォームをWordPressのブログに設置!プラグインContact Form 7が便利

自分のブログに、「お問い合わせフォーム」って…つけた方がいいですよね? 自分のブログから連絡を取りたい!と思ってくれた方にとっても、連絡を受け取る側にとっても、分かりやすくスムーズに管理できるのがお問 …

ブログ 開設

ブログの開設と作成方法を初心者向けに解説!WordPressでの始め方

初心者の頃ブログを作るっていうと、「無料ブログでいいじゃん!」「WordPressなんて難しいの使わなくても、FC2とか…もっと初心者向けなブログあるでしょ?」と思う人が多いかもしれません。 確かに無 …

h2などの見出し前後の行間隔・余白をmarginとpaddingで調整【WordPress】

h2やh3などの見出しの前後の間隔(余白のスペース)がなんとなく詰まってるなぁor開きすぎてるなぁ…という時に使える、スペース間隔を自由に調整する方法をご紹介します。 このブログではWordPress …

頭を抱えて困った様子の女性

コピペだけでOK!STINGER 8でサイドバーが追尾せず変な位置で固定される問題の解決策

現在DigiLocusではWordPressの無料テーマSTINGER 8を使用しています。 STINGERシリーズは国内でトップクラスの人気を誇るテーマで、筆者はSTINGER 3の頃から愛用してい …

文字数を数える方法についての解説記事のアイキャッチ画像

Sublime Text 3でHTMLタグを除外して文字数を数える方法

皆さんはブログの記事を書く際、どのテキストエディタを使っていますか? WordPressを使っているブロガーなら、WordPressのエディタを使っている方が多いのでしょうか。 HTMLやCSSを本格 …