Blogger日本語テーマ「Prime ZELO」からGoogle+のSNSボタンを削除する方法

2019年4月2日、Google+が完全に終了することはすでに周知の事実だろう。これにより、ブログからGoogle+のSNSボタンを削除したいと思う人は筆者同様多いに違いない。
現在当ブログはBlogger日本語テーマとして完成度の高い「Prime ZELO」を使用している。このテーマからGoogle+のSNSボタンを削除したいと思うのだが、作者hiroさんに連絡したところ、お忙しいらしく返事がない。
もともと、自由なカスタマイズが出来ることがこのテーマのポイントのひとつなので、「作者hiroさんのお手を煩わせなくとも自分でできるのでは?」と考え、やってみた。多少仕様は違えど、他のZELOシリーズも同じようにできるのではないだろうか。

1.テーマ全体のバックアップ

どのテーマを編集するにしても、バックアップは必須である。何か不具合があったときにも度に戻すためのものである。

筆者はBlogger管理画面から「テーマ」→「HTMLの編集」と進んだのち、全てをコピーしてテキストエディタに張り付けて編集している。Blogger管理画面では小さすぎて見にくく、どこかとんでもないところを編集してしまいそうなので、テキストエディタでの編集が安心だ。

テキストエディタは何でも良いだろう。WindowsのPCを利用している人なら「メモ帳」がデフォルトでついているので、それでも良い。ただし、バックアップファイルとして保存しておきたいならば、utf-8のxmlファイルが保存できるテキストエディタが良いと思う。
筆者の場合、日常仕事でウェブサイト制作を行っているので、テキストエディタはTeraPadを使用している。以後TeraPadのスクリーンショットで案内する。

2.Google+ボタンの位置を確認後、削除

さっそくコピーしてテキストエディタに張り付けたxmlファイルから編集していく。

まずはボタン自体の削除だ。
検索で「SNSアイコン」を検索すると、ちょうど以下の箇所にたどり着く。

SNSボタン削除の編集画面1
【クリックで拡大】
青く反転している部分がGoogle+のボタン。箇条書きのliタグごと削除する。すると以下のようになるが、少々格好が悪い(下画像)。

【クリックで拡大】

3.CSS編集で見栄えを調整

そこで今度はCSSを編集する。
「SNS」で検索した場所から3行下の「share-icons」で再度検索。これはSNSアイコンを一列に並ばせているulタグのCSSを探し出すためだ。そして以下画像の場所にたどり着く。

SNSボタン削除の編集画面2
【クリックで拡大】

ちょうど青く反転している行から10行下に「width: 100px;」とある。これは各SNSアイコンがPCでは100ピクセルの幅ということだ。デフォルトのテーマではSNSアイコンが6つ横一列に並んでいるので、アイコン6つで600ピクセルだ。ここからひとつアイコンを削除して5つになっているので、各アイコンの横幅を120ピクセルにしてあげればよい。つまり、「width: 100px;」を「width: 120px;」と書き換える。
これでパソコンでは5つのSNSアイコンがきれいに横並びになる。

4.レスポンシブも忘れずに

次にレスポンシブ画面用の編集だ。「share-icons」で検索を4回続けると、以下の場所にたどり着く。

SNSボタン削除の編集画面3
【クリックで拡大】

碧く反転した行から4行下に「width: 48px;」とある。PC画面の時同様、デフォルトの場合ひとつのアイコン幅は48ピクセルということだ。そして6つ横一列に並べると288ピクセルになる。これを5つにするので、ひとつのアイコン幅は57.6ピクセルだが、筆者はこれを58ピクセルにした。
つまり、「width: 48px;」を「width: 58px;」と書き換える。

これで終了だ。出来上がりのSNSボタンは、この記事の下方をご覧あれ。
htmlの知識をお持ちの方なら、難なくこんなことは編集できると思うが、だれかの役に立つのなら…。
スポンサーリンク

コメント