ブログ運営 ブログ運営-コスパのいいブログ運営研究

【中級者向け】ブログ記事直下(ソーシャルボタン上)に自動でブログ村ランキングボタン・twitterフォローボタン等を配置する方法

僕は少し前まで、ブログ記事を書いたあとに手動でブログ村やブログランキングのHTMLを記事直下にコピペしていました。
けどそれだと微妙にめんどくさい。

 

なので最近は記事直下になにも置かず、記事下にランキングボタンを配置しました。
でもそれだとソーシャルボタン群の向こう側になるので記事から微妙に距離があるし、記事直下は少し寂しい状態でした。

※ちなみに少し前まで関連過去記事も手動で記事直下に配置していましたが、これはMilliardの導入により解消しました。ブログカードそのままで入れるとガタガタになるしね!

『はてなブログ』PC画面のサイドバー情報を断捨離し、Milliardを導入してみた! - A1理論はミニマリストなIT系営業マン

 

で、最近、NHKミニマリスト特集の放映などでブログ村のミニマリストランキングが群雄割拠になってきて、僕のこのブログも50位以下に落ちてしまいました。

50位以下に落ちてしまうと1ページ目から外れます。ブログ村ランキングの2ページ目はなかなかクリックしてもらえません。
どうにか50位以内はキープしておきたいな、と思っていました。

(「自分押し」&割合100%&記事下クリックだけでは50位以内は厳しくなってきました。)

 

スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん

 

 

そんな折、昨日、ヒトデ氏のこの記事を読んで、

【コピペでOK】はてなブログでアドセンスの配置に役立つコードの書いてある記事をまとめたよ!(スポンサーリンク表記、横並び、ソーシャルボタン下、記事中) - 今日はヒトデ祭りだぞ!

この記事を参照にして記事直下、ソーシャルボタン上にアドセンス広告を配置してみました!

【はてなブログ】記事本文の直下にアドセンスを設置する方法 - チップの日常

アドセンスが二連続は美しくなかったし、画面をアドセンスが埋め尽くしてしまうのも問題だった、さらに下のアドセンスはクリック率が低かったのでそれらはこれ一発で解消されました。

 

そして今日、ふと、
「それならブログ村ランキングボタンやtwitterフォローボタンもその上に配置できるんじゃないのかな?」
と思い、配置してみたら簡単にできましたw

 

アドセンス広告の上に配置するだけでした!w
こんな感じです。

 

<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>

 

これで、モバイル・PC画面共に、読者の方が記事を読み終わった後に、

・twitterフォローボタン・ランキングパーツ

・アドセンス広告

ソーシャルパーツ群・読者登録ボタン・ランキングパーツ(再)

・アドセンス広告

関連記事・注目記事・関連記事(再)

という美しい流れができて満足していますw

この応用技でfeedlyボタンやはてなブログの「読者になる」ボタン、プルダウンメニュー等をソーシャルボタン上に設置してもいいかもです!

 

【いくつかアドバイス】

作業はモバイル画面から先に手を付けたほうがいいです。

モバイル画面完成後、うまく行ったコードをPC画面にコピペして調整。

 

あと、ボタン上等に付ける、

▼毎日元気につぶやき中!

等の例文はあまり長いとスマホによっては二行になるのでこれくらいの長さがいいと思います。

twitterのフォローボタンのコードは▼ここで手に入ります。

Twitterボタン | About
ブログ村やブログランキングボタンのサイズと合わせて大きいボタンにしたほうが見栄えがいいと思います。

<br>

のタグはめんどくさいのですが、これがないとパーツや文章が並べて表示されてしまうので挟みましょう。

逆にブログ村ボタンとブログランキングは離さず、左右に並べて表示ほうがいいと思います。
▼こちらをご参照。

バナーを並べて表示したいのですが・・・ - にほんブログ村 メンバー要望掲示板

要はブログ村画面上の「バナーのテキスト表示をオフにする」にチェックです!

 

皆様のブログコスパが上がることを願っています♪

おすすめ記事 ブログ運営 ブログ運営-コスパのいいブログ運営研究 ミニマリズム ミニマリズム-生活

今まで楽天サービスを使ったことなかった僕が楽天モバイルを契約する10の理由!

(注意!2022年10月6日現在、この記事でご紹介している1年無料キャンペーンや月1Gまで0円運用の料金プランは無くなっています!) 『固定費ミニマリスト』のA1理論です!!2021年4月現在の日本では『固定費』の大きな部分を占める「通信費」がまさに戦国時代の様相を呈しています! そんな中、今までの人生で楽天のサービスを一切使ってこなかった僕が、この度スマホの2回線めのサブ回線として楽天モバイルを4/7までに契約しようとした理由をこの記事でお伝えいたします!!まぁ4/7までの▼キャンペーンで『Rakute ...

続きを読む

おすすめ記事 ミニマリズム ミニマリズム-生活

【初心者向けに画面で解説】楽天証券のつみたてNISA口座と楽天銀行の開設方法&注意点!

2021年6月7日夕方ごろ楽天証券と楽天銀行に自宅のパソコンからWEB申し込みしたA1理論です!目的はつみたてNISAで投資信託をして『楽天経済圏』で生きていって早めに人生を『ミニマムFIRE』するためです! 生まれて初めての証券口座の申し込みでしたが、事前にかなり情報収集していたおかげで問題なく終わらせることができました。この記事ではこれから楽天証券や楽天銀行に申し込もうとしている方へ2021年6月時点での最新の申し込み方法をパソコン画面のキャプチャ画像を見ながらお伝えしたいと思います! この記事のミニ ...

続きを読む

おすすめ記事 ミニマリズム ミニマリズム-生活

楽天ひかりの工事が完了!IPv6(クロスパス)対応ルーター「エレコムWMC-X1800GST-B」を実際に楽天ひかりに接続してみたスピード結果!

一人暮らしで楽天モバイルのテザリング生活から楽天ひかりに切り替えたA1理論です!ちなみに昔のアパートで使っていたのは古い順から、ADSL→テプコ光→フレッツ光→ひかりONE→ケーブルTV(新宿ケーブル)で、このアパートに来てからはauひかり→WiMAX→WiMAX2+→楽天ひかりテザリング→楽天ひかり(マンションタイプ・光配線方式)です! 今回の記事では実際の楽天ひかりの工事についてと、IPv6(クロスパス)対応ルーターである「エレコムWMC-X1800GST-B」の設置の回線速度のビフォー・アフター、そ ...

続きを読む

おすすめ記事 ミニマリズム ミニマリズム-生活

楽天ポイントが自動でどんどん貯まっていく!『楽天経済圏2年生』の僕が実感した誰もが楽天カードを作るべき12の理由!

2021年5月に▼『楽天経済圏』で生きていくことを決意し、その後すぐに楽天カードを2枚発行してこの夏で無事『楽天経済圏2年生』になったA1理論です! 今回のこの記事では1年以上『楽天経済圏』にどっぷりとハマった僕が、楽天Payや楽天キャッシュなども含めた『楽天経済圏』という視点から誰もが楽天カードを発行するメリットを書いてみました!これから楽天カードを作ろうか迷っている方、『楽天経済圏』に入ろうか悩んでいる方、各種ポイントがいろんな経済圏にバラバラに分散している方などの参考になれば幸いです! この記事のミ ...

続きを読む

おすすめ記事 ミニマリズム ミニマリズム-ミニマリスト本 人生 人生-考え方

Kindle本を出版!「お金が貯まる!増やせる!1年かけてゼロから『楽天経済圏』に入ってみた!」

お金が貯まる!増やせる!1年かけてゼロから『楽天経済圏』に入ってみた! created by Rinker ¥250 (2024/11/30 15:15:12時点 Amazon調べ-詳細) Kindle Amazon 楽天市場 Yahooショッピング ついに念願のKindle本を出版しました! その名も、 「お金が貯まる!増やせる!1年かけてゼロから『楽天経済圏』に入ってみた!」! 僕はほんの2年前まで、毎日のスーパーなどでの買い物もいつもニコニコ現金払いで、クレジットカードさえ使って ...

続きを読む

-ブログ運営, ブログ運営-コスパのいいブログ運営研究