日々のこと

読者です 読者をやめる 読者になる 読者になる

日々のこと

HTMLやCSSのことも書いています。

ダブルレクタングルにする方法のメモ

スポンサーリンク

はてなブログで広告のコードをダブルレクタングルにする方法のメモです。
調べてみるといろいろな書き方がありました!
今回ははてなブログで記事下の広告をダブルレクタングルにする方法の1つについて書いていきます。

ダブルレクタングルにする書き方

下記のように書くことで広告を横並びにすることができます。
広告の上の文字は中央揃いにしています。

貼る場所
デザイン→カスタマイズの記事下に貼ります。

<p style="text-align: center;">スポンサーリンク</p>
<table>
<tr>
<td>広告コード1</td>
<td>広告コード2</td>
</tr>
</table>

記事本文のすぐ下に表示する場合

現在はこの方法を使わせてもらっています。
このように書くことではてなスターとかの上(記事本文すぐ下)に広告を表示することができました。

貼る場所
同じく、デザイン→カスタマイズの記事下に貼っています。

<div id="my-footer">
<p style="text-align: center; font-size: 70%;">スポンサーリンク</p>
<table>
<tr>
<td>広告コード1</td>
<td>広告コード2</td>
</tr>
</table>
</div>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter)
;document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>

注意した方がいいかもしれないこと

・レスポンシブルデザインに設定している場合のスマホの表示
・広告によってはページで表示される枚数
記事本文のすぐ下に表示する方法を使うときに、すでに記事内のすぐ下に貼ってあった広告を消してから使いました。
(下記のような表示になってすぐ近くに3つ表示されるため)
広告
広告広告

記事内に貼ってみた感想

上で書いたダブルレクタングルにする方法をデザイン→カスタマイズの記事下ではなく、記事内に貼ってプレビューで表示してみました。

こっちの方の書き方

<p style="text-align: center;">スポンサーリンク</p>
<table>
<tr>
<td>広告コード1</td>
<td>広告コード2</td>
</tr>
</table>

プレビューで表示した感じだと、PCでは正常に2つ表示されましたが、スマホでは表示がくずれるようでした。
(広告にもよるかもしれないですが)

使ってみた感想

・記事ごとに貼らなくてもよくなったので便利でした!
・表示される枚数に注意が必要
(修正するのがけっこう大変でした(^o^;))