CSSとWEBフォントだけで作ったSNSシェアボタンをSTINGER3に入れてみた

      2014/08/06

CSSとWEBフォントだけで作ったSNSシェアボタンを、STINGER3に導入する方法をご紹介します。美しくて目立つシェアボタンにすれば、ブログ記事からSNSにシェアしてもらいやすくなりますよ!

css-webfont-sns-button-catch

ブログの記事にTwitterやFacebookをはじめとするSNSへのシェアボタンを配置することは、特に珍しいことではありません。でも、もうちょっと美しくて目立つボタンに変更して、SNSへの導線を強化したいなぁ、と考えていました。

しかし、ボタンといえど画像ファイルを一から作成することは、結構面倒な作業ですよね。画像作成のソフトも必要ですし。

そんな場合は、CSSとWEBフォントだけでボタンを作っちゃいましょう。CSSだけでもボタンを作ることが出来ますが、そこにWEBフォントをプラスすると、グッとお洒落でそれっぽいボタンが作れちゃいます!

ということで早速、STINGER3を使った当サイトの記事下部に、CSSとWEBフォントだけで作ったSNSシェアボタンを配置してみました!今回は、その実装方法をご紹介します。

スポンサーリンク

CSSとWEBフォントだけで作るSNSシェアボタンの実装でやったこと

  • WEBフォント「Font Awesome」の導入
  • CSSファイルにSNSシェアボタンの装飾設定を追加
  • SNSシェアボタンのタグを追加

以上が、今回のお品書きになります。たったこれだけで、今回も全く難しい作業はありません。では早速、順に見ていきましょう。

CSSとWEBフォントだけで作るSNSシェアボタンの導入手順

WEBフォント「Font Awesome」の導入

まず、WEBフォントの「Font Awesome」を利用できる状態にします。「ん、WEBフォントってなに?」という方は、導入方法を解説した記事を以前に書きましたので、是非そちらをご参考にしてください。

WEBフォントで簡単に!STINGER3の細かいところにアイコンを入れてみた

CSSファイルにSNSシェアボタンの装飾設定を追加

「style.css」と「smart.css」の最下部に、以下の設定を追加してください。

このCSSの設定は、あくまで当ブログで実装している一例です。ボタンの余白や角丸、影の付け具合なんかを細く設定しているので、いろいろこだわりたい方は、どうぞガシガシ変更しちゃってください。

SNSシェアボタンのタグを追加

「sns.php」の先頭に、以下のタグを追加してください。

はい、今回の導入手順は以上になります。メッチャ簡単です!

どのようなSNSシェアボタンになっているかは、記事の最下部を見てくださいませ。デカくて目立つボタンが配置されているかと思います。ちなみに、「<i class=…」のところがWEBフォントになるのですが、このWEBフォントアイコンを入れるだけで、それなりに美しく見えちゃうから不思議です。

さいごに

このSNSシェアボタンの実装で、記事のツイートとシェアの数がちょっとでも増えてくれるといいんですけどね…。しばらく様子を見たいと思います。

なお、今回はTwitterとFacebookのボタンを作ってみましたが、アイデア次第でほかにもいろんなボタンが簡単に作れると思います。是非チャレンジしてみてください!

こちらの記事もいかがですか?

そのほか、STINGER3のカスタマイズについてまとめてみました。

わたしがSTINGERでカスタマイズしたことをまとめてみた

 - ブログカスタマイズ

スポンサーリンク

  関連記事

わたしがSTINGERでカスタマイズしたことをまとめてみた
わたしがSTINGER3でカスタマイズしたことをまとめてみた

STINGER3をテーマにした当ブログで、わたしがこれまでに実装したカスタマイズの内容を、まとめてご …

STINGER3のtitleタグ先頭に入る改行とスペースを消してみた

photo credit: Huasonic via photopin cc 実はさっき気がついてし …

STINGER3のフッターを3カラムにカスタマイズしてみた

個人のブロガーは、記事の執筆はもちろんのことながらブログのデザインにも多少は気を配って、自分でカスタ …

WordPressでメディアを挿入のリンク先を最初からなしに設定する方法

WordPressで投稿の本文に画像メディアを挿入する時、リンク先をメディアファイルではなく、最初か …

WordPressのコメント欄をデフォルトからFacebookに変更してみた【STINGER3】

当ブログですが、まだそれほどアクセスは無いはずなのにしばしばスパムコメントが入ってきます。不思議です …

WordPressのテーマをSTINGER3に変更してみた

ブログを始めて少なくとも数ヶ月はほとんどアクセスなんてありませんよっ!なーんてことは重々承知のつもり …

STINGER3の「関連記事」表示を横並びにカスタマイズしてみた

STINGER3の「関連記事」表示を横並びにカスタマイズする方法をご紹介します。必要以上に縦長になっ …

WEBフォントで簡単に!STINGER3の細かいところにアイコンを入れてみた

WEBフォントを使って、簡単にアイコン装飾を行う方法をご紹介します。細かいところまでに気をつかえば、 …

CSSを使ってプロフィールやサムネイルの画像を丸く切り抜く方法

最近よく見かける、プロフィールの画像やサムネイルの画像なんかを丸く切り抜いたデザイン。これは丸く切り …

気持ちいいエフェクトのスライドメニュー「Off-Canvas Menu Effects」を入れてみた

スライドメニューを表示するときのエフェクトが気持ちいい「Off-Canvas Menu Effect …