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

サイトアイコン（ファビコン）て何？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（512×512px）以外の画像を用意した場合

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

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

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

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

【CSS】シンプルな囲み枠（ボックス）コピペですぐ使える

飾り枠を使って文中や文末に関連記事・まとめ記事、Pickupなど、さり気なく目立たせたい！シンプルで無難な囲み枠・囲い枠（ボックス）を紹介します。CSS・HTMLをコピペでOK！色や太さをお好みでカスタマイズして使って下さいね。新作『黒板風（チョーク付）』と『ホワイトボード風（マーカー付）』自分で作っておいてナンですが…気に入ってます（笑）

love-wave.com

2020.11.24

「蛍光ペン」っぽいアンダーラインマーカーで文字を装飾する

「明るい色」「パステル系の淡い色」「モノトーン」「ダーク」のアンダーラインマーカー（蛍光ペン）を作りました。記事を差別化したりテーマやスキンに合わせて使い分けてみてはいかがですか？スタイルシートにコピペするだけで簡単に使えます。

love-wave.com

2018.06.11