ガジェニュー

~iPhone・Android,格安スマホ,ネットフリックスとか~

【STINGER5カスタマイズ】サイドバーの見出しタイトルの前にアイコンフォントを設置

      2015/02/25    後で読む

szu1なんとなく、STINGER5のデフォルトのサイドバーの見出しの部分が目立たない気がしたのでちょっとだけアイコンフォントで飾り付けをしてみようかなと思いやってみました。コピペしてもらえれば5分ぐらいでカスタマイズ可能だと思います。

SPONSORED LINKS

サイドバーの見出しの前にアイコンフォントを設置する

STINGER5には予め、アイコンフォントの「FontAwesome」が設定してあります。なので今回はこちらを使用してサイドバーの見た目をカスタマイズしていきます

サイドバーの見出しの部分を制御しているのはCSSの下記の部分です。

/* サイドバーの見出し */
aside h4 {
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
	margin-bottom: 20px;
	line-height: 28px;
}

サイドバーの見出しは「h4」タグになっています。こちらの直ぐ下にアイコンフォントを設定するための記載をします。注意点としては、「aside」の中にある「h4」のダグの前のみにアイコンフォントが表示されるようにします。そうしないと色々なところにある「h4」が変わってしまい、デザインが崩れてしまいます。

今回はこちらのコードを記載しています。

aside h4:before {
content: "\f0c2";
font-family: FontAwesome;
font-size: 16px;
color: #ff1493;
position:relative;
top:2px;
margin-right:5px;
}

「content:」の後に表示させたいアイコンフォントのコードを記載します。フォントサイズ・カラーに関してはご自由にどうぞ。今回は「before」の要素を使ってみました。こうすると「aside」内の「h4」の直前にこちらのコードを付与してくれます

アイコンフォントのコードの確認方法

コードの確認は下記のサイトより行います。

ページにアクセスしたら上部にある「icon」をクリックして使えるアイコン一覧を出します。
scap-2使いたいアイコンがあればクリックしてページを表示させて、「uni-code」という4文字のコードをメモしますscap-1こちらを先ほどのコード部分と入れ替えると好きなアイコンフォントが表示されます。

これだけでOK。特につまずくところもなく簡単に完了しました。

まとめ

画像を背景として設定する方法もありますが、アイコンフォントを使用したほうがサイトの読み込み速度の向上に一役買ってくれます。なので複雑なものを設定したい。という人以外はアイコンフォントを使うのが良いみたいです

アイコンフォント、奥が深そうだ。。もっと勉強が必要だな。STINGER5についてもカスタマイズが着々と進んでオリジナルのテーマになってきた気がします。

てな感じで。

参考にさせてもらったサイト
・http://nekonotesou.com/stinger5-h3/

 - STINGER5, WordPress , , ,

  関連記事

sum
【アクセス数報告】2014年10月のPVとアフィリエイトの収益を公開します

10月の末から、昨日まで曾祖母のお葬式や、遺品整理やらでバタバタしていて本日から …

chatlike-css-tb
レスポンシブ+スマホ最適化のチャット風の会話を導入したよ。【WordPressカスタマイズ】

今回はCSSを利用してチャット風の会話レイアウトを導入したので備忘録として書いて …

sum-wpp
【STINGER5カスタマイズ】WordPress Popular Postの表示をSTINGER5と同じにする

「STINGER5」への移行にともなって、使用していたプラグインでもポロポロと修 …

images 2
App Store Insertでアイコン画像が表示されない問題を解決!【ブログカスタマイズ】

当サイトでもかなりお世話になっている「App Store Insert」ですが、 …

sum
【STINGER5カスタマイズ】メディアサイズが変更できない問題

こちらのブログですが、【STINGER5カスタマイズ】AdSenseセンスの表示 …

201509
【アクセス数報告】2015年8月のPVとアフィリエイトの収益とか

最近ずいぶん涼しくなって来たのに、今日は蒸し暑いですね。今年は残暑が続くのだろう …

icon_1r_192
【アクセス数報告】2015年5月のPVとアフィリエイトの収益とか

5月の印象はとしてはとにかく暑い!暑い!やってられません。 という印象でした。 …

ana-sum
【アクセス数報告】2014年9月のPVと収益を公開します

今回は初めて、「ガジェニュー」のPVを公開してみようと思います。実際にこうやって …

sum_012415_124615_AM (1)
【WordPress】ロリポップサーバーからエックスサーバーにお引っ越ししました。

今回は、ロリポップ!のコロリポプラン(月額250円)のプランから、エックスサーバ …

screenshot (1)
「Google+」と「WordPress」を活用して2時間でサーバの容量を圧迫しないフリー写真素材サイトを作ったよ!

2年ほど前にミラーレス一眼を買って色々写真を楽しんだりしていた私なのですが、実は …

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です