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

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

      2014/11/22

Google or AdMax Promotion(it)

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

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

01_ファビコンイメージ

ファビコンイメージ

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


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

はじめに

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

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

02_JugemのHTML複製機能

JugemのHTML複製機能

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

概略

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

となります。

表示するアイコンの準備

アイコン用画像の作成

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

 

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

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

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

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

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

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

 

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

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

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

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より[管理者ページ]をクリックします。

04_管理者ページ選択

管理者ページ選択

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

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

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

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

06_デザインの一覧

デザインの一覧

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

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

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

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

08_テンプレートの追加

テンプレートの追加

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

09_デザインの複製

デザインの複製

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

10_追加デザインの編集

追加デザインの編集

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

HTML編集

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

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

編集が終了したら[HTMLを編集]をクリックして保存します。

11_HTMLソースの編集

HTMLソースの編集

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

表示の確認

各ブラウザからの確認(SugarSync利用)

今回のようにSugarSyncを利用した際には、
Operaのみファビコンを表示することができませんでした。

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

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

各ブラウザからの確認(SugarSync非利用)

一般にWeb上に公開されているサーバー上に、
ファイルをアップロードして割り当てた場合には、
Operaでもちゃんと表示されます。

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

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

※ここで新しく作成したテンプレートの表示は、
まだテンプレートの初期状態である為、
今までのテンプレートなどで何らかの修正をしている場合は、
修正点の引き継ぎなどを行った後で、公開したほうがいいでしょう。
その為、一旦は元のテンプレートを適用しておくことをお勧めします。

余談

余談ですが、FC2ブログを利用した場合はicoファイルのアップロードが可能です。
その画像URLを指定してファイルを公開することも可能です。
ブックマークアイコン(ファビコン)をFC2で表示する方法

最近主流になっているwordpressで作るブログの場合に、
ファビコンの設定がどんな感じで行えるのかなどは、
この投稿でご紹介しています。
wordpressサイトにブックマークアイコン(Favicon/ファビコン)を追加する

しかし・・・このJugemの投稿する画面・・・
今のところどこの無料ブログよりも使いにくい印象だなぁと感じました。(ご参考まで)

これで毎日投稿してる人を尊敬する。
もっと直感的で楽ちんなブログいっぱいありますよ、ほんと。

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


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


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

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

Pitta Promotion

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

AdMax Promotion

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

Rakuten Promotion

プロモーション(btm)

Google or AdMax Promotion (it)

 - Jugem, 無料ブログ , , , , ,

  関連記事