The post WordPress管理画面でアイコン表示されない時の簡単な対処法 first appeared on Fukuro Press.
]]>つい最近こういう現象に遭遇しました。
アイコンはなくても困らないものの…
表示されないと少しモヤモヤします。
その修正方法とかをまとめてみました。
WordPress4.x.xで運営してたブログがあります。
それを最新の5.8.1に更新した時のことです。
更新は成功したけど何か違和感があるんですよね。
↓ 管理画面バーのアイコンが表示されてない!
↓ TinyMCEのアイコンは全部 □ になっていた...
まず気づいたのは管理バーの異変でした。左上のWordPressマークも表示されていないし、その他のアイコンも表示されないようになってしまってます。
そしてさらに驚いたのは編集画面です。クラシック編集する時のTinyMCEのアイコンがごっそり消えてしまってました。さすがにこれは困ります (-_-;)
というわけで修正を試みました。
まず原因から探ってみることに
例えば管理バーではこんなHTML・CSSが適用されていました。
↓ 左上WordPressアイコンのHTML
<a class="ab-item" aria-haspopup="true" href="http://www.jis-school.jp/wp-admin/about.php"><span class="ab-icon" aria-hidden="true"></span><span class="screen-reader-text">WordPress について</span></a>
↓ アイコン表示に使われてたCSS
#wpadminbar #wp-admin-bar-wp-logo>.ab-item .ab-icon:before {
content: "\f120";
top: 2px;
}
どうやら .ab-icon というのがアイコン共通のクラス名で、あとはそれを囲んでる要素のID・クラスで表示するアイコンを変えてるみたいです。
上記CSSの content: "\f120";
みたいなのがアイコンの中身を表す記号なんですが、その読み込みに失敗しているようでした。その修正が必要だと判明します。
それでググってみたところ・・・
WPではDashiconsでアイコン表示してるようです。
↓ WP開発者向けの解説
Dashicons is the official icon font of the WordPress admin as of 3.8.The Dashicons project is no longer accepting icon requests.
↓ このようなことが書いてある
DashiconsはWordPress3.8以降の公式なアイコンフォントです。ただしDashiconsプロジェクトは新しいアイコンの追加に応じるということはありません。
独自のアイコンセットを使用してたんですね。
だから明示的にfont-familyを指定すれば解決します。
具体的にはテーマに直接コード追加します。
追加場所は使用中テーマの functions.php です。
▼ fucntions.phpに以下PHPコードを追加
/***
* 管理画面のアイコン非表示を修正
***/
add_action('admin_head', 'fkr_custom_stylesheet');
function fkr_custom_stylesheet() {
echo <<<EOM
<style>
.ab-icon::before,
.mce-ico::before{
font-family: 'dashicons'
}
</style>
EOM;
}
単純に管理画面ヘッダーでCSS出力し、その中で font-family: 'dashicons'
をアイコン要素に指定しているだけです。これで正常にアイコン表示されるようになりました。
ただし慎重に追加してください!
もし上コードの意味が全く分からず、「PHPってなに? functions.phpってなに? ( ゚д゚)」という理解度なら絶対に試さないでください。自己責任でお願いします。
アイコン表示されないなら、この方法を試してください。
でもどうしても自力で解決が難しいなら・・・
こういったサービスでの相談も受け付けています。
↓ WordPressのトラブル解決相談始めました!
こんにちは、フク郎という者です。WordPressでこういうトラブルに遭遇したことないですか? 突然画面が真っ白になった ブログのデザインが崩れてしまった なぜかログインできなくなった カスタマイズが上手くいかない・・・なんでもググれば解決する世の中とはいえ・・・なかには自分の知識ではどうしようもない悩みってあるはずです。 そこで!WordPressのトラブル解決相談をココナラで始めました。↓ こちらのサービスWordPressトラブルの相談・解決します なんでも相談OK!作業の代行依頼も可能です!function(d,s,id){var j... WordPressのトラブル解決相談始めました! - Fukuro Press |
もちろん以下のような問題にも対応可能です。
以上、WP管理画面でアイコン表示されない対処法でした。
The post WordPress管理画面でアイコン表示されない時の簡単な対処法 first appeared on Fukuro Press.
]]>The post WordPressで見出し横にアイコン画像を表示する方法 first appeared on Fukuro Press.
]]>h1タグやh2タグで作られる見出しに画像を表示すると見出しをより強調することができます。
例えば次のように見出しの横にチェックマークをつけるとそのタイトル下の内容がチェックすべき内容だとはっきり分かりますよね。
別にタイトルの横に画像が無くても内容は伝わりますが、読者に分かりやすく伝えたいならこのような工夫も必要です。
そこでここではWordPressでh2やh3などのタイトル横に画像を表示する方法を解説します。
まず最初にアイコンをダウンロードできる便利なサイトをいくつか紹介します。全て商用利用OKなサイトなので見出し横のアイコンを探すのにどうぞ
多くのクリエイターが所属していてアイコン素材も見つかりやすいサイト。
画像は加工・編集・商用利用OKで、使用時に著作権やライセンスを明記する必要もありません。ダウンロードできる画像の種類はJPEG、PNG、AI-EPSの3種類に対応しています。
とにかく素材数が豊富なので素材探しに役立つこと間違いなしです。
アイコンのサイズや色などを変更してアイコンをダウンロードできるサイト
チェックマークを始め記号系素材も豊富なのでタイトル横に表示するアイコンも見つけやすいです。商用利用OKで著作権・ライセンスの明記も必要ないので安心して使えます。
基本的に使用報告の必要なしで無料アイコンをダウンロードできるサイト
アイコンサイズは16・32・48・128・256・512ピクセルの中から選択可能。複雑すぎず縮小しても見やすいシンプルなアイコンが手に入ります。
これ以外の画像素材サイトについては次記事で詳しくまとめました。
著作権表示などは一切必要ないので安心して利用可能です。もし素材探しに困っているならこちらの記事も是非ご覧ください。
ではアイコンが用意できたらそれを見出し横に表示する設定をしていきましょう。
その手順を簡単に説明すると次の通り
まずタイトル横に表示するアイコン画像をアップロードします。
メニューから「メディア」ー>「ライブラリ」を選択し、そこで画像をアップロードしてください。
アップロードしたらメディアライブラリ内でアップロードした画像をクリックすると「添付ファイルの詳細」が出てくるのでその中で「URL」の右に表示されているURLをコピーしてください。下の画像でオレンジ色の枠で囲った部分です。
このURLがタイトル横に表示される画像のURLです。
次にWordPressのヘッダーでカスタムCSSを追加するために「Simple Custom CSS and JS」というプラグインをインストールします。
メニューから「プラグイン」ー>「新規追加」と進み、プラグイン名で検索すると検索結果にプラグインが表示されるので「今すぐインストール」を押してインストールしてください。
ダウンロードして使う場合は以下のプラグインページからダウンロード可能です。
https://ja.wordpress.org/plugins/custom-css-js/
インストールしたら「有効化」ボタンを押して有効化するのを忘れないでください。
別にプラグインを使わなくてもテーマや子テーマのstyle.cssにCSSコードを追加することもできますが、テーマがもし変わった時にカスタムCSSを追加しなおさなくて済むようにプラグインを使います。
ではメニューから「Custom CSS & JS」ー>「Add Custom CSS」を選択してください。
すると次のようなカスタムCSSの編集画面が出てきます。
「ここにタイトルを入力」という欄にカスタムCSSの名前を入力して、その下のCSSコードの入力欄にカスタムCSSコードを入力します。
次がh3タグによる見出しの横にアイコンを表示するカスタムCSSです。このCSSコードをカスタムCSSコードの入力欄に追加しましょう。
h3.check{
font-size: 24px;
}
h3.check:before{
content: "";
display: inline-block;
width: 18px; height: 18px;
background-image: url("[コピーしたURL]");
background-size: 18px;
background-repeat:no-repeat;
vertical-align: middle;
padding-right: 6px;
}
ただし [コピーしたURL]
は先ほどコピーした画像URLに書き換えてください。
上記のようなカスタムCSSを追加したら「公開」ボタンを押してカスタムCSSを公開すればOKです。
そして横にアイコン付きの見出しを表示するには投稿の編集画面でHTMLエディタを開き、次のようにh3タグに「check」というクラス名を指定します。
<h3 class="check">チェック項目</h3>
この見出しはカスタムCSSが適用されるので次のように横にアイコンが表示されるようになります。
以上が見出し横にアイコンを表示する手順です。
シンプルな見出しだとちょっと物足りないな、と感じたらチェックマークなどのアイコンをつけると他と差別化できて分かりやすいですよね。
少しCSSの知識が要りますが、基本コピペでOKなので見出しを目立たせたいときにこのテクニックが役立つと思います。
以上WordPressで見出し横にアイコン画像を表示する方法についてでした。
The post WordPressで見出し横にアイコン画像を表示する方法 first appeared on Fukuro Press.
]]>