こんにちは。IT系ワーママのりょうこです
はりきってブログを始めてみたものの、WordPressの設定箇所が多すぎて困っていませんか。
実はブログには始めたばかりの人が忘れがちな、サイトのブランドイメージを左右する設定があります。
なぜなら、読者さんがブログを表示したときにとても目にとまる場所に表示だからです。
私は仕事がらWordPressの質問をうけることが多いのですが、質問をいただいたサイトをはじめ、日々目にするブロガーさんサイトの多くでこの設定がされておらずとっても気になっています。
この記事では、WordPressの「サイトアイコン」（ファビコンとも呼ばれます）の設定方法を説明しています。
この記事を読むと、WordPressで作った大切なサイトを初心者っぽさから卒業させることができます。
難しい手順はありませんので、ぜひ設定してみてくださいね。
この記事を読むとこんなことがわかります。
- WordPressの標準機能でサイトアイコンを設定する方法
- サイトアイコンの簡単な作り方
WordPressの標準機能でサイトアイコンを設定する方法
サイトアイコンとは何でしょうか。
どのような所に表示されるのか、その設定方法をご紹介します。
サイトアイコン（ファビコン）とは
Webページを参照しているとき、Webブラウザのタブの左端にアイコン画像が表示されます。
これがサイトアイコンやファビコンやfaviconと呼ばれるアイコンです。（※この記事ではWordPress上の表記のサイトアイコンと表記します）
サイトアイコンは、Webブラウザのタブだけでなく、ブックマーク（お気に入り）や履歴メニューにも表示されます。
また、スマホの場合はホーム画面にブックマークしたときに使用され、とても目立ちます。
Wikipediaに下記の記載があるとおり、サイトアイコン（ファビコン）はサイトのシンボルマークです。会社でいえばロゴマーク。そのロゴを見ればすぐに「あ、あの会社だ」とわかってもらえるような、サイトの顔の役割をしています。
favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。
引用：Wikipedia-Favicon
読者さんの目にとまり、また来てもらえるように印象的なサイトアイコンを設定したいですよね。
サイトアイコンを設定しないと
WordPress バージョン5.4からは、サイトアイコンを設定しないと自動でデフォルトアイコンが設定・表示されるようになりました。（以前は設定しなければWordPressのサイトはサイトアイコンが表示されなかったそうです）
自動で設定されるサイトアイコン、見覚えありませんか。
テーマにCocoonを使用すると、デフォルトは下記のアイコンになります。こちらも個人ブログを見ているとよく目にしますね。
デフォルトのアイコンのままにしておくと、多くの他の人のサイトと同じになってしまいタブに並んでも見分けがつきません。
オリジナルのサイトアイコンを設定するようにしましょう。
サイトアイコンを作成する
まずはサイトアイコンに必要な画像を用意しましょう。
サイトアイコンは非常に小さく表示されるため、シンプルなデザインがオススメです。
サイトのシンボルマークですので、サイトのテーマカラーを使用するなど、あなたのサイトをすぐイメージできるようなデザインにしましょう
下記の条件を満たした画像を作成します。
- 画像サイズ：512×512ピクセル以上の正方形
- 画像形式：PNG
サイトアイコン自作する
わたしは、ブロガーに人気のCanvaを使用して作成しています。CanvaはWebブラウザ上で使用できるため、インストール作業が不要でとても便利です。（無料版でも十分な機能がありますが、一度有料版を体験すると便利すぎて戻れません。）
カスタムサイズで512×512ピクセルのファイルを新規作成。
背景をサイトのテーマカラーで塗りつぶし、トップページで使用している素材を少し加工して貼り付けています。
いろいろなサイトの素敵なサイトアイコンを見て参考にしながら、アイディアをふくらませて見て下さい。
アルファベット1文字をデザインしているところも多いですよね。
フリーの素材サイトを使う
フリーのアイコン素材サイトやロゴ作成サイトもあります。いくつかご紹介します。
WordPressでサイトアイコンを設定する
それではWordPress内でサイトアイコンを設定していきましょう。
以前は、phpファイルを編集したりプラグインを使用したりする必要があったようですが、2022年2月現在最新のWordPressでは、管理画面に標準で備わっているサイトアイコン設定機能で簡単に設定できます。
説明画像ではWordPressテーマSWELLを使用していますが、他のテーマでも操作は同じです。手順で選択する以外のメニュー名で異なる部分がありますが、気にせず進んで下さい。
１）WordPressの管理コンソールから「外観」⇒「カスタマイズ」を選択します。
２）「WordPress設定」を選択します。
３）「サイト基本情報」を選択します。
４）「サイトアイコンを選択」を選択します。
５）メディアライブラリに事前に作成した画像をアップロードします。
６）５でアップロードした画像を選択して、「選択」ボタンをクリックします。
７）「画像切り抜き」・「切り抜かない」をお好みで選択します。
サイトアイコンとして作成した512×512ピクセルの画像であれば切り抜く必要はありません。
８）「公開」ボタンを押すと、公開されます。
９）トップページを表示させ、正しく設定されていることを確認してください。
まとめ：サイトの顔であるサイトアイコンを作成・設定しよう
Webページを参照しているときに、Webブラウザのタブなどに表示されるアイコンはサイトアイコン（ファビコン）と呼ばれ、大切なサイトの顔です。
サイトのイメージカラーなどを使用したシンプルな画像を作成して、WordPressに設定しましょう。
WordPressの管理画面から下記の手順で設定できます。ぜひチャレンジしてみてください。
- 「外観」⇒「カスタマイズ」
- 「WordPressの設定」
- 「サイト基本情報」
- 「サイトアイコンを選択」
- メディアライブラリにファイルをアップロード⇒「選択」
- 「公開」
＼ブロガーの味方Canva Proなら素材使い放題♪／
コメント