【QooQカスタマイズ】SNSシェアボタンのデザインを変更する

本ページはプロモーションが含まれています

 


今回もBloggerの人気テンプレート「QooQ」のカスタマイズをやっていきましょう。今回はSNSシェアボタンのカスタマイズを行いました。こちらのカスタマイズはふじろじっくさんのコードを参照させていただきました。QooQのテイストにベストマッチなおしゃれデザインなのでおすすめです。

この記事の内容
  • Bloggerテンプレート「QooQ」のSNSボタンのデザイン変更を紹介しています

参考にした記事

こちらのふじろじっくさんの記事で紹介されているカスタマイズを参考にさせていただきました。自分はすでにFontAwesomeを導入済みだったので、HTMLとCSSをコピペするだけで簡単にデザインを変更することができました。


導入方法も非常にわかりやすく解説してくださっているので迷うことはありませんでした。導入方法やHTML・CSSのコードはふじろじっくさんのサイトを確認してくださいね。

注意事項
  • HTML・CSSの編集をする前にはバックアップを取ることをおすすめします。

QooQでのSNSシェアボタンの実装例


既にこのブログにも導入済みですが、このような感じで実装させていただきました。導入するにあたりちょっとだけアレンジした点が2点あります。1つ目は「\この記事をシェアする/」のように吹き出しっぽくしたこと、2つ目はURLのコピペボタンを外したことです。

あと、記事上部のSNSシェアボタンも非表示にしたかったのでコメントアウトしています。こちらの方法も記事内で紹介されていたのでありがたいですね。

まとめ

BloggerでQooQのテンプレートを利用されているなら、SNSのボタンカスタマイズはおすすめです。デフォルトでも十分使ってもらえるとは思うのですが、よりパッと目につくいい感じのデザインに変更しておくとシェアしてもらえるかもしれませんね。

その点、ふじろじっくさんのカスタマイズは非常にすばらしいと思いますので、QooQのテンプレートを利用されている方はぜひトライしてみてくださいね。