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

2013/07/22 2014/11/22

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

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

ファビコンイメージ

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

無料ブログ各社のブックマークアイコン(favicon)変更可否と方法

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

はじめに

他の無料ブログで試した際にちょっと苦労したこともあり、
Jugemでブックマークアイコン(ファビコン)を表示する方法を投稿しようと思います。Jugemではテンプレートの編集をすべて認めているため、
一度「このテンプレートでいく」と決めた場合には、
あっさりとタグ挿入によってファビコンの表示が行えます。
そういう意味ではセオリー通りに<head>に対して
<link>タグ挿入を行うのがベストな選択肢であると思います。

編集前のHTMLに関しても別名で保存(複製)ができますので、
誤って修正してしまった場合にも対応がしやすいのもいいところです。

JugemのHTML複製機能

しかし、後々テンプレートの変更を行うことを、
想定した場合にテンプレートを変更せずに、
ファビコンくらい実装したいと思うところはあります。

概略

アイコン用画像の作成
画像のアイコンファイル化
アイコンファイルのWeb公開
テンプレートのHTMLの複製
HTMLにタグの追記

となります。

表示するアイコンの準備

アイコン用画像の作成

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

１つのアートボードを使ったIllustratorによるFavicon画像の作成

複数アートボードを使ったIllustratorによるFavicon画像の作成

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

多くの方が利用されているであろうInternet Explorerで、
表示されないのではあまり意味がありません。
その為、16px、32px、48pxで作成した画像を、
ico形式のファイルに割り当てることで、
一般的なブラウザで表示されるようになります。

画像のアイコンファイル化

今回は、以下の画像を利用してicoファイルを生成しています。
favicon16pxfavicon32pxfavicon48px

今回作成したicoファイルはこのファイルです。

画像のアイコンファイル化については、
以下を参考にして頂ければ簡単に作成ができます。

画像ファイル(PNG、GIF、JPEG)ファイルからのアイコン(ico)ファイル化

アイコンファイルのWeb公開

Jugemではicoファイルのアップロードに対応していませんので、
Web上で公開可能なファイルストレージを別途利用して公開します。

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

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

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

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

ただし、他の画像共有サービスでも、
直接ファイルに対してのURLが取得ができるようなサービスを選定する必要があります。
SugarSyncのID取得などに関しては、
サイトの指示通りに進めれば、取得できますので割愛します。
ファイル共有(SyugarSync)を利用したブックマークアイコンの公開

今回SugarSyncに対してアップロードを行ったファイルのURL以下の通りです。
icoファイル
https://www.sugarsync.com/pf/D1408962_257_10204720
スマホ用(72pxPNG)
https://www.sugarsync.com/pf/D1408962_257_13239079

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

カスタマイズテンプレートの準備

カスタマイズテンプレートの導入

ブログのTOPより[管理者ページ]をクリックします。

管理者ページ選択

管理者ページのタブ[デザイン]から、
[PCデザイン・フォント設定]を選択します。

PCデザイン・フォント変更の選択

PCデザイン・フォント設定には現在インストールされている、
テンプレートの一覧が表示されています。
下部の方にカスタマイズテンプレートがありますので、
カスタマイズテンプレートの一覧を開きます。

デザインの一覧

カスタマイズ用デザイン画面より、
好きなレイアウトのデザイン横に表示されている、
「このデザインをストックする」をクリックし、インストールを行います。

カスタマイズデザインの選択

カスタマイズテンプレートの複製
PCデザイン・フォント変更画面に戻ると、
今インストールを行ったテンプレートが追加されています。
横にあるラジオボタンをクリックし、
[選択したデザインを適用]をクリックします。

テンプレートの追加

テンプレートの一覧の下にある
「適用しているブログデザインを複製」にて、
新しく複製するテンプレート名を入力し[複製]をクリックします。

デザインの複製

テンプレートの適用が完了すると、
インストールしたテンプレートの横に旗印が表示されています。
複製したテンプレートの右側に表示されている
「鉛筆印」をクリックして、修正を行います。

追加デザインの編集

カスタマイズテンプレートの編集

HTML編集

HTML編集フォームの下部にあるHTML編集エリアにて、
直接HTMLの編集を行います。
<head>から</head>の間に、
以下のソースをコピーして挿入します。

※ただし以下の赤で記載したURL部分は、
貴方がSugarSyncなどで取得したファビコンのURLに置き換えてください。
表示の確認などの為に以下URLを一時的に利用することは構いません。

</link rel="shortcut icon" href="https://www.sugarsync.com/pf/D1408962_257_10204720" />
</link rel="apple-touch-icon-precomposed" href="https://www.sugarsync.com/pf/D1408962_257_13239079" />

1 2	</link rel="shortcut icon" href="https://www.sugarsync.com/pf/D1408962_257_10204720" /> </link rel="apple-touch-icon-precomposed" href="https://www.sugarsync.com/pf/D1408962_257_13239079" />