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

【中級者向け】ブログ記事直下(ソーシャルボタン上)に自動でブログ村ランキングボタン・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>

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

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

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

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

 

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

ブログ運営 ブログ運営-コスパのいいブログ運営研究 ミニマリズム

2022/9/15

細いスマホAndroid端末『Mode1GRIP』をブログ下書き専用機のモバイルワープロとして使ってみた!

ウォーキングしながらブログや小説を書く「公園がオフィス」というモバイルボヘミアンなA1理論です! これまで長らくiPhoneSE第一世代でウォーキング中にブログを書いてきましたが、この度、機種変更してiPhoneSE第三世代にしたら、中身(OSなど)は良くなったのですが、機種自体が大きすぎて文字が落ちづらい!というわけでいろいろ調べてみた結果、▼極細なAndroid端末の『Mode1GRIP』というモノを見つけたので買って試してみました! SIMフリー Mode1 Grip MD-05P スタイリッシュ ...

ReadMore

ミニマリズム ミニマリズム-ミニマリズム論

2022/9/12

「日本社会」は嫌いだけど「日本人」が好きな『風の民』は旅が終わったら人生に折り合いをつけて暮らす。

ミニマリストを研究するのが好きなミニマリストのA1理論です。 今回は僕が5年ほど前からよく書いている『風の民』の生き方について、最近もう少し細かく考えたので書いていきたいと思います。この記事が生き方に迷ってる方や、働き方に迷っている方、ミニマリスト研究している方の一助になれば幸いです。『風の時代』ってことで! あとこの記事は最近有名なミニマリストの「かぜのたみ」さんとは無関係ですwあと『風の民』ではなく『風の人』と呼ぶ人もいます。 目次1 『地の民』『水の民』『風の民』とは?2 僕の人生は『地の民』→『水 ...

ReadMore

ミニマリズム ミニマリズム-生活

2022/9/11

Slackを仲間や家族とのプライベート利用で『情報共有ツール』として使うコツをまとめました!

今年6月からブログ仲間内でスマホアプリ『Slack』で情報交換を始めたA1理論です! Slackをプライベートで3ヶ月ほど使ってみて、Slackはビジネス利用以外にも仲間や家族との『情報共有ツール』として、無料プランでもかなり使えると思ったのでこの記事で情報やコツをシェアします! 仲間や家族とのコミュニケーションが上手くいっていない方、電話やメールなどのコミュニケーションコストや時間を削減したい方、Slackのプライベート利用の方法を知りたい方などの参考になれば幸いです! 目次1 Slackとは?2 グル ...

ReadMore

ミニマリズム ミニマリズム-生活

2022/9/11

虫歯&酸蝕症の治療から3ヶ月経ったので歯科定期検診!太めの歯間ブラシを購入して使い始めることに!

昨年から「健康リテラシー80点以上」を目指しているA1理論です! 今回は歯科定期検診に関して書きます!今回は前回の歯の治療から3ヶ月が経過したので初の歯科定期検診に行ってチェックしてもらい、その結果、歯みがきの仕方について歯間ブラシの使い方をアップデートしたのでその経緯をお伝えします! 歯医者さんに長らく行っていない方、歯科定期検診について考えている方、歯間ブラシについて考えている方などのご参考になれば幸いです! 目次1 これまでの歯科治療の経緯!2 治療から3ヶ月経ったので予約していた歯科定期検診へ!3 ...

ReadMore

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

2022/9/27

楽天モバイルをauに、BIC SIM(IIJmio)を楽天モバイルにMNPしてiPhoneSE第三世代をデュアルSIM運用開始!

楽天モバイルを愛するA1理論です! この度、iPhoneSE第一世代からiPhoneSE第三世代に機種を変更し、デュアルSIM運用で主回線を楽天モバイル、副回線をauに切り替えたのでその経緯を自分用の備忘録や振り返りも含めて記事にします!今まで楽天モバイルSIMで使っていたAndroid(OPPO A73)は無事に家で使うスマホ型タブレットとしてYouTube視聴やKindleタブレットとして引き続き家の中メインで使用します! 楽天モバイル回線に興味ある方、iPhoneSE第三世代に興味ある方、デュアルS ...

ReadMore

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

© 2022 A1理論はミニマリスト Powered by AFFINGER5