テーマ更新

閲覧数: 15(0)

obliqueテーマを最新版(2.0.11)にアップデートしたところ、アイコンに使っている「Fontawesome」が4.7から5.0へ変更されていて、これまでの指定ではアイコンが表示されなくなってしまった。直後にバージョン2.0.12がリリースされたので、さらに更新してみたが、結果は変わらず。そもそもFontawesome 5.0ではこれまで使っていたアイコンが使えなくなっているし、どうやらフォント指定そのものが上手くいっていないのか、アイコンが表示されない。修正されるのを待つのも一つの手だが、子テーマ側で対応することも可能なので、ここでは子テーマでの対応方法について説明。

子テーマでフォント指定する方法はいくつかあるが、このサイトでは以下の指定方法を使っている。

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

フォント自体は子テーマの「oblique-child/fonts」フォルダにダウンロードコピーしておく必要がある。Fontawesome公式サイトから過去バージョンをダウンロードする。対象ファイルは以下の通り。

-rw-r--r-- 1 apache 134808  4月 16 11:47 2018 FontAwesome.otf
-rw-r--r-- 1 apache 165742  4月 16 11:47 2018 fontawesome-webfont.eot
-rw-r--r-- 1 apache 444379  4月 16 11:47 2018 fontawesome-webfont.svg
-rw-r--r-- 1 apache 165548  4月 16 11:47 2018 fontawesome-webfont.ttf
-rw-r--r-- 1 apache  98024  4月 16 11:47 2018 fontawesome-webfont.woff
-rw-r--r-- 1 apache  77160  4月 16 11:47 2018 fontawesome-webfont.woff2

これで以前の指定のまま、各種アイコンが表示されるようになる。テーマの「追加CSS」では以下のように指定することが出来る。

.widget_meta li::before {
	font-family: Fontawesome;
	font-size: 15px;
	margin-right: 5px;
	content: "\f204";
}
.widget_meta li:hover::before {
	font-family: Fontawesome;
	font-size: 15px;
	margin-right: 5px;
	content: "\f205";
}

この設定はサイドメニューのメタ情報エリア、リスト要素前のアイコン指定。

カテゴリーIT閑話, 公開タグ,
検索精度を高める
2020年11月1日

検索ネタを連発するのはElasticsearchやElasticPressがバージョンアップした時の  続きを読む

ElasticPress日本語設定2020年版
blank
2020年10月29日

ElasticsearchをWordpressで利用するためのプラグインであるElasticPres  続きを読む

ElasticPress 3.5
blank
2020年10月22日

Elasticsearch用のプラグインであるElasticPressがメジャーバージョンアップ(3  続きを読む

Elasticsearch 6.8.11
blank
2020年10月2日

2017年末に「2.4.6」から「5.6.5」へバージョンアップして以来の大幅バージョンアップです。  続きを読む

パンくずリスト詳細
blank
2020年5月12日

テーマの「マイナーチェンジ」に伴って「パンくずリスト」の仕様を若干変更しました。一つ前のテーマではパ  続きを読む

カテゴリーを制限する
blank
2020年5月11日

過去に何度も書いた「カテゴリー制限」の話、元はと言えば初期に書かれた「非公開」の記事が原因です。トッ  続きを読む

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください