WordPress[Stinger3] サイドバーのアイコンを変更する方法

WordPressの人気テーマStinger3のサイドバーのデフォルトアイコンはこちらですが、

変更後はこのようになります。

今日はこのアイコンを変更する備忘録を残したいと思います。今回変更するにあたって参考にさせて頂いたブログはNAIFIXさんの

Stingerサイドバーにさりげない気遣いを。アイコンフォントの使い方

です。こちらも合わせてご覧ください。今回もOSXローカル環境にwordpressをインストールする方法で構築したWordPressの環境で作業して行きたいと思います。

アイコンフォントをダウンロード

今回変更するアイコンは画像ではなくフォントの一種のアイコンフォントらしくサイズも色も自由に変更出来ます。まずは下記のリンクからアイコンフォントをダウンロードしてください。

Ligature Symbols

ダウンロードリンクはページの一番下になります。

アイコンフォントをアップロード

ダウンロードしたアイコンフォントをブログで使用出来るようにアップロードします。ここではTransmitのようなFTPアプリが必要なので用意してください。

Transmit
カテゴリ: ユーティリティ
現在の価格: ¥3,400

ご自身のサーバーのテーマフォルダの中の「stinger3ver20140124」(こちらは最新バージョンのStinger3です）の中に「font」と云う名前のフォルダを作成します。その中に先程ダウンロードしてZip解凍したアイコンフォントの

LigatureSymbols-2.11.woff
LigatureSymbols-2.11.ttf
LigatureSymbols-2.11.svg
LigatureSymbols-2.11.otf
LigatureSymbols-2.11.eot

の五種類を先程作成した「fonts」フォルダの中にアップロードします。

アイコンフォントのアップロードはこれで終了です。

style.cssにコードを記入

管理画面　→　外観　→　テーマ編集　→　スタイルシート（style.css)を開くか、Transmit(FTPアプリ）でstyle.cssを開いてください。開いたstyle.cssの１１行目の「@charset “UTF-8”;」の次の行ぐらいに下記のコードを足します。

@font-face {
	font-family: 'LigatureSymbols';
	src: url('./fonts/LigatureSymbols-2.11.eot');
	src: url('./fonts/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
	url('./fonts/LigatureSymbols-2.11.woff') format('woff'),
	url('./fonts/LigatureSymbols-2.11.ttf') format('truetype'),
	url('./fonts/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
	src: url('./fonts/LigatureSymbols-2.11.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

最終的にこのようになれば大丈夫です。

次にTransmitだと５９５行目ぐらいに「.menu_underh2 {」という記述がありますが、そこを修正します。デフォルトだとこんな感じですが、

下記のコードに変更します。

.menu_underh2 {
	margin-bottom: 20px;
	margin-top: 20px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	color: #000;
	font-weight: bold;
}

変更した部分は「padding-left: 35px;」を含めて下３行です。

次に、今変更を加えた「.menu_underh2 {」のセクション（全部で１１行ぐらいあります）の下に追加でコードを足します。現状だとこうなってるはずです。

６０５行目の次に下記のコードをコピペしてください。

.menu_underh2:before {
	font-family: 'LigatureSymbols';
	content: '\E038';
	margin-right: .3em;
	color: #111;
	font-size: 30px;
	font-weight: normal;
	-webkit-text-rendering: optimizeLegibility;
	-moz-text-rendering: optimizeLegibility;
	-ms-text-rendering: optimizeLegibility;
	-o-text-rendering: optimizeLegibility;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

最終的にこのようになります。

そして使用するアイコンの指定なのですが、先程のアイコンフォントをダウンロードしたページに表が出てるので番号を確認します。

Ligature Symbols

自分はこのlaughというアイコンにします。

右側の「￥E07f」をコピーします。（￥マークも含めてコピーします。ペーストすると自動的に「\」に変換されます）

コピーしたアイコンの番号を先程の、

の「content:」の「\E038」部分に貼付けます。貼付け後、保存をして終了です。

完成

ブログを見て変更されているか確認しましょう。読んで頂いてありがとうございました。