BloggerにSNSボタンを設置！HTML編集でソースを見つけられず苦戦したこと

こんにちは、HTMLとかまったくわかっていないyutaka(@goyutaka)です。

全くわかっていないと言いながらも約20年位前にはHTMLを書きながらホームページ作成も少しやってはいたのですが、今回自分のブログ（Blogger）にSNSボタンを設置しようとしてうまくいかず大変苦戦しました。

なにが苦戦したかというと、編集する位置のソースを見つけられなかった事なんです。

編集する場所がわからない！

SNSボタンを設置するにあたって、いろんなサイトを参考にさせて頂きながらやったのですが、まず目的とするタグ位置がわからないんです。
皆さんのサイトでは「検索窓」を「control+F」で出せることになっているのですがこれが出ないんです・・・

という事で、HTMLを上から下までず〜っと眺めながら場所を探しました。

記事上部分にSNSボタンを設置するにはまず、<div class='post-header-line-1'/>このソースを見つけます。

無いんです・・・どこにも

という事でたまに気分が乗る時に探してみては、ないな〜と思いながら他の参考になるサイトをみながら過ごしておりました。

ちなみに下のリンク「Blogger-customize.com」さんのサイトが設置に関してわかりやすく書かれていますので、参考にしてください。

[Blogger] 記事下など好きな所にSNSボタンを設置する方法 | Bloggerをカスタマイズするときに見るブログ

今までは記事下にSNSボタンを無理矢理設置していたのですが、それは記事の中にHTMLを直接埋め込む形でテンプレート内にソースをコピペしてやっておりました。

ただこれをやると、記事それぞれにこのソースが入りますのでボタン変更をしようとすると記事全部に編集をかけなければならないという非常に手間がかかる状態。
私の記事も600記事に迫るくらいになってきており、その手間はかなりのもの。

という事でなんとしても正規な方法で早く設置したかったのです。

ソースが隠れている！

探しても探しても全然出てこなかったのですが、たまたま見つけた三角の記号。
この意味すら全く知らなかったもので。
三角をクリックすると、この中身が展開してたくさんのソースが出て来ましたよ。

そして目的地をやっと見つける事ができました！
<div class='post-header-line-1'/>このソースの下にSNSボタン用のソースをコピペ。

記事下に設置する場合も同様に目的とするソースを三角の中から探してみたらありましたよ〜。

忍者おまとめボタンで設置

いろいろな形のSNSボタンを皆さん設置しているのですが、私はあまり知識もないのでセットでコードを作ってくれる所が良いなと思い、「忍者おまとめボタン」で設置をしました。

いろいろなSNSのボタンがあるので、そこから自分の好きなセットを作ることができますので簡単です。

出来上がったコードを先ほどの場所にコピペするだけで完成！

さいごに

という事で、私の場合は知識もなくBloggerでブログを書いている知人もいなく相当苦労して設置する事ができました。

検索窓がうまく出せないことも疑問には残りますが、この三角印を展開する事ができるのを知った事で、他の細かなカスタマイズも順調に進み始めました。

最後まで読んで頂きありがとうございます。 役に立ったり気に入って頂けましたら、是非フォロー＆シェアをお願いします！
フォローすると更新情報が受け取れます！