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

ファンブログでブックマークアイコン(ファビコン)を追加する方法は、
他のブログでも紹介されています。

情報が多くあり、大半がタグ編集で対応されているでしょうから、
投稿する意味さえなさそうですが、
他の無料ブログサービスでも投稿しているため投稿します。

ファビコンイメージ

そんなことより１投稿に挿入できる画像が５枚までっていう、
ファンブログの制限の方がしんどいんですけどね・・・。
無料ブログは制限が多くて本当に大変だなと痛感する次第です・・・。

ファイル数制限

はじめに

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

他の無料ブログで試した際にちょっと苦労したこともあり、
ファンブログでブックマークアイコン(ファビコン)を表示する方法を投稿しておきます。

ファンブログではブログのページを開いた際に、
デフォルトでは白紙アイコンが表示されてしまいます。
この白紙アイコンを自分独自のアイコンに変更しようという話です。

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

概略

• ファビコン用画像の作成を行って、その画像をicoファイル化します。
• そのicoファイルをWeb公開しファビコンに設定します。

アイコンファイルの準備

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

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

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

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

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

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

今回はInternet Explorerに対応した拡張子icoファイルを、
ファビコンに割り当てを行いたいのですが、
このicoファイルはファンブログでは
アップロードを行うことができません。

ファイルアップロード制限

他のサイトで拡張子偽装によるアップロード手法(jsファイルなど)が
紹介されており、このケースでも可能かとは思います。

しかしA8にてファンブログを運営されているということは、
当然ながらアフィリエイトなどを目的にサイト運営をされているでしょう。
A8さんが制限として設けている「画像以外のアップロード不可」を
拡張子偽装によってアップすることは、私はルール違反だと思っています。

アフィリというビジネスパートナーを相手に、
こうしたルール違反はしないほうがいいと個人的には思います。

その為、icoファイルの公開には別のサービスを利用します。
そこで、今回利用する方法はSugarSyncのオンラインストレージです。

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

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

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

SugarSyncのID取得などに関しては、
サイトの指示通りに進めれば、取得できますので割愛します。
ファイル共有(SyugarSync)を利用したブックマークアイコンの公開

私がSugarSyncにて公開しているicoファイルは以下URLです。
https://www.sugarsync.com/pf/D1408962_257_10204720
スマホ用にアップしている72pxアイコンは以下URLです。
https://www.sugarsync.com/pf/D1408962_257_13239079

画像の公開設定は以上です。
あとはファンブログ側で行います。

ファンブログへの設定

デザインの変更

管理画面より「デザインの変更」をクリックし「スキン変更・選択」画面を表示します。

デザインの変更

スキンの編集

スキン変更・選択画面の[フリースキンの編集]－[メイン]を選択します。

フリースキンの編集・メイン

HTMLの編集

表示されているHTMLソースのからの間に、以下の記述を挿入します。

実際にはSugarSyncにて取得したご自分のアイコン共有URLに、
書き換えてください。

HTMLの編集が完了したら[保存]をクリックして反映します。

メインテンプレートの編集

———- 2013/08/27：追記
書き忘れていましたが[フリースキンの編集]－[メイン]を編集をしましたが、
他のスタイル[ポータル][アーカイブ][１記事][プロフィール]に対しても、
同様の変更をしてください。
———-

設定は以上で終了です。

ブラウザによる表示確認

ブラウザにて表示の確認を行って表示されていれば完了です。
以下のようにSugaeSyncを利用した公開ファイル指定では、
Operaのみが白紙アイコンとなってしまいます。

自前で別途ファイルを公開しているWebサーバなどに、
icoファイルを配置し、URLに指定した場合には、
Operaでも正しく表示が行われます。

SygarSync利用

ブラウザの表示(SugarSync利用)

SygarSync非利用

ブラウザの表示(SugarSync非利用)

余談ですが、画像ファイルのアップロードは、
FC2ブログなどを利用した場合、icoファイルのアップロードが可能です。

一旦FC2ブログにアップロードした画像のURLを、
指定してファイルを公開することも可能です。
SugaeSyncにこだわる必要はありませんし、
もっと言えば、無料のレンタルサーバでも構いません。

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

最近主流になっているwordpressで作るブログの場合に、
ファビコンの設定がどんな感じで行えるのかなどは、
この投稿でご紹介しています。

もしお時間がおありのようでしたらどうぞ^^

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

最後までお読みいただきありがとうございました。

お勧めさせて頂きたい投稿です

• 【巧妙な仕組】Google+へAndroidの写真が勝手にアップロードされてしまう流れは設定ミスではない

• JetPackサイト統計データが消えた場合に復活する手順(してもらう)

• 【待望】WALLET ポイントがauID(au電話番号)間で相互にやりとりできるようになりました

• 禁断の機能がau公式解禁！WALLETポイントの現金化がついに開放。

• 何もしないと、auポイントが2014/05月分以降は携帯利用料から付与されなくなります

• au WALLET™カードはauを解約してもプリペイドとして使い続けられるが、有効期限には注意

• じぶん銀行が動いた！コンビニATM利用が無料・他行振込無料（回数制限なし）で使える

• 【旬】「白すぎる」と賛否両論？姫路城見るなら今秋がおすすめ！その理由は？｜castlehimeji.com

• Google+の投稿が勝手に自動でブログになっていくPluCialが便利



アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介

すべて展開 | すべて省略

Rakuten Promotion

ページ

すべて展開 | すべて省略