友達は少ない方が良いんじゃない??

解決!Brooklynで、関連記事の上にソーシャルボタンを表示したかったので方法を編み出したよ!

f:id:oshaberiitboy:20170912062023j:plain

 

どうも、おじゅんです。

 

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

 メニューバーを充実させたり、ソーシャルボタンを設置したり・・・。

 

 

うん、カスタマイズ楽しいよ!

 

 

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

 

 

www.yukihy.com

 

コードをコピペするだけなんで、ものっすごい楽です( ´ ▽ ` )ノ

 

 

ただソーシャルボタンは無事に設置できたんですが、1つ問題が起きまして・・・。

 

 

f:id:oshaberiitboy:20170912051948p:plain

 

 

そう、関連記事の下にボタンが設置されちゃってるんです。

 

上から読む場合、記事本文 > アドセンス広告 > 関連記事 >ソーシャルボタンの順番に表示されるということ。

 

 

 

これは流石に下すぎる^^;

 

 

 

 

「この記事シェアしたいなー」と読者の方が思っても、これではボタンが見つからずに諦めてしまうかも( ;∀;)

そんな状況は避けたいので、せめてアドセンス広告のすぐ下にボタンを設置したい・・・。

 

 

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

誰も解決方法を書いてないから、自分でなんとかしたよ!(探す能力が下手?うるせー)

 

 

 

 

 

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

 

 

見出し通りですが今回の問題は、

 

①上のリンク記事を参考に、ソーシャルボタンを設置する。

②関連記事の項目を消す。

③『あわせて読みたい』を関連項目の代わりに挿入する

 

ことで解決しました!

 

 

①のソーシャルボタンの取得コードは、サイトに載っているものを参照してください。

ほぼほぼコピペで問題ありません。

 

 

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

デザイン > 工具マーク > 関連記事 > 「関連記事を記事下に表示する」の横のチェックを消す 

 

 

ちなみに③の「あわせて読みたい」というのは、より見やすさが高くなった関連記事の仲間のシステム

多分この表現であってる・・・はず。

 

 

より詳しい内容やコードの取得は、こちらを参照してください。

かなり分かりやすく説明されています。

 

 

www.aoikara-writer.com

 

 

 

リンクを参考に「記事下に」コードを入れていくと・・・

 

 

 

f:id:oshaberiitboy:20170912060122p:plain

 

 

 

 

おおおおおおお!

 

 

 

シェアボタンの位置が一段上になりました!

これは嬉しい!

 

 

 

 

 

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

 

 

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

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

 

 

f:id:oshaberiitboy:20170912060233j:plain

 

 

いかがだったでしょうか?

 

 

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

 

①ソーシャルボタンの設置コード

②「あわせて読みたい」の設置コード

 

でお願いします。

 

 

これが逆だと、実際の表示も逆になっちゃうので^^;

カスタマイズしたい方は、ぜひ参考にしてくださいm(_ _)m

 

 

ではでは!