微妙すぎるSNS活用術!アイコンフォントで直感的なSNS連携を実現しよう。

10月に家の引越しをしようかな?と考えているんですが、それ以前に今の部屋の片づけが全然進まないダメ人間(@sakutomo0615)です。

引越しのお話はいずれ詳しくするとして、今回はSNS経由アクセスを微妙にアップする方法について紹介したいと思います。

 

微妙なの?

ええ、微妙です。

微妙な効果だから、微妙な手間で終わらせます。

ブログ運営にはコツコツした努力が大切だよ?いいね?

ヒントはこちらから得ました!

nq

http://studio-nq.com/

ソフトウェアエンジニアの業界だとよく見かけるのですが、セミナーのスライドショーなどに自分のTwitterアカウントを挟みます。

FUJIHIRA(@Studio_NQ)さんは元々エンジニアの方ですし、私も技術方なので、今まで全く違和感を感じなかったんですが、非エンジニア・非デザイナー職の人はまずTwitterアカウント名は挟まないですよね?

名乗りの時にTwitterアカウントを挟んできた瞬間に『ああ、エンジニアの人ですね』ってわかるくらいの特徴ですね。

いつ・どこから生まれた文化なのかは私も良く知らないんですが、こう言うちょっとしたところでのフォロワー獲得へ繋げる姿勢は見習うべきものがあります。

と、言うワケで早速パクって行きたいと思いますが、そのままリンクだけしても寂しいので、ちょっとデコってあげました。

アイコンフォントを使おう

もうお気づきと思いますが@で始まるTwitterアカウントの前に、Twitterでお馴染みの鳥のマークが出ています。マウスを乗せると色が変わります。これはアルバトロスの標準機能ですね。ホバーエフェクト(a:hover)というやつです。

 

今回登場するのはスマートアイコン等を画像としてではなく、フォントとして表示きるプラグイン、Font Awesome Iconになります。

色々なアイコンが使えますが、今回は全てではなくTwitterアイコンのみに絞って導入を進めたいと思います。

画像ではなくフォントとして使えるので、画像のサイズとか位置とかは気にする必要なく使うことが出来ますよ♪

早速Font Awesome iconの導入の方法を紹介します。​

 

プラグインのインストール

おなじみの手順なのでサクッと行きます。

iconfont01

インストールします。

iconfont02

プラグインを忘れずに有効化しましょう。

Twitterアカウントをリンク表示してみる

投稿の編集→HTMLエディタを開きます。

iconfont04

※TwitterのアカウントURLとアカウント名は自分のものに書き換えて下さいね。

<a href=”http://twitter.com/アカウント名”><i class=”fa fa-twitter”>@アカウント名</i></a>

まとめ

ほんのちょっとした変化ですが、記事を書く時に気分が乗らない時の気分転換にこういう作業を間に挟むと生産性が意外とUPしたりしますよ♪

ただし、デコレーションにハマってしまって記事を書くのが疎かになってりしないように気を付けましょう(自分への戒め)

 

その他のWebアイコンフォントの運用例を見てみましょう。

タンクさくらい(@sakutomo0615

タンクさくらい(@櫻井智行

 

一番メジャーなのはお問い合わせボタンやメニューに埋め込む方法ですね。

ホームアイコン
チェックアイコン
ダウンロードアイコン
注意アイコン
カートアイコン

こんな感じですね。

<i class=”fa fa-home”></i> ホームアイコン
<i class=”fa fa-check”></i> チェックアイコン
<i class=”fa fa-download”></i> ダウンロードアイコン
<i class=”fa fa-warning”></i> 注意アイコン
<i class=”fa fa-shopping-cart”></i> カートアイコン

ではでは♪

ABOUTこの記事をかいた人

櫻井智行

ネットワーク・サーバー系のフリーのインフラエンジニア。得意分野はデータベース・ネットワーク・負荷分散あたりです。30歳の頃に独立しましたが、それまでに巻き込まれた様々なデスマーチと火消しの実績からトラブルシュート案件ばかりが依頼される様に・・・。 ビットクリア設立後は趣味の炎上・デスマーチ観察を軸にデスマーチソムリエとして小田原市・東京を中心にグローバルに活動中。