Blogger初心者【QooQ】シェアボタンのカスタマイズ（上側を削除、下側を残す）

こんにちは。
Bloggerのカスタマイズが、だんたん楽しくなってきた初心者です。

これはどうしたらいいんだろう？
と思いつつ、いろいろ記事を検索していると、思いがけず素敵なブログに出会えたりする。
そんな偶然も楽しいですよね。

今日は、QooQのシェアボタン部分のカスタマイズです。

初期は、記事の上下に表示するボタン。
これの上側を削除する方法になります。

シェアボタンとは

シェアボタンとは、その記事を読んでくださった方が、LINEやFacebookなどのSNSに共有（＝シェア）するためのボタンのこと。
共感してくれたり、感想を添えてくれたり・・・とても嬉しいボタンです。

わたし自身は、【Twitter】と【はてブ（はてなブックマーク）】を使うことが多いです。

QooQのシェアボタン

テンプレートQooQのシェアボタンは、こちら。


とてもシンプルで可愛いので、気に入っています。
軽く、表示が早いことも、読者思いでポイントが高いですよね。

でも。
ひとつだけ気になることが・・・。

それは、記事の上下に表示されてしまうこと。

記事の上側

記事の下側

なんだか、こう・・・「シェアしてええ！」って言っているみたいで、少し恥ずかしいです（笑）。

Blogger＞レイアウト＞記事表示部分を編集で開くと、シェアボタンの表示をON／OFFできる場所があります。

レイアウトの画面

でも、これをOFFにしちゃうと、まったく表示されなくなってしまうんですよね・・・。

それはそれで、困ります。

１ヶ所だけは残したい。
できれば、記事の下を残したい。
記事を読んだ後にシェアするかしないかを決められる、そんな流れが自然だと思うからです。

カスタマイズ方法

そんな都合のいいカスタマイズ方法がないか、検索したところ、ぴったりな方法を紹介している先輩ブログ「KillingTime」様を見つけました。

さっそく参考にして、カスタマイズしていきます。

カスタマイズはHTMLの編集が必要です。
いつでも後戻りできるように、必ずバックアップをしてから、作業をするようにしてくださいね。

Bloggerの「テーマ」＞右側の3つの●をクリックします。

Blogger＞テーマの画面です

出てきた項目から「HTMLを編集」を選択。

おびただしい英数字の海から、「<div id='single-header'>」という文字列を探してください。

htmlの書かれている場所をクリックしてから、キーボードの【ctrl】＋【F】を押すと検索することができますよ。

次に、その下側のどこかに書いてある
「<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>」
という文字列を探し出します。

HTML編集画面

この一文を、削除して保存します。

ブログの記事を表示してみると、上側のシェアボタンがなくなりました。



下のボタンは、ちゃんと残っています。
（この記事の下側に、ありますよね？）

とてもすっきりした印象に。
気持ちのいいカスタマイズになりました！