この1週間ほど暇な時間にはパソコンに噛り付いて悪戦苦闘を繰り広げていました。
やっと目標を達成したので、達成感を表現するような写真をフォルダーから選んでみました。
何に苦戦していたかと言いますと
「このブログにソーシャルボタンを設置する」
ということです。
最近はどのブログさんにもついているので羨ましく思っていました。
また検索エンジンからこのブログへ来ていただいている人数も少しずつですが増えており、 ソーシャルボタンがないのは不便なのでは、と考えました。
今無事に記事の下にソーシャルボタンを設置することが出来てほっとしています。
それまでの過程を書いていきたいと思います。

このブログはBloggerさんで運営しています。
Bloggerさんにもソーシャルボタンを設置する機能がついているのですが、 どうやってもブログへ反映されません。
どうやらテンプレートの方に問題があるようでした。
現在海外の方が作成した「Main Photo」というテンプレートを使用しています。
慣れない英語を駆使して、ソーシャルボタンを反映することに成功しましたがブログのデザインが崩れてしまいました。

テンプレートを変えるか、この「Main Photo」に設置する方法を探るか、あるいは諦めるか
テンプレートの変更も考えましたが、サイトを見て回るうちに今のデザインがすごく気に入っていることに気付きました。
すっきりとシンプルで、写真もよく映えるデザインはなかなかありませんね。
そこで今のサイトのまま、ソーシャルボタンを設置できる方法を探しました。

探すうちに忍者ツールさんの「おまとめボタン」 というサービスを発見しました。
これは簡単に設置できそうだ、と早速忍者ツールさんの解説通りに設置したのですが反映されません。
このテンプレート「Main Photo」は見た目はシンプルですが、中身はかなり複雑です。
display:none!important;　というコードが原因か？などと中身を調べたのですが、関係ありませんでした。
私はスクリプトを禁止するコードが含まれていて反映されないのではと考えたのですが、横のコンテンツに設置したらちゃんと動きました。
改めて調べているうちに「初心者からのBloggerカスタマイズ」さんというサイトにたどり着きました。
[Blogger]トップページの記事下にソーシャルボタンを追加する方法

という投稿を参考にようやくソーシャルボタンを設置することに成功しました。

簡単にですが、 「Main Photo」にソーシャルボタンを設置する方法を紹介します。
今までの四苦八苦が嘘のように簡単に設置出来ました。
まず忍者ツールさんなどでソーシャルボタンのコードを発行します。
Bloggerにアクセスし、テンプレート→HTMLのカスタマイズでHTMLの編集ページを開きます。
そこで「Ctrl+F」ボタンを押して検索バーを呼び出します。
「data:post.body」を入力し、3番目にHITした<data:post.body/></div>の間に発行したソーシャルボタンのコードを貼り付けます。
下の写真のようになれば大丈夫です。


苦戦した割にあっけなくソーシャルボタンを設置出来てしまいました。
苦労した分反映された瞬間は嬉しかったですね。
今回ボタンを設置しようと、「Main Photo」のテンプレートを触りまくったのですが、本当によく出来ているなと感心しきりでした。
日付や追記が隠れているなど、このデザインを作るための工夫があちこちに見られました。
このようなおしゃれなテンプレートを使えることに感謝しないといけませんね。
愛着のあるこのデザインで更新を続けることが出来るのが何よりも嬉しいです。