ウサヲブログ  HOME

ウェブ制作に関わる備忘録などを綴ります

このページの位置: HomeWordpress「Font Awesomeを使ってみた」の記事

Font Awesomeを使ってみた

フォントオウサムへのリンク

ウサヲです。

SNSボタンを設置しようとするときの便利サイトがあったので、メモします。

設置の理由

wordpressのテーマファイルをいじくって自分なりのデザインに持っていこうとしたときに、SNSボタンのデザインに困ったりします。SNSボタンの画像をダウンロードして、それを横並びにしたり、marginを整えたり、カラー変更したいなーと思ってもそれを編集するのも億劫で・・と、できるだけシンプル!を目指すウサヲにとっては厄介なものでもありました。

シンプルにいいところを言うと、ソースコードには<head>内に1行追加する下処理をすると、あとはコピペでいい感じに仕上げてくれるという優れもの、というところです。さらに、アレンジも効く!という柔軟性にも喜び一票。楽チンしてでもアレンジにこだわりたいという矛盾した願いを叶えてくれる、素晴らしい便利ツールなのであります。

設置のアバウトな方法

ヘッダに追加する一行は、以下のような<link>タグなのですが、公式サイトの最新バージョンを確認し、バージョン番号を最新に変更する、ということは頭に入れておいたほうがいいと思います。(執筆時点で4.6.0)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

ウサヲが試したプチアレンジ

ウサヲとしては、シンプルなこのツールを、自分のブログのカラーに容易にアレンジできるところに惹かれたのであります。ウサヲが試したのは、サークルとSNSロゴの重ね技であります。

ソースはこちら↓(<i>〜</i>はfont-awesomeのメニューiconsから取得したものそのまんまです。)

<div class="snsBtns">
 <ul>
 <li><a href="#" target="_blank"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i><i class="fa fa-facebook  fa-stack-1x" aria-hidden="true"></i></span></a></li>
 <li><a href="#" target="_blank"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i><i class="fa fa-twitter  fa-stack-1x" aria-hidden="true"></i></span></a></li>
 <li><a href="#" target="_blank"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i><i class="fa fa-feed  fa-stack-1x" aria-hidden="true"></i></span></a></li>
 </ul>
 </div>

CSSはこちら↓

.snsBtns ul li .fa-stack-1x { color: #fff; }
.snsBtns ul li a:link { color: #ff716f; }
.snsBtns ul li a:hover, a:focus { color: #f89c9b; }

 

便利ですし、かなり応用が利きますし、そして、使えます!

コメントを残す

日本語でお願いします。「テスト投稿」のような短い文は無視されます。

TOP