ワードプレスでファビコンを設定する方法。ワードプレスに「ファビコン」を設定することで、ユーザーに覚えて貰いやすくなります。今回は、ワードプレスでファビコンを設定する方法について書いていきます。
Webブラウザのタブ上におけるアイコンのことを「ファビコン」もしくは「サイトアイコン」と言います。ここでは「ファビコン」とします。あなたオリジナルの「ファビコン」を設定し、印象的に演出してみよう。
| 結論を先に話ししておきます |
| 「ファビコン/favicon」は「Favorite icon」つまり、お気に入りのアイコンと言う言葉を省略したものであり、ワードプレスの運営者が、Webページに設置する「シンボルマーク」のことを指します。
メインとしては「アドレスバー」「ブラウザのタブ」「スマートフォンでWebページをホーム画面に置いた際に表示されるアイコン」などを言います。あなた自身で様々なWebページを開いて見ると分かります。
「ファビコン」のメリットとしては、沢山のタブを開いている際、そのタブがどのページかユーザー側が分かりやすいことです。ページを「ファビコン」によって、認識して貰うことで、リピートに繋げることができます。
以前投稿した下記の記事にも目を通して貰えると幸いです。 |
目次はコチラ
【ファビコンとは】
「ファビコン」とは、Webブラウザでページを開いた時、タブの部分に表示されるアイコンのことを意味します。例えばですが「ファビコン」は、ページを判別する際の目印にもなると言う訳です。
タブを開きすぎて、見たいWebサイトがどのタブなのか見失ってしまったと言う経験をしたことはないでしょうか？「ファビコン」を目印に、目当てのWebサイトを見つけて貰うことも視野に入れましょう。
| ユーザーがWebサイトをお気に入りに登録した際にも「ファビコン」があるのと無いのとでは、その印象と見つけやすさが変わってきます。 |
【ファビコンを作成するメリット】
「ファビコン」は、冒頭でもお伝えしたように、検索結果にも表示され、閲覧中のタブにも表示されることが分かります。その為、潜在層に対し、あなた自身のブログを認知させることができます。
更に言えば、ブランディング目的でSNSを運用しているのであれば、SNSに於いて、目に触れる可能性も「0/ゼロ」ではありません。と言うことは、見たことのある「ファビコン」があると親近感も沸きます。
それが徐々にリピート化させることにも繋がります。特にブログタイトルや社名の頭文字を分かりやすく目立つ配色によってシンボル化し「ファビコン」に設定しておくことが重要で、このブログなら信頼できると思わせましょう。
| 中身の濃いコンテンツを作り込み、日々ブラッシュアップさせることは、ブログを運営するに当たって根幹となる考え方であって、質の高いコンテンツがあってこそのブランディングと言うことを念頭に置きましょう。また中見が薄いとユーザーは付きにくいです。 |
【ファビコンが表示される場所】
「ファビコン」が表示される場所については、下記を参考にしてみて下さい。一応大きく分けると「パソコン用(タブ・検索結果)」「スマホ用(ショートカット作成時)」の2パターンがあります。
念の為、記載しておきましょう。「ブラウザのタブ」「スマホからショートカットを作成したアイコン」「ブックマークしたページタイトルの左側」「検索結果ページにおけるタイトルの左側」です。
| 2パターンあると言っても現在では、様々なサイズのデバイスがあり「ファビコン」のサイズも20以上あると言われています。全てに於いて、細かく対策するのであれば、各種サイズの異なる「ファビコン」を用意する必要があります。
ですが、各種の「ファビコン」に対し、対応するサイズを予め知っておけば、押さえておきたい最大のサイズで画像を準備しておくと、自動で縮小され、表示されますので、作業的には少ない行程で済むはずです。 |
他にも「Windowsのスタートメニューに表示されるパネル」「タスクバーにピン留めした際に表示される画像」もありますが、そこまでして対応する必要があるのかどうかは検討次第と言うことになります。
【効果的なファビコン作成のコツ】
単純に「ファビコン」を作成さえすれば良いと言う訳ではなく「ファビコン」を表示させるだけでは、メリットを活かすことはできません。最も効果的な「ファビコン」を作成する為のコツを紹介します。
そのコツとは、3つほどあります。その3つとは「なるべく目立つようなデザインにする」「なるべくワードプレスの内容を表したものにする」「なるべくシンプルで見やすいものにする」と言ったような感じです。
当ブログ(miブログ)の「ファビコン」は となっています。正に上記の3つに該当している通りです。 |
なるべく目立つようなデザインにする
一人でも多くのユーザーに対し「興味・関心」を持って貰い、目に止まりやすい「ファビコン」にする為には、どうしたら良いのでしょうか。答えは簡単です。それは「なるべく目立つようなデザインにする」ことです。
とは言え、派手な色やデザインにすれば良い訳ではなく、あまり使われていない色やデザインを選ぶことが大切です。例えばですが、カラフルで色味のある「ファビコン」が多いのであれば、あえて地味な色を使います。
なるべくワードプレスの内容を表したものにする
ワードプレスの内容と全く関係のないデザインにしてしまうと、ブランディングにしても、クリック率にしても、不利になることは明白です。「ファビコン」は、そのワードプレスの内容を端的に表わすものにしましょう。
また、企業のロゴやブログのロゴに対して「デザイン」や「色味」との統一感も大切と考えます。特にタイトルに於いて、ロゴ作成をしている場合など「デザイン」や「色味」をしっかり考えた方が良いと思います。
なるべくシンプルで見やすいものにする
ネットサーフィンなどしていると、度々見かける「ファビコン」ですが、実際に見てもお分かりのように「ファビコン」の表示はとても小さい為、複雑なデザインにすると、そこに何が描かれているのか理解できなくなります。
その為「ファビコン」は、なるべくシンプルで見やすいものにした方が、ユーザーにも親切ですから、誰が見ても見やすいデザインにすることをおススメします。そのことからもデザインのこだわりには注意しましょう。
【ファビコンを設置するプラグイン】
この章では、ワードプレスに「ファビコン」を設置する為のプラグインを2つ紹介していきますが、この後、プラグインは一切使わず、ワードプレスにデフォルトで入っている「サイトアイコンを選択」を紹介していきます。
一応ここでは「Favicon Rotator」と「Favicon by RealFaviconGenerator」について解説していきます。ぶっちゃけプラグインを使わなくても、次の章に於いて、図解入りで紹介しているやり方の方が簡単で楽です。
Favicon Rotator
「Favicon Rotator」は、ワードプレスの「ファビコン」を簡単にカスタマイズすることが可能となるプラグインです。ワードプレスの管理ページから、アイコンを追加するだけで「ファビコン」を表示することができます。
| Favicon Rotatorの特徴 |
|
Favicon by RealFaviconGenerator
「Favicon by RealFaviconGenerator」は「デスクトップパソコン用のブラウザー」「iPhone」「iPad」「Android端末」「Windows8」「タブレット」などで使う「ファビコン」を生成し、利用可能にします。
| 「Favicon by RealFaviconGenerator」は、数秒で全ての主要なプラットフォームに於いて、綺麗に表示されるアイコンを生成します。また連携機能を使って、調査と画像編集の時間を節約することも可能です。
|
【ファビコンの作成・設定方法(動画付き)】
基本的に「ファビコン」のファイルフォーマットは「ico」で書き出す必要があります。中には「png対応」しているブラウザもあります。またバージョンによって異なる為「ico形式」の方が簡潔の場合もあります。
では実際に、図解を用いながら「ファビコン」の設定について書いていきます。「ファビコン」の設定をする際、通常であれば、ツールを使ったりする訳ですが、この章では一切使いません。
| 「ファビコン」を設定したい場合のサイズですが、スマートフォンで見た時のサイズも考え「512×512」の画像を予め作成しておいて下さい。画像を作成したら、ワードプレス内の「メディア」に保存しておきましょう。 |
まず初めに動画を視聴してみて下さい。題して「WordPressでサイトアイコン(ファビコン)を設定する方法」です。
- ワードプレスにログイン後「赤色枠」で囲まれている「外観」にマウスを移動すると、プルダウンメニューが表示されます。次に「オレンジ色枠」で囲まれている「カスタマイズ」を押しましょう。
- カスタマイズを開くと、下記のような画面へと移動します。「黄色枠」で囲まれている「サイト基本情報」を開いて下さい。
- サイト基本情報を開くと「水色枠」で囲まれている「サイトアイコンを選択」があるので押して下さい。
- すると、予め画像を作成し、保存してある「メディアライブラリー」画面へと移動します。ここでは、下記の画像(mi)を選択してみました。最後に「紫色枠」で囲まれている「選択」を押しましょう。
- 次の画面では「桃色枠」で囲まれているように、作成した「ファビコン」が表示されています。最後に「水色枠」で囲まれている「公開」を押しましょう。
- 公開を押すと「赤色枠」で囲まれているように「公開済み」となりました。
- では最後に、ワードプレスのトップページを開き「緑色枠」で囲まれているように、作成した「ファビコン」が表示されていることが分かります。
- スマートフォンの方も確認してみましょう。「緑色枠」で囲まれている「ファビコン」のアイコンが出来上がりました。
| もう一度書いておきますが「ファビコン」を設定することで、あなたのブログを見つけやすくなります。 |
今回は以上となります。ワードプレスでファビコンを設定する方法については理解して頂けたでしょうか。この機会に是非「ファビコン」の設定をおこなってみて下さい。もしかしたらアクセスが増えるかも知れません。
以前投稿した下記の記事にも目を通して貰えると幸いです。
