blogger でページにソーシャルボタンを表示させる

フルーツのヨーグルトジュース


ページにSNSボタンがない


ちょっとブログを見てて思ったんですが、ページにSNSボタンがなかったんです。
ページというのは、ブログ記事じゃなくて、「ページ」です。

あのー、書いていることがわかりにくいと思うんですが、blogger 特有の「静的なページ」です。
メニュー項目の中にあるやつです。

このページにSNSボタンがないのは、たぶんテンプレートの作者さんが、何か理由があってこうしてると思うんです。
でも、僕はページにSNSボタンを表示したいんです。
どうすればいいんでしょう。

ネットで探す


はい、そういうわけで、インターネットで検索しました。
探してみると……あるんですね。

GoogleブログBlogger: 特定ページのみにhtmlソースコードを記述する方法 @ コンピュータ系サラリーマンブログ

こちらの記事はまさに探していた内容です。
状況別にコードを書いてくれているので、助かります。

テンプレートのコード、SNSボタンのところを見てみると、上の記事でいうところのブログ記事のみに表示するコードになっていますね。
これを、「ブログ記事と静的ページで表示する」の書き方に変えればいいわけです。

HTMLは2回書くことになります。
ちょっとだけ面倒くさいです。
まあ、でもコピペですみます。

ボタンのデザインも変える


ここで、コードを書き換える前に、ボタンもカスタマイズしようと思います。
デフォルトだと、ツイッターボタンがずれてて、なんか気になるんですよね。
(その後テンプレートをVaster2に変えて、ボタンもさらにいい感じのものになりました。この記事はそれ以前のときのものです)
カスタマイズといっても、これもコピペです。

参考記事を紹介


[コピペだけ]6種類のオリジナルSNSボタンをBloggerに設置する方法を紹介する

こちらの記事は、いま使っているテンプレートの作者さんのブログ記事です。
6種類のいい感じのボタンをコピペで設置できます。
しかもレスポンシブル対応です。

注意点


注意点としては、このコード、Feedlyのボタン設置は、記事に書いてある方法でもうまくいきませんでした。
blogspot だと、なにか仕様が違うのかもしれません。
とりあえず、ブログのフィード(rss2.0)のURLを入れたら、うまくいったっぽいです。

そして、こうなると、もともとあったフィードを購読ボタンはいりませんよね。
撤去です。

確認すると?


確認してみると、いい感じになっていました。
デフォルトのものよりも見栄えがいいですよね。
ページのほうにもちゃんと表示されていますよ。

そのほかのボタン


ちなみに、こちらの記事のボタンも気になっていました。

[JS]超軽量で設置も簡単!Facebook, Twitter, Google+のボタンを設置するスクリプト -SocialCount | コリス

3種類ですが、シンプルなのはいいですよね。
いまのところ不満はないですが、ボタンを変えたい気分になったら、こちらのボタンにしてみようかと思います。

ついでに日付表示も


ページに投稿日時の表示が出ていたので、それも消しました。
たぶん、ページには投稿日時とラベルの概念がないです。
でも、テンプレートのコード上では公開日とラベルを表示するように記述されていたのです。
必要ない記述です。

これをどうしたのかというと、公開日とラベルのコードを投稿にだけ対応させました
最初に紹介した記事の、投稿にだけソースコードを記述する方法でなんとかなります。
日時とラベルのコードを投稿のみに指定して、完成です。

画像を調整する


そうそう、こんな記事も見かけていました。

Blogger日本語テンプレート「Vaster」カスタマイズ④画像表示のズレはコレで 治 ります|ジュンズキッチン

Bloggerで画像への外部リンクと、画像自体へのリンクで、画像表示がズレるときの対処方法 | ふりむけばコウホウ

画像表示、たまにずれているような気がします。
こちらに書いてあるコードで解決するようです。
簡単ですね。

もともとそんなに気にしていませんでしたが、簡単そうなのでやっておきました。
このブログもなかなかいい感じになってきた気がします。
スポンサーリンク

投稿サイト

小説家になろうに、猫のエッセイを投稿しています。
かわいいです。
うちのかわいいかわいい猫
このブログでも、一部を掲載しています。

アルファポリスでは、ファンタジーの連載を初めてみました。
気軽に読んでみてください。

ランキング

スポンサーリンク