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

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

      2015/03/13

Google or AdMax Promotion(it)

amebaブログでお気に入りアイコン(ファビコン)を
表示する方法は、探すと結構出てきます。

ですがどうも情報が古いようで、
正しく設定できない情報が多くなっている気がします。

今回なんとか表示することができましたので投稿をしておきます。

2015/03/13追記
その後、 さんからご指摘をいただきました。
ファビコンが正しくアメブロで表示されていないとのことで、確認いたしました。
結果、この方法ではファビコンの表示が正しく行えていないことがわかりました。

代替策の検討に入りますが、元々JavaScriptによる実装でしたので、
かなりの検討が必要かな・・・という気がしています。
今しばらくお時間をいただけますと助かります。

フリープラグインを利用した方法での実装ですが、
ここまで設定をしにくく設計をしていることから、
アメーバのサービスとしては「ファビコンを変更してほしくない」との意図が伺えます。

規約違反には当たらないと解釈はしておりますが、
あくまでも個人の責任で設定をお願いします。
万が一にもブログが削除されたといった事が
発生しましても私は一切責任を負いません

01_ファビコン表示

ファビコン表示

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

実際に無料ブログでブックマークアイコンを表示したサイトのリンクもご紹介しています。
各社の違いについてご興味がおありでしたら、お読みいただけると嬉しいです。

はじめに

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

アメーバブログでファビコンを表示する方法です。
ファビコンとはお気に入りアイコンという、
タブやお気に入りで表示されるアイコンのことで、
アメブロの場合大半が「アメーバのアイコン」の
緑色アイコンが表示されていると思います。

これを独自のアイコンにしてしまおうということです。

概略

アメブロではフリースペースと呼ばれるエリアを
利用してのファビコン設定情報が多いですが、
フリーエリアに記載した場合は、
そのままタグが出力され、ファビコンが反映されませんでした。

本投稿ではフリープラグインエリアを利用します。

アイコンの作成には画像ファイルから、
icoファイルを生成してくれるサイトのお力をお借りします。

アメブロではファビコンなどで利用される、
アイコンファイル(拡張子ico)が利用(アップロード)できないので、
アメブロ以外のストレージサービスを利用します。

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

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

ここで、なぜicoファイルなの?gif画像じゃだめなの?

そうお感じになられる方もおられるかもしれませんが、
gif画像などでファビコンを設定した場合に、
Internet Explorerでブログにアクセスしてきた方には、
ファビコンが正しく表示されない症状があります。

Internet Explorerに関しては適切に(?)
アイコンファイルを指定していなければ表示されません。

今回、この検証を行う際に、以下の5ブラウザにて検証を行いました。

  • GoogleChrome Ver. 27.0.1453.116 m
  • Internet Explorer Ver. 10.0.6
  • Firefox Ver. 22.0
  • Safari Ver. 5.1.7
  • Opera Ver.12.15

しかし、いろいろと試行錯誤を行ったのですが、
今回の条件でOperaに関してはどうしても対応を行うことができませんでした。

別途公開のサーバが利用でき、
icoファイルを独自にWeb公開ができる場合は、
今回の検証ブラウザすべてで表示することができます。

それではアイコンファイルの作成から、
順を追ってご説明します。

アイコン画像の準備

用意するアイコン画像は、
お好きなデザインで、16px、32px、48pxの3サイズの正方形画像を準備します。

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

 

今回作成に利用したファイルは、
以下のファイルを利用しています。
logo_p01-16px_orangelogo_p01-32px_orangelogo_p01-48px_orange

この3サイズの画像をico作成サイトにて、icoファイル化を行います。

 

生成を行ったicoファイルは以下のファイルです。
favicon_screen

アイコンファイルの公開元の選定

今回はアメブロのみを利用している、
ユーザーであることを想定しています。

ですので、アメブロに対して直接アップロードすることができない
icoファイルをWebに公開する方法として、SugarSyncを利用します。

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

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

私がこの方法で検証を行った限り、
DropBox、Googleドライブ、Amazon Cloud Drive、Yahoo!ボックス
を試してはみましたがうまく合致するサービスには出会いませんでした。
結果としてSugarSyncを利用します。

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

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

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

 

画像の公開設定は以上です。
あとはアメブロ側で設定を行います。

アメブロへの設定

プラグインの追加

アメブロのブログ管理画面より、
[プラグインの追加]をクリックします。

10_アメブロフリープラグイン追加

アメブロフリープラグイン追加

プラグインソースの貼り付け

プラグインのタグ入力エリアに対して、
以下のようなソースを貼り付けます。

ただしURLの部分は貴方がSugarSyncにて取得したアイコンの
共有URLを貼り付けてください。

設定は以上です。

ブラウザ表示の確認

ブラウザからアクセスして表示を確認します。

ブラウザからの表示確認(SugarSync使用)

Opera以外ではファビコンが表示されています。

12_アメブロ表示の確認(SugarSync利用)

アメブロ表示の確認(SugarSync利用)

ブラウザからの表示確認(SugarSync不使用)

Operaでも正しくファビコンが表示されています。
ここではレンタルサーバなどの公開できるディレクトリを利用していますが、
他社の無料ブログ(FC2など)へ直リンクという形でも公開可能かと思います。
お勧めはしませんが。

13_アメブロ表示の確認(SugarSync非利用)

アメブロ表示の確認(SugarSync非利用)

自分でレンタルサーバなどでサイト構築をした際には、
特に難解な処理を行うことなく設定できるようなものも、
こうした無料ブログでは困難な場合もあり、
無料ブログにてサイトを運営することが、時として余計な時間的コストがかかってしまう場合もあります。

どこでブログを運営するかを考えたときには、こうした要素も参考にされるといいでしょう。

ただアメブロはブログサービスとしては、
ユーザー数が多いことが何よりもメリットになっていることは紛れもない事実です。

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

 

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


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


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

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

Pitta Promotion

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

AdMax Promotion

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

Rakuten Promotion

プロモーション(btm)

Google or AdMax Promotion (it)

 - アメブロ, 無料ブログ , , , , ,

  関連記事