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

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

      2014/11/22

Google or AdMax Promotion(it)

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

01_ファビコンイメージ

ファビコンイメージ

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


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

はじめに

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

yaplogでブックマークアイコン(ファビコン)を追加する方法は、
他のブログでも紹介されているでしょう。
無料ブログサービス検証を行っているため投稿させて頂きます。

概略

  • ファビコンに設定したいアイコン画像を作成する。
  • 作成したアイコンからicoファイルを作成する。
  • icoファイルをWebストレージへアップロードする。
  • 編集可能スキンを有効にする。
  • HTMLを編集する。

アイコンファイルの準備

画像の作成

まずアイコンに割り当てたい画像を用意する必要があります。

画像の作成方法等に関しては以下の投稿を参照願います。

 

画像ファイルのicoファイル化

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

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

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

 

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

上記のicoファイルの他に72pxサイズの画像ファイルも
別途用意しておき、スマートフォン用の画像に利用します。

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

yaplogでは画像ファイルのアップロードに対して、icoファイルを指定することができません。

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

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

今回はyaplogのみを利用しているユーザーであることを想定して書いています。
その為、yaplogに対して直接アップロードすることができない
icoファイルをWebに公開する方法としてSugarSyncを利用します。

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

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

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

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

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

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

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

SugarSyncにアップロードしたファイルのURLをメモ帳などに書き留めておいてください。
私がSugarSyncにて公開しているicoファイルは以下URLです。
https://www.sugarsync.com/pf/D1408962_257_10204720
スマホ用にアップしている72pxアイコンは以下URLです。
https://www.sugarsync.com/pf/D1408962_257_13239079

yaplogへの設定

デザイン編集可能スキンの適用

yaplogでは標準で適用されているスキン(デザインテンプレート)は、
編集ができないようになっています。
少し画面構成が分かりにくいところがあって、
どこで編集すればいいのか気づきにくいかもしれませんので、
順を追ってご紹介します。

スキンの編集

標準のスキンを編集しようとした場合、以下のような画面が表示されます。

03_スキン編集エラー

スキン編集エラー

カスタマイズ可能スキンの選択

その画面より編集可能なスキンの選択ができますので、
貴方の用途にあった編集可能なスキンを選択してください。

04_編集可能スキンの選択

編集可能スキンの選択

スキンの適用

利用するスキンを選択したら[保存]をクリックし、スキンを適用します。

05_スキンの適用

スキンの適用

カスタマイズスキンの編集

これでデザインが自由に編集できるようになりました。
[フリースキン編集]をクリックして編集を開始します。

06_編集可能スキンの編集

編集可能スキンの編集

HTMLの編集

画面を開いた時点ではCSS(スタイルシート)の編集画面が開いています。
[メイン]をクリックし、HTML編集画面を開きます。

07_メイン編集タブの切り替え

メイン編集タブの切り替え

アイコン表示タグの挿入

HTML編集画面が開いたら下部に編集用の元HTMLが表示されています。
ここに対してファビコンを表示するタグを挿入します。

08_HTML編集画面

HTML編集画面

タグの挿入箇所は~の間に挿入します。
挿入するタグは以下のようなタグになります。

ただし、1行目のURLは先ほどicoファイルを、
アップロードした際にコピーしたURLに書き換えて貼り付けてください。

また2行目に示すURLに関しては、
スマートフォン用に準備した72px四方のPNG,GIF,JPEG画像ファイルを
アップロードして取得したURLに書き換えて、貼り付けを行ってください。

09_HTMLの編集

HTMLの編集

設定は以上で終了です。
ブラウザから表示を確認します。

各社ブラウザの表示確認

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

今回、SugerSyncを利用したicoファイルの公開では、
Operaのみファビコンを表示することができませんでした。

10_ブラウザ表示の確認

ブラウザ表示の確認

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

別途、ご自分で用意したWeb領域にアイコンをアップロードし、
公開している場合には、以下のようにOperaでも表示されるようになります。

11_ブラウザ表示の確認(SugarSync非利用)

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

補足

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

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

 

最近主流になっているwordpressで作るブログの場合に、
ファビコンの設定がどんな感じで行えるのかなどは、

この投稿でご紹介しています。

 

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


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


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

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

Pitta Promotion

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

AdMax Promotion

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

Rakuten Promotion

プロモーション(btm)

Google or AdMax Promotion (it)

 - yaplog, 無料ブログ , , , , ,

  関連記事