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

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

      2014/11/22

Google or AdMax Promotion(it)

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

01_ファビコンイメージ

ファビコンイメージ

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

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

はじめに

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

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

概略

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

アイコンファイルの準備

画像の作成

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

 

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

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

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

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

 

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

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

Seesaaブログへアップロード

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

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

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

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

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

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

03_アップロードファイル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]をクリックします。

04_テンプレート一覧の表示

テンプレート一覧の表示

HTMLの追加

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

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

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

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

06_追加テンプレートの命名

追加テンプレートの命名

HTMLの編集

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

07_テンプレートの編集

テンプレートの編集

linkタグの挿入

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

08_編集画面

編集画面

HTMLの保存

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

09_linkタグの挿入

linkタグの挿入

保存の確認

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

10_テンプレート一覧の表示

テンプレート一覧の表示

テンプレートの有効化

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

11_テンプレートの適用

テンプレートの適用

適用の確認

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

12_適用の確認

適用の確認

ブラウザ表示の確認

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

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

13_ブラウザ表示の確認

ブラウザ表示の確認

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

 

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


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


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

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

Pitta Promotion

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

AdMax Promotion

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

Rakuten Promotion

プロモーション(btm)

Google or AdMax Promotion (it)

 - Seesaa, 無料ブログ , , , ,

  関連記事