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

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

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

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

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

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

 

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

ミニマリズム ミニマリズム-生活 人生 人生-考え方

2021/12/2

1人ウォーキングは曹洞宗的な禅歩き!2人ウォーキングは臨済宗的な禅歩き!

昔から歩くのが大好きなA1理論です!子供の頃から家の近所をてくてく歩き、今もほぼ毎日ウォーキングしてます!旅先でも極力、徒歩移動!そんな僕が愛してやまない「ウォーキング」に関して、今回の記事では徹底的に語ってみようと思いました!ウォーキング好きな方、逆にウォーキング苦手な方、手軽な運動を始めたい方などの参考になれば幸いです! 目次1 昔からずっとウォーキングが好き!2 いつも、いろんな場所を歩いていた。3 ウォーキングは個人が手軽にできる運動の最適解では?4 ウォーキングこそが『動的な禅』で、ウォーキング ...

ReadMore

ミニマリズム ミニマリズム-レシピ・食事 ミニマリズム-生活

2021/12/1

『運動じゃやせない!』ということを伝えたいだけのブログ記事!

今年、21kgやせたA1理論です!今回の記事で伝えたいことは非常にシンプルです! 『運動じゃやせない!』 ただそれだけです! 知ってる人は知ってるけど、知らない人は全然知らないこの真実。意外と知らない人が多いと常々思っているので、他の記事にもちょくちょく書いてきましたが、独立した1つのこの記事にまとめようと思いました!いくら運動してもやせれない方、何年も内臓脂肪がなかなか落ちない方、運動でやせてもすぐにリバウンドしてしまう方などの参考になれば幸いです! 目次1 やせない人に足りないのは『運動』ではなく『情 ...

ReadMore

ミニマリズム ミニマリズム-レシピ・食事 人生 人生-考え方

2021/11/30

脂質はこの逆トーナメント図で理解!オメガ3脂肪酸摂取はサバ缶イワシ缶でミニマムな価格と手間でDHAとEPAをマキシマムに!

今年、21kg減のダイエットに成功したA1理論です! 今回の記事のテーマは「三大栄養素」としてタンパク質・炭水化物と並ぶ『脂質』です!タンパク質や炭水化物と比べると脂質の「脂肪酸」は種類が多く、いろんな健康本やサイトを読んでもすべては網羅してなかったり、優先順位がよくわからなかったので、今回は僕が個人的に上記のような「逆トーナメント図」を作成しました! 今回の記事では上記の「逆トーナメント図」を説明し、かつ良質な脂肪酸であるDHAやEPAを効率的に摂取する方法を具体的に書いていきたいと思います! ※今回の ...

ReadMore

ミニマリズム ミニマリズム-レシピ・食事 ミニマリズム-生活

2021/11/21

1日1.5食の和食生活で結果的に『グルテンミニマム生活』へ移行するといろんな身体の不調が改善するよ!!

最近、すごく体調がいいA1理論です!具体的には、夜はよく眠れ、鼻炎も少し改善し、集中力も増し、イライラもミニマムになり、ポジティブマインドになってきました。僕は今年の6月頃から健康マインドになり、1日1.5食生活で、糖質を制限し、朝は毎日ラジオ体操、最近は家でコーヒーを飲むのをやめて水にしました。もちろんそれらのことが総合的に体調を良くしているとは思いますが、1日1.5食&糖質制限&和食メインにしたことで、結果的にパン・ラーメン・うどん・パスタ・ピザ・お好み焼き・お菓子などの小麦粉メインの食事を6ヶ月ほど ...

ReadMore

ミニマリズム ミニマリズム-レシピ・食事 ミニマリズム-生活

2021/11/19

野菜を変えると人生が変わりました!『生産者野菜』を売っている場所を探そう!

最近、『野菜が主食!』と言っているA1理論です!今回はタイトル通り、野菜を変えてみたら人生が変わったので、その理由と方法、調理法の最適解などをお伝えしたいと思います!食事に悩んでいる方、いい野菜を見つけたい方、野菜の調理法に悩んでいる方などの参考になれば幸いです! 目次1 野菜を変えれば人生が変わる理由!2 まずは『生産者野菜』を売っている場所を見つける!3 僕の最近の『生産者野菜』仕入れ先!調味料も手に入る時も!4 ネットで美味しい野菜を買うことも可能!5 オーガニック野菜にはこだわらず、調味料をオーガ ...

ReadMore

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

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