頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

Google or AdMax Promotion(it)

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

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

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

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

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

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


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

はじめに

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

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

01_WordPress.comファビコン

WordPress.comファビコン

概略

  • ファビコンに設定したい画像(jpeg/png)を用意
  • 設定からファビコンにしたい画像を指定
  • 反映されるまで数時間待つ
  • アイコン画像の準備

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

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

 

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

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

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

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

アイコン画像のアップロードと設定

設定画面の表示

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

03_一般設定画面

一般設定画面

ブログ画像への画像アップロード

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

04_ブログ画像選択エリア

ブログ画像選択エリア

画像のトリミング

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

05_画像のトリミング指定

画像のトリミング指定

処理の完了メッセージ

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

06_完了メッセージ

完了メッセージ

メッセージ内に以下のように記載があります。
「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″>

一般設定画面の表示

一般設定の画面に戻ると、今アップロードしたアイコンが、
右側に表示されるようになります。

07_一般設定画面への反映

一般設定画面への反映

設定は完了です。と先ほど書きましたが、
このアイコンの表示・・・すぐには反映されません。

私の場合で午前10頃に設定を行って反映されない・・・と放置し、
表示されているのに気付いたのが、その日の夜でした。
少なくとも数時間はタイムラグがあるようです。

設定が間違っているのかと心配になりますが、
ちゃんと表示されますので、気長に待ってあげてください。

アイコン表示の確認

各ブラウザからの表示確認

数時間待ったのちにめでたく表示がされましたので、
各ブラウザで表示の確認を行いました。

08_各ブラウザの確認

各ブラウザの確認

画像をアップしただけで主要ブラウザに
ちゃんと対応してくれる手軽さは、
その他の無料ブログとは違った快適さでした。

Bloggerでもとても簡単に設定できますが、
どうして国内の無料ブログはファビコン一つ設定しにくいのでしょうね。

難しいことはありませんが、即時反映されない点が一番の不安点でしたw

wordpressにてブログ構築を行った際に、
このファビコン設定がどれだけ簡単にできるのかが、
もし気になった際には、以下をお読みいただけると幸いです。

 

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

プロモーション(btm)

Google or AdMax Promotion (it)

 - wordpress.com, 無料ブログ , , , , ,

Comment

  1. […] この投稿につきましては、以下の投稿に移動しております。 ブックマークアイコン(ファビコン)をwordpress.comで表示する方法 […]

  関連記事