ブックマークアイコン(ファビコン)をwordpress.comで表示する方法

2013/07/22 2014/11/22

WordPressでお気に入りアイコン(ファビコン)を
表示する方法は、探すと様々な方法で出てきます。

ですが、wordpress.comとなるとどうも普及していないのか、
ガクッっと情報量が減ってしまうような気がします。
※wordpress.comは、wordpressによる運営の無料ブログサービスです。

サイトが見にくいデザインですみません。
テンプレートの変更もCSS編集も・・・有料でして何もできません(涙)

このwordpress.comですが、
一度でもwordpressを利用してブログ運営などを経験した人には、
いろいろと制約があって使いづらいといったところでしょうね。
ただここにしかないような機能もあるのですが。

本投稿のお気に入りアイコン(ファビコン)を表示するといった内容もその一つです。

本投稿は以下投稿の詳細ページになります。

各社の違いについてご興味がおありでしたら、
お読みいただけると嬉しいです。

はじめに

まだ立ち上げたばかり私のブログにお越しいただき、
ありがとうございます。
管理者アルゴリズンです。よろしくお願いします。

wordpress.comでファビコンを表示する方法です。
ファビコンとはお気に入りアイコンという、
タブやお気に入りで表示されるアイコンのことで、
wordpress.comの場合大半が「W」の
水色アイコンが表示されていると思います。
これを独自のアイコンにしてしまおうということです。

WordPress.comファビコン

wordpress.comではアップロードした画像ファイルを、
ページの表示に合わせてトリミングを指定したのち、
アイコンサイズに合わせた16px表示になるようにページ生成を行ってくれます。
必要以上に大きすぎない正方形画像を用意すれば問題ありません。

以下の説明に関わらず作成方法はお任せします。
ご参考まで。

今回作成に利用したファイルは、
私は今回、以下の72px x 72pxのpng画像を利用しました。

wordpress.comでは特にico形式のファイルの
アップロードが認められていないので、
ファイルのico化は必要ありません。
type=”image/x-icon” 指定でInternetExploreにも対応ができています。

icoファイルアップロードエラー

wordpress.comのダッシュボードを開き、
[設定]－[一般]を選択します。

一般設定画面

一般設定画面の右に表示された[ブログ画像]のエリアの
[ファイルを選択]をクリックし画像ファイルを指定します。
[画像をアップロード]をクリックしアップロードを開始します。

ブログ画像選択エリア

アバターとして使いたい画像の部分をマウスで指定します。
画像すべてを利用する場合には特に変更は必要ありません。
そのまま[画像の切り抜き]をクリックします。

画像のトリミング指定

「画面にすべて完了しました」と表示され、
複数のサイズの画像が表示されていれば、設定は完了です。

完了メッセージ

メッセージ内に以下のように記載があります。
「blavatar画像にアップロードしましたので、もうすぐ、WordPress.com上で見ることができるはずです。」

私はてっきりgravatarだと思い込んでいましたが、
wordpress.comが利用する為の、アバターやファビコン置き場の名称のようです。

このサイトのファビコンリンクタグは以下のようなURLになっています。
<link rel=”shortcut icon” type=”image/x-icon” href=”http://1.gravatar.com/blavatar/3c81a8abfa9e4cd968e3b7d18696f80d?s=16” sizes=”16×16″>