メニュー

コピペOK!はてなブログの関連記事をSNSシェアボタンの下に置く方法

f:id:oshaberiitboy:20180503020705p:plain

 

以前、「関連記事をSNSボタンの下に表示してみた!」という記事を書きました。

 

はてなブログの「関連記事」をそのまま実装すると、SNSシェアボタンや広告が関連記事の下に設置されて邪魔なんですよね。

 

oshaberiitboy.hatenablog.com

 

その後、もっと楽に関連記事を下に表示できる方法が見つかったので紹介します。

 

関連記事を実装したけど、シェアボタンの上に来るのが邪魔すぎる・・・

 

そんな悩みを持った人でも、CSSをコピペするだけで簡単に解決できます。

 

 

 

コードをコピペするだけで関連記事を下に表示

 

www.notitle-weblog.com

 

上のサイトのコードをコピペして、「デザインCSS」に貼り付けるだけでOKです。

 

記事下(カスタマイズができるエリア)と関連記事の位置を逆にするカスタマイズです。

 

とのこと。

 

たったこれだけで、「関連記事」とシェアボタンを含む「記事下」を入れ替えることが可能です。

 

これめっちゃ便利!

 

ただし、

 

テーマによってはうまくいかない場合があります。

 

と書かれているので、事前にブログはバックアップしておきましょう。

 

私は「Brooklyn」をテーマにしてるけど、うまく設定できました

 

SNSシェアボタンもカスタマイズしよう

 

関連記事が無事に下に置けたら、ついでにSNSシェアボタンもデザインを変えておきましょう。

 

もちろんはてなブログに実装されてるボタンでも良いですが、

 

www.yukihy.com

 

こちらの記事のSNSボタンなら「シェア数」も表示されるのでオススメです。

 

コード数は多いけど、これもコピペするだけでOK!

 

ボタンのデザイン1つ取っても記事のシェアされる数は変わるので、やっぱりおしゃれなカスタマイズにしたいですね。

 

おわりに

 

関連記事があるだけで、ブログの滞在時間は数十%も増加するとも言われてます。

 

初期の関連記事の位置は「邪魔以外の何物でもない」けど、すごく簡単に変更できるので試してみてください。

 

その他のブログのカスタマイズ記事も載せておきます。

 

 

本日は、以上です!