ワードプレス(WordPress)でブログのサイトアイコン(ファビコン)とロゴを設定する方法【ワードプレス(WordPress)】【SANGO】【ブログ】

今回はワードプレス(WordPress)でサイトアイコン(ファビコン)を設定する方法を記事にしました。

インターネットブラウザなどでタブなどに表示されているアイコンの事です。

(・ω・)ノ

 

上記画像ですと、開いているページタブの名称の左側に表示されている小さいアイコンの事ですね。

やる夫RSS+インデックスさんだと「w」を丸くしたようなやる夫の口のようなアイコン、FC2ブログさんのまとめサイトさんですとFC2ブログ用のユニコーンの顔のマークですね。

これがサイトアイコン、ファビコンです。

(*´ー｀*)

ファビコンはfavorite icon…お気に入りアイコンの略だそうです。

ちなみに冬色はファビコンの名称は知らなかったです。

(°▽°)

日夜ブログを更新している冬色ですが、インターネットブラウザのタブに表示されるアイコンが常にワードプレスさんのデフォルトアイコンでした。「W」を装飾したシンプルなデザインのアイコンですね。

ブログを始めた当初は気にしていませんでしたが、他の人のブログを確認していた時にブログアイコンってもしかして重要かなーと思う事がありました。

( ´∀｀)σ)∀`)

という訳で今回ブログのアイコンを変更してみる事にしたので、その事を記事にしました。

アイコンについて調べている時に、ワードプレス(WordPress)でサイトのロゴも変更できる事が分かりましたのでその事も一緒に解説したいと思います。

(/・ω・)/ﾜｰｲ

まずはワードプレス(WordPress)の管理画面から下記のように移動します。

(・ω・)ノ

1. 「外観」
2. 「カスタマイズ」
3. 「サイトの基本情報」
4. 「基本情報とロゴの設定」

画像ですと下記のように移動します。

ワードプレス(WordPress)のメニューから「外観」→「カスタマイズ」。

 

カスタイマイズのページへ移動したら「サイトの基本情報」→「基本情報とロゴの設定」の順に移動します。

 

 

「基本情報とロゴの設定」

ワードプレス(WordPress)の「基本情報とロゴの設定」の設定画面まで行くと、変更できる内容にサイトのロゴとアイコンが存在します。

最初はアイコンの変更だけが目的で調べていましたが、ここでサイトのロゴも変更できるという事でアイコンの変更のついでにロゴも変更してしまう事にしました。

(/・ω・)/ﾜｰｲ

サイトアイコン

 

サイトアイコンの変更は「基本情報とロゴの設定」のメニューの一番下にあります。

ここにサイトアイコン画像を設定するだけですねー。

(*´ー｀*)

 

という訳で「サイトアイコンを選択」ボタンを押して、用意しておいたサイトアイコンに設定したい画像を選択です。

画像の選択画面はワードプレス(WordPress)の記事に画像を登録するのと同様の操作となります。

ヽ(´▽｀)/

 

上記のようにサイトアイコンのプレビューが表示され、画像がちゃんと設定できている事が確認できると完成ですね。

(/・ω・)/ﾜｰｲ

 

インターネットブラウザのタブを確認してみると上記のように更新されている事が分かります。

…ちょっと文字とか全体的に小さいですね。

(;´-ω-`)

 

すぐに修正できる可能範囲かなーと画像の文字とアイコンを大きめにしてみました。

縮小されるとあまり変わらない気がしますがちょこっとだけ改善した気がします。

折角アイコンを作ったので暫くはこのままでいこうと思います。

(・ω・)ノ

テーマ：SANGO

冬色はワードプレス(WordPress)さんでは有料テーマである「SANGO」さんのテーマを使用させていただいています。

テーマを導入した事でワードプレス(WordPress)の設定画面もデフォルト表示から若干変わっているかもしれません。

それでも今回のロゴとアイコンの場所は、調べた限りだと使用しているテーマに関わらず同様の操作で行えると思います。

(・ω・)ノ

「ロゴ」は文字をイラスト化した物だそうです。

シンプルですがサイトのイメージを象徴する大事な要素ですね。

(・ω・)ノ

今回はサイトアイコンの変更が目的でしたが、ワードプレス(WordPress)でのロゴの設定場所も想定外ですが分かったので一緒にロゴも一緒に設定してみました。

 

サイトアイコンと同様に下記の順番でアクセスしていき「基本情報とロゴの設定」のページまで移動します。

1. 「外観」
2. 「カスタマイズ」
3. 「サイトの基本情報」
4. 「基本情報とロゴの設定」

「基本情報とロゴの設定」の真ん中あたりにロゴの設定をするメニューが存在します。

「ロゴ画像を登録」と「ロゴ画像を登録（メディア）」の二つが存在します。

説明を読むと「ロゴ画像を登録」の方はセキュリティー上お勧めできないという事なので、「ロゴ画像を登録（メディア）」からロゴの画像を登録します。

 

アイコン設定と同様に用意していた画像をロゴとして設定してあると、ロゴの設定は完了となります。

(/・ω・)/ﾜｰｲ

アイコンもロゴも設定場所さえ分かってしまえばサクサク変更できましたね。

(*´ω`*)

アイコンとロゴですがやっぱりもう少し直した方が良いかなーと思いまして、記事を書いている時に修正しておきました。

(∩´∀｀)∩ﾜｰｲ

ロゴ

パンダはもう少し大きくても良かったかなーと言う出来。

最初のロゴのようにカラフルなオシャレ文字は使ってみたかったですが、やはり見難いのは問題かなと。

(/ω＼)

という訳でシンプルなものに変更しました。

(∩´∀｀)∩ﾜｰｲ

 

アイコン

こちらのアイコンも色々シンプルに変更しました。

最初に入れていたオシャレな枠も削除です。

(`･Д･)ノ=☆ﾊｧｯ

本当にインターネットブラウザのタブに表示されるくらい小さくなると、細かい部分は色々と潰れて表示されてしまいますね。

σ(^_^;)

なんというか本来はオシャレなはずの細かい装飾とかは、本当に見難いだけになってしまっていましたね。

(°▽°)

あまりアイコンとロゴに拘ると時間が溶けますので、今回はこのくらいにしておきます。

(´▽｀)

ボタンの推し忘れ

ワードプレス(WordPress)の「基本情報とロゴの設定」メニューの一番上の「公開」ボタンを押さないと、サイト側に今回設定した情報が反映されません。

冬色もアイコンとロゴが変更されずに困っていたのですが、調べたら単純にボタンの押し忘れでした。

_(:3 」∠)_

「基本情報とロゴの設定」を変更する時は「公開」ボタンの押し忘れに注意しましょうねー。

 

上記画像のように「公開」ボタンが「公開済み」になっていれば反映が終わっていると思います。

(￣^￣)ゞ

ブラウザのキャッシュ

サイトアイコンが更新されていることを確認する時に、インターネットブラウザのキャッシュが更新されていないとサイトアイコンが正しく更新されずに古いアイコンが表示される事があります。

その可能性がある場合は使用しているブラウザのキャッシュをクリアしてあげると良いかと。

クリアしてあげればブラウザは最新の情報を取得し直すので、現在設定されているサイトアイコンが表示されるようになります。

(・ω・)ノ

最近だと複数のブラウザを使用するのも大した手間でもないので、普段使用しているブラウザでキャッシュクリアするのが難しい場合は普段使い以外のインターネットブラウザで自分のサイトを確認するという手もありですね。

冬色が普段から利用させていただいているサイトさんです。

(・ω・)ノ

普段は記事のアイキャッチなどを作成するのに利用させていただいています。

今回もアイコンとロゴの作成に使用させていただきましたのでご紹介。

ヾ(〃^∇^)ﾉわぁい♪

canva

 

canvaさんは大手の画像加工サイトさんです。

最初に何の画像を作成するかを選んだ後、画像を加工するペインターを使用できるようになります。

素材も豊富なので、このcanvaさんだけでも画像を自作する事ができますね。

ヽ(´▽｀)/

一部の機能や素材が有料コンテンツですが、全然フリーの範囲でも使えるサイトさん。

冬色も記事のアイキャッチ画像の編集によく利用させて頂いています。

イラストAC

イラストACさんはイラストメインの素材サイトさん。

(￣^￣)ゞ

こちらも普段からブログのアイキャッチの素材に使わせて頂いています。

やはりこちらも一部の機能や素材が有料コンテンツとなっていますが、少しだけ使う分には無料使用の範囲で十分対応できます。

冬色のブログ冬色工房のアイキャッチの画像はだいたいイラストACさんの素材です。

アイキャッチに使用しているパンダとかかわいい女の子とかがそうですねー。

(*´ー｀*)

フォトAC

フォトACさんはイラストACさんのようなイラスト素材さんでは無く、イラストACさんのフォト系の写真素材版と言う感じのサイトさんです。

基本冬色はブログの素材はイラスト系を使っていますが、背景などは稀に写真の方を使わせていただく事も。

好みによってイラストACさんとフォトACさんを使い分けると良いかなと。

o(^▽^)o