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

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

      2014/11/22

Google or AdMax Promotion(it)

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

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

01_ファビコンイメージ

ファビコンイメージ

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

08_ファイル数制限

ファイル数制限

はじめに

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

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

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

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


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

概略

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

アイコンファイルの準備

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

 

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

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

この3サイズの画像をico作成サイトにて、
icoファイル化を行います。
logo_p01-16px_orangelogo_p01-32px_orangelogo_p01-48px_orange

 

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

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

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

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

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

他のサイトで拡張子偽装によるアップロード手法(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

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

ファンブログへの設定

デザインの変更

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

03_デザインの変更

デザインの変更

スキンの編集

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

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

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

HTMLの編集

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

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

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

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

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

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

設定は以上で終了です。

ブラウザによる表示確認

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

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

SygarSync利用

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

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

SygarSync非利用

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

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

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

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

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

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

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

 

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


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


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

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

Pitta Promotion

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

AdMax Promotion

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

Rakuten Promotion

プロモーション(btm)

Google or AdMax Promotion (it)

 - ファンブログ(A8), 無料ブログ , , , , , ,

  関連記事