最近、目の調子が悪くて更新頻度がおちています ><

サイトアイコン(ファビコン)を簡単に設定する

スポンサーリンク

サイトアイコン(ファビコン)て何?

サイトアイコン(ファビコン)とは、ブラウザのタブや、ブックマークの先頭に表示されるWebサイトのシンボルマークの事です。

サイトアイコン

スマートフォンやタブレットの場合だと

こんな感じに表示されるアイコンの事です。

以前はファビコン(Favicon)を設置する場合、「16×16px」や「32×32px」などの小さな画像を用意したり、プラグインを利用したり、ファイル形式を.icoに変換したり…

何かと大変だったのですが…

WordPress 4.3日本語版から、サイトアイコン(ファビコン)の設定が簡単に出来るようになりました。

画像さえ用意しておけば、あっ!という間に設定できます。

早速、サイトアイコンを表示させてみましょう。

※WordPress バージョン4.3 以降にアップデートしておいて下さい。
スポンサーリンク

サイトアイコン用の画像を用意する

  • 推奨サイズは512×512pxです。(ピッタリサイズを用意しておくと設定が簡単)
  • 512×512pxサイズ以外の画像をアップした時には、画像選択時に「画像切り抜き」が使えます。
  • 実際にブラウザのタブに表示されるサイズは、16×16pxと非常に小さいサイズですので、シンプルでわかりやすいマークや文字、背景色などを考えて作りましょう。
  • png画像で背景を透過にした場合、iPhoneなどでは背景が黒になってしまいます。
Simplicityをお使いの場合は「ダッシュボード」→「外観」→「カスタマイズ」→「その他」からの設定で『アップルタッチアイコン(png推奨)』を設定する事ができます。

サイトアイコンを設定する

ぴったりサイズの画像(512×512px)を用意した場合

  • 「ダッシュボード」→「メディア」→「新規追加」から用意した画像をアップロードします。
  • 「ダッシュボード」→「外観」→「カスタマイズ」→「サイト基本情報」をクリックし、「画像を選択」からアップロードした画像を選択し、【保存して公開】をクリックすれば完了です。

※ブラウザで表示されないときは F5 でリロード(再読み込み)してみて下さい。

(512×512px)以外の画像を用意した場合

  • 「ダッシュボード」→「メディア」→「新規追加」から画像をアップロードします。
  • 「ダッシュボード」→「外観」→「カスタマイズ」→「サイト基本情報」をクリックし、「画像を選択」からアップロードした画像を選択します。

  • 「画像切り抜き」画面に切り替わるので、右側のプレビュー画面を見ながら調整し、最後に右下の「画像切り抜き」をクリックします。

  • 【保存して公開】をクリックすれば完了です。

サイトアイコンがあると印象が違いますよ~
是非、素敵なサイトアイコンを作ってみてくださいね~ (*^^*)

【CSS】シンプルな囲み枠(ボックス)コピペですぐ使える
飾り枠を使って文中や文末に関連記事・まとめ記事、Pickupなど、さり気なく目立たせたい!シンプルで無難な囲み枠・囲い枠(ボックス)を紹介します。CSS・HTMLをコピペでOK!色や太さをお好みでカスタマイズして使って下さいね。新作『黒板風(チョーク付)』と『ホワイトボード風(マーカー付)』自分で作っておいてナンですが…気に入ってます(笑)
「蛍光ペン」っぽいアンダーラインマーカーで文字を装飾する
「明るい色」「パステル系の淡い色」「モノトーン」「ダーク」のアンダーラインマーカー(蛍光ペン)を作りました。記事を差別化したりテーマやスキンに合わせて使い分けてみてはいかがですか?スタイルシートにコピペするだけで簡単に使えます。
トップへ戻る