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

ブックマークアイコン(ファビコン)をウェブリブログで表示する方法

      2014/11/22

Google or AdMax Promotion(it)

ウェブリブログで、
「ブックマークアイコン(ファビコン)をウェブリブログで表示する方法」
という投稿をよく見かけますがよく表示されてないことがあります。

どうやらトップページは表示できているが、
各個別の投稿ページに反映できないといったケースが見受けられる気がします。

いろいろ試した結果、表示することができましたので投稿しておきます。

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


もしお時間があれば本編もどうぞ。

01_ファビコンイメージ

ファビコンイメージ

はじめに

今回はファビコンの設定です。
ウェブリブログにファビコンを設定する。
この簡単そうなことが意外と実現できない事実・・・。

「フリースペースにタグを貼り付ける」という方法で実現できます!と
記述されているにも関わらず、最近は仕様が変わったのかできなかったり。

そうした投稿があるブログであるにも関わらず、
ブックマークアイコンが表示されていなかったりしています。
おそらく当時は表示されていたのでしょう。

私も記載されている通りにタグを、
フリースペースに貼ってみたのですが表示されませんでした・・・。

できることなら白紙アイコンではなく、
ビッグローブの「青い丸キャラ」アイコンくらいは、
ファビコンに割り当てておいて欲しいものです。。。

というわけで、なんとか実現できないかと検討した結果、
DOMモデルを制御する方法で実現ができましたので投稿をしておきます。

どうでしょうか?私のブログで今、正しく表示されていますか?
ええかげんブログ(ウェブリ支店)
(表示されていなかったら教えてください。すみません)

概略

ウェブリブログでは、フリースペースを利用することができ、
そのフリースペースに対して、javascriptを利用することが可能とあります。
皆さんもスクリプトを貼って利用されているでしょう。

そこに対して、headタグ内にブックマークアイコンを表示するための、
エレメントをプログラム的に追加し、表示を行います。
アイコンファイルの準備

まずアイコンに割り当てたい画像を用意する必要があります。
画像の作成方法等に関しては以下の投稿を参照願います。

 

Internet Explorerによる表示を除けば、
16pxサイズのGIFやPNG画像を用意し、
割り当てることで表示が可能なのですが、
多くの方が利用されているであろうInternet Explorerで、
表示されないのではあまり意味がありません。

その為、16px、32px、48pxで作成した画像を、
ico形式のファイルに割り当てることで、
一般的なブラウザで表示されるようになります。
今回は、以下の画像を利用してicoファイルを生成しています。
logo_p01-16px_orange logo_p01-32px_orange logo_p01-48px_orange

実際のアイコン(ico)ファイルは以下のファイルです。
テスト確認用などにはご利用いただいて構いません。
favicon_screen

画像の保存先(公開元)の選定

今回はInternet Explorerに対応した拡張子icoファイルを、
ファビコンに割り当てを行いたいのですが、
このicoファイルはウェブリブログでは、
画像ファイルとして貼り付けを行うことができません。

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

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

またウェブリアルバムにおいても、
icoファイルは画像として認められずアップロードができません。

03_icoファイルアップローダエラー

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

無料サービスは制限が多くて大変だな・・・と感じるところです。
まぁ、無料であるということは、
提供元にも意図があっての無料ですから、それに従わざるをえませんね。

そこで、今回利用する方法はSugarSyncの
オンラインストレージを利用します。

似たサービスがありますので、
すでにこうしたサービスをご利用のようでしたらそちらでも構いません。

ただし、他の画像共有サービスでも、
直接ファイルに対してのURLが取得ができるようなサービスを選定する必要があります。

なお、SygarSyncは友人紹介制もとっていますので、
紹介者から紹介を受けた場合には、500MBの追加容量が貰えます。

ただ、紹介者からのメール連絡を待ってからの登録になりますので、
お時間のある方は、以下の管理者ページの
メールアドレスへ直接メールいただければ、
こちらから紹介メールを返信させていただきます。
アルゴリズン管理者について

SugarSyncのID取得などに関しては、
サイトの指示通りに進めれば、取得できますので割愛します。

 

SugarSyncにて公開した画像(ico)ファイルの
URLを取得できれば、画像の公開設定は以上です。
あとはウェブリブログ側で設定を行います。

ブックマークアイコン(favicon)の設定

管理ページの設定メニュー

ウェブリブログへログインし、
[管理ページ]-[設定]をクリックし設定メニューを表示します。

11_ブログ管理ページ

ブログ管理ページ

表示項目設定

[設定]-[表示項目設定]をクリックし、
表示項目設定のメニューを開きます。

表示項目設定に表示されている、
[フリースペース(サイド用)]の[編集]ボタンをクリックし、
フリースペースの編集を行います。
※なお、フリースペースの「□表示」にチェックがされていない場合には、
チェックを入れてフリースペースが有効になるように設定してください。

12_表示項目設定の選択

表示項目設定の選択

お気に入りアイコン(favicon)用javascriptの設定

編集エリアに対して、以下のようなjavascriptを貼り付けし[設定]をクリックして保存します。

以下で示すURLは、先ほどSugaerSyncにてアップロードした際に取得した、
貴方のアイコンURLに置き換えてください。

※動作確認の為であれば、そのまま使ってもらえば表示確認が可能です。
やっつけソースなので誤り・バグがあればご指摘ください。

13_フリースペース編集

フリースペース編集

以上で設定は終了です。

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

ブラウザの表示

IE,Chrome,Firefox,Safari,Operaの各表示は以下のようになります。

15_ブラウザ表示の確認

ブラウザ表示の確認

うまく設定できた方も、できなかった方もお疲れ様です。
何かのお役に立てていれば幸いです。

外部ファイル化

javascriptの外部ファイル化

最後にこのjavascriptのソースを外部化しても
動作しましたので追記しておきます。

14_スクリプトの外部化

スクリプトの外部化

 

今回はウェブリブログを単独で利用されている方に向けて、
書いていますので、外部ストレージなどでアイコンファイルを公開しました。

独自にレンタルサーバや別の無料ブログなどで、
ブログを運営されている場合で、
アイコンファイルの公開やjsファイルの公開などが可能な場合は、
上記のように外部ファイルを利用しても設定が可能です。

今回は、ファビコンの設定ということで、
皆さんがいうように簡単に設定をしてフムフムと納得して終わる
そんなパターンを想定していましたが、
思った以上に手こずった感がありました。

無料ブログにはいろいろと制限がありますが、
レンタルサーバを借りるなどしてWordpressで構築したサイトなら、
結構こうしたことが一瞬で終わるところがいいところだなと、
改めて痛感することになりました。

参考まで、もしお時間があればどうぞ。

 

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


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


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

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

Pitta Promotion

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

AdMax Promotion

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

Rakuten Promotion

プロモーション(btm)

Google or AdMax Promotion (it)

 - ウェブリブログ, 無料ブログ , , , , ,

  関連記事