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

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

ファビコンイメージ

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

はじめに

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

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

概略

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

アイコンファイルの準備

画像の作成

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

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

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

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

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

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

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

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

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

yaplogでは画像ファイルのアップロードに対して、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では標準で適用されているスキン(デザインテンプレート)は、
編集ができないようになっています。
少し画面構成が分かりにくいところがあって、
どこで編集すればいいのか気づきにくいかもしれませんので、
順を追ってご紹介します。

スキンの編集

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

スキン編集エラー

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

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

編集可能スキンの選択

スキンの適用

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

スキンの適用

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

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

編集可能スキンの編集

HTMLの編集

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

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

アイコン表示タグの挿入

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

HTML編集画面

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

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

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

HTMLの編集

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

各社ブラウザの表示確認

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

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

ブラウザ表示の確認

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

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

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

補足

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

AdMax Promotion

ブログ記事のご紹介

すべて展開 | すべて省略

Rakuten Promotion

ページ

すべて展開 | すべて省略