ブラックリストのキリンです

延滞、自己破産、債務整理でブラックになった人を応援するブログ

 メニュー

はてなブログで関連記事の上にソーシャルボタンを表示する方法!

f:id:oshaberiitboy:20170912062023j:plain

「関連記事の下にソーシャルボタンがあるけど、これって逆にできないの?」

 

...今回は、はてなブログで関連記事の上にソーシャルボタンを表示する方法を書いていきます。

 

ブログのテンプレートをBrooklynに変えてから、合間を縫ってページ内をカスタマイズしています。

 

ソーシャルボタンも設置できるので、「この記事がどのくらい反応があるのか?」が一発で分かって便利ですね。

 

ちなみにソーシャルボタンの設置は、Yukihy Lifeさんのサイトを参考にしました。

 

 

コードをコピペするだけなんで、カンタンに設置できます。

 

ただ1つ問題が起きまして...。

 

f:id:oshaberiitboy:20170912051948p:plain

 

そう、関連記事の下にボタンが設置されてます。

 

上からスクロールしたら、「記事本文 > アドセンス広告 > 関連記事 >ソーシャルボタン」の順番に表示されるんだそうです。

 

ちょっと下すぎるね...

これじゃ読んでくれる人も気づかないね

 

というわけで今回はBrooklynのテンプレはそのままに、ソーシャルボタンの表示順をカスタマイズしてみました!

 

 

 

 関連記事の代わりに「あわせて読みたい」を設置で解決!

  

今回の問題はこちらの方法で解決できます!

 

  1. 関連記事の項目を消す
  2. 『あわせて読みたい』のコードを「記事下」に挿入する
  3. 『あわせて読みたい』のコードの上にソーシャルボタンのコードを挿入する

 

結構カンタンにソーシャルボタンを上に設置できました。 

 

ソーシャルボタンの取得コードは、上のYukihy Lifeさんのサイトを参照してください。

 

以下、「2」の関連記事の項目を消す手順です。

 

ダッシュボード > デザイン > カスタマイズ(工具マーク) > 関連記事 > 「関連記事を記事下に表示する」の横のチェックを消す 

  

これで関連記事が消えるので、「あわせて読みたい」のコードを挿入します。

 

「あわせて読みたい」のコードを「記事下」に入力でソーシャルボタンが上になる

 

「あわせて読みたい」は関連記事の仲間のシステム。今見ているページに関連する記事を自動的に表示してくれます。

 

Amazonの「この商品をチェックした人は〜」ってシステムと似てるね

そんな感じだね!

 

「あわせて読みたい」の詳しい内容やコードの取得は、こちらの記事を参照してください。かなり分かりやすく説明されています。

 

 

コードを取得したら、コチラの手順で入れましょう。念の為ブログのバックアップをしといた方が良いかも知れません。

 

ダッシュボード > デザイン > カスタマイズ(工具マーク) > 記事 > 記事下

 

無事にコードの挿入が終われば...

 

 

 

f:id:oshaberiitboy:20170912060122p:plain

  

シェアボタンの位置が1つ上になりました!やったー!

  

ついでに「あわせて読みたい」に変更したおかげで、ページもちょっとオシャレになったかも...。

 

ちなみにスマホ版だとこんな感じ。

 

どっちかというと、PCよりスマホの方が手軽に操作できるので恩恵が大きそうです。

 

 

f:id:oshaberiitboy:20170912060233j:plain

  

今回のカスタマイズの注意点として「記事下」にコピペするコードは2種類あるので、順番を間違えないようにしてください。

 

  1. ソーシャルボタンの設置コード
  2. 「あわせて読みたい」の設置コード

 

この順番でお願いします。

 

逆だとソーシャルボタンが下になっちゃうよ

 

おわりに

 

ということで、ソーシャルボタンを上にするなら「あわせて読みたい」を設置しよう...という記事でした。

 

まあ、ソーシャルボタンが上か下かなんて些細なことかも知れません。

 

でももし読んでくれた人が「この記事シェアしたい!」って思ったときに、 見やすい場所にボタンがないとストレスですよね。

 

みなさんも、参考にしてください。

 

本日は、以上です!