僕は少し前まで、ブログ記事を書いたあとに手動でブログ村やブログランキングのHTMLを記事直下にコピペしていました。
けどそれだと微妙にめんどくさい。
なので最近は記事直下になにも置かず、記事下にランキングボタンを配置しました。
でもそれだとソーシャルボタン群の向こう側になるので記事から微妙に距離があるし、記事直下は少し寂しい状態でした。
※ちなみに少し前まで関連過去記事も手動で記事直下に配置していましたが、これはMilliardの導入により解消しました。ブログカードそのままで入れるとガタガタになるしね！
『はてなブログ』ＰＣ画面のサイドバー情報を断捨離し、Milliardを導入してみた！ - Ａ１理論はミニマリストなＩＴ系営業マン
で、最近、ＮＨＫミニマリスト特集の放映などでブログ村のミニマリストランキングが群雄割拠になってきて、僕のこのブログも５０位以下に落ちてしまいました。
５０位以下に落ちてしまうと１ページ目から外れます。ブログ村ランキングの２ページ目はなかなかクリックしてもらえません。
どうにか５０位以内はキープしておきたいな、と思っていました。
（「自分押し」＆割合100％＆記事下クリックだけでは５０位以内は厳しくなってきました。）
そんな折、昨日、ヒトデ氏のこの記事を読んで、
【コピペでOK】はてなブログでアドセンスの配置に役立つコードの書いてある記事をまとめたよ！（スポンサーリンク表記、横並び、ソーシャルボタン下、記事中） - 今日はヒトデ祭りだぞ！
この記事を参照にして記事直下、ソーシャルボタン上にアドセンス広告を配置してみました！
【はてなブログ】記事本文の直下にアドセンスを設置する方法 - チップの日常
アドセンスが二連続は美しくなかったし、画面をアドセンスが埋め尽くしてしまうのも問題だった、さらに下のアドセンスはクリック率が低かったのでそれらはこれ一発で解消されました。
そして今日、ふと、
「それならブログ村ランキングボタンやtwitterフォローボタンもその上に配置できるんじゃないのかな？」
と思い、配置してみたら簡単にできましたｗ
アドセンス広告の上に配置するだけでした！ｗ
こんな感じです。
<div id="my-footer">
▼（例）毎日元気につぶやき中！
<br>
※ここにtwitterフォローボタンのコード貼り付け
<br>▼（例）クリック頂けると励みになります！
<br>
※ここにブログ村・ブログランキング等のコード貼り付け
<br>
【スポンサーリンク】<br>
※ここにアドセンスのコード貼り付け
</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>
これで、モバイル・ＰＣ画面共に、読者の方が記事を読み終わった後に、
・twitterフォローボタン・ランキングパーツ
↓
・アドセンス広告
↓
ソーシャルパーツ群・読者登録ボタン・ランキングパーツ（再）
↓
・アドセンス広告
↓
関連記事・注目記事・関連記事（再）
という美しい流れができて満足していますｗ
この応用技でfeedlyボタンやはてなブログの「読者になる」ボタン、プルダウンメニュー等をソーシャルボタン上に設置してもいいかもです！
【いくつかアドバイス】
作業はモバイル画面から先に手を付けたほうがいいです。
モバイル画面完成後、うまく行ったコードをＰＣ画面にコピペして調整。
あと、ボタン上等に付ける、
▼毎日元気につぶやき中！
等の例文はあまり長いとスマホによっては二行になるのでこれくらいの長さがいいと思います。
twitterのフォローボタンのコードは▼ここで手に入ります。
Twitterボタン | About
ブログ村やブログランキングボタンのサイズと合わせて大きいボタンにしたほうが見栄えがいいと思います。
<br>
のタグはめんどくさいのですが、これがないとパーツや文章が並べて表示されてしまうので挟みましょう。
逆にブログ村ボタンとブログランキングは離さず、左右に並べて表示ほうがいいと思います。
▼こちらをご参照。
バナーを並べて表示したいのですが・・・ - にほんブログ村 メンバー要望掲示板
要はブログ村画面上の「バナーのテキスト表示をオフにする」にチェックです！
皆様のブログコスパが上がることを願っています♪
