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

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

ファビコンイメージ

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

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

はじめに

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

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

概略

• ファビコンに設定したいアイコン画像を作成する。
• 作成したアイコンからicoファイルを作成する。
• icoファイルをSeesaaぶアップロードする。
• HTMLを編集する。

アイコンファイルの準備

画像の作成

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

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

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

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

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

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

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

Seesaaブログへアップロード

Seesaaブログへのアイコンファイルアップロード

Seesaaブログでは特に制限もなくicoファイルを
そのままアップロードすることができます。
ファイルマネージャまたは、各投稿エリア下部のファイルマネージャから
ファイルを指定してアップロードします。
ファイルのアイコン表示になっているものがicoファイルです。

投稿エリア下のファイルマネージャ

アイコンファイルURLの確認

各投稿エリア下部のファイルマネージャの下の編集をクリックすると
ファイルの詳細が表示されます。
表示されているアイコンの下に表示されている
URLがアップロードしたicoファイルのURLになります。
メモ帳か何かに貼り付けて覚えておきます。

アップロードファイルURLの確認

また合わせて72px画像のURLも取得しておきます。
(参考)
http://algorhythnn.up.seesaa.net/image/favicon_orange.ico
http://algorhythnn.up.seesaa.net/image/logo_p01-72px_orange-a663d.png

ブログテンプレートのコピーと編集

デザインの一覧を表示

サイドバーから[デザイン]をクリックし、
デザインの一覧画面から[HTML]をクリックします。

テンプレート一覧の表示

HTMLの追加

デザインの一覧画面に表示されている、
HTMLの追加をクリックし、テンプレートをコピーします。

テンプレート一覧からHTMLの追加

新規に追加されたHTMLに対して名前を入力し[保存]をクリックします。

追加テンプレートの命名

HTMLの編集

新規に追加したテンプレートが表示されていますので、
そのテンプレート名をクリックします。

テンプレートの編集

linkタグの挿入

テンプレートのHTMLが表示されますので、
そのHTML本文の～の間に以下の記述を挿入します。
赤字部分は貴方が先ほどアップロードしたicoファイルのURL
青字部分は72px画像ファイルのURLに書き換えてください。

編集画面

HTMLの保存

記述が完了したら[保存]をクリックして設定を保存します。

linkタグの挿入

保存の確認

設定を完了しましたというメッセージを確認したら、
[HTML]をクリックしてデザインの一覧に戻ります。

テンプレート一覧の表示

テンプレートの有効化

デザインの一覧から今編集したテンプレート名横の
ラジオボタンをチェックし適用します。

テンプレートの適用

適用の確認

適用されたことを確認したら、設定は完了です。

適用の確認

ブラウザ表示の確認

各ブラウザからアクセスし表示を確認

※なおlinkタグにてタッチアイコンの設定を行いましたが、
この設定はスマフォからPC用サイトを表示した際のみに有効な設定です。
通常はスマホページが表示される為、別途設定が必要です。

ブラウザ表示の確認

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

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

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

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

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

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

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

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

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

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

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

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

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



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

AdMax Promotion

ブログ記事のご紹介

すべて展開 | すべて省略

Rakuten Promotion

ページ

すべて展開 | すべて省略