モッピー!お金がたまるポイントサイト

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

2021/06/21

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

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

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

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

[adsense]

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

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

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

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

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

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

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

[adsense]

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

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

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

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

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

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

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

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

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

style.cssにコードを記入

管理画面 → 外観 → テーマ編集 → スタイルシート(style.css)を開くか、Transmit(FTPアプリ)でstyle.cssを開いてください。開いたstyle.cssの11行目の「@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;
}

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

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

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

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

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

.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;」を含めて下3行です。

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

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

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

.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;
}

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

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

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

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

[adsense]

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

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

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

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

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

完成

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

この記事を書いた人

ディーエムガジェット 

非IT系エンジニア。日々の出来事や自分の好きな物などの紹介をメインに色々発信していきます。2012 年から禁煙を開始して68キロぐらいだった体重が2012年6月には75キロまで増加。ヤバい!と感じてダイエットを開始。一回65キロまで落としましたが、2018年8月現在また72キロまで増加。こんな身体でもトライアスロンに出場予定「プロフィールはこちら

このエントリーをはてなブックマークに追加

WORDPRESS

Posted by dmgadget