新着記事

2016.05.23 Monday

【JUGEMブログ】ファビコンの設定方法


  1. HOME
  2. webデザイン・SEO(JUGEMブログ)
  3. 【JUGEMブログ】ファビコンの設定方法

全てのカスタマイズ記事をまとめています。記事の投稿と一緒に更新します。↓
JUGEMスマホテンプレート徹底カスタマイズ講座まとめ


今回はコメント欄でご質問いただいたファビコンについて、JUGEMUブログで設定する方法をご紹介したいと思います。


そもそもファビコンとは、

これのこと。
あとスマホでブックマークをホーム画面に追加したりなんかすると、アイコンが指定したものになったりするあれのことです。

やりかた自体はとっても簡単なんですけれど、なんせサイズが山のようにある上、pngだけでなくico形式の画像まで用意しないといけなくてめんどくさいんですよねー、ファビコン。

と言うわけで今回は、自動で必要な画像のサイズに変換してくれるツールも含めて、JUGEMブログでファビコンを設定する方法についてご紹介したいと思います。

ファビコン用画像を用意する


ファビコン用の画像は、
  • IE用のico画像
  • png画像16x16サイズ
  • png画像32x32サイズ
  • png画像96x96サイズ
  • iOS用57x57サイズ
  • iOS用60x60サイズ
  • iOS用72x72サイズ
  • iOS用76x76サイズ
  • iOS用114x114サイズ
  • iOS用120x120サイズ
  • iOS用144x144サイズ
  • iOS用152x152サイズ
  • iOS用180x180サイズ
  • safari用svg画像
  • andoroid用192x192サイズ
  • Windows 8以降のタイル用


……と、これだけのものを用意しなければなりません。
ふ、ふざけるな!!!

困りますよね。こんなに沢山。全てはiOSが戦犯な気がするけど。

そこで活用したいのがFavicon Generatorというサイト。
ファビコンに必要な画像を簡単に作成してくれます。
英語のサイトですので簡単にFavicon Generatorの使い方も簡単にご紹介します。

最初にファビコンで設定したい画像を用意しておいてください。
正方形でサイズは260x260ピクセル以上のものが好ましいです。

まずはサイトにアクセス。

画面右側の赤丸の部分をクリックするとファイルが選択できるので、先ほど用意した260x260ピクセル以上の正方形の画像を選択します。選択するとアップロード開始。

完了するとこのようにアップロードした画像が表示されるので、

赤丸のところをクリックしてください。
透過pnd画像を使っていると上記のように背景が市松模様になりますが、きちんと透過はされているので心配しないでくださいね。

次から設定になります。

左赤丸で囲んであるところはリアルタイムで設定が反映されます。
ここを見ながらSettingsタブで感覚的に操作できるはず。特に難しいことはありません。

右赤丸のDedicated pictureタブでは他の画像に変更も可能。

andoroidの設定では、赤丸のところに自分のサイト名を入れることを忘れずに!


オプション等はわからなければそのままでかまいません。
設定が完了したら

赤丸のところをクリック。


この画面になったら赤丸のところをクリックして、できたファイルを保存してください。


ここまではいいのです。ここまではね。
普通だったら保存したファイルをそのままサーバー上にアップロードして、下に生成された、オレンジ色で囲まれたところのコードをそのまま間にコピペしたら完了です。

しかしJUGEMブログではそうはいかないのです。

目次にもどる

JUGEMでの設定の仕方


JUGEMブログで全てのファビコンを対応させるためには、JUGEM以外に『ありとあらゆる拡張子をアップロード可能なサーバー』を用意しなければいけません。

あまりこういうことをオススメしてはいけないのでしょうが、無料で『ありとあらゆる拡張子をアップロード可能なサーバー』代わりに利用できるのはseesaaブログです。

もしサーバーが用意できない場合は、IE用、Windows 8以降用、safari用のファビコンは諦めなければなりません。

まずは他のサーバーを使用せずIE用、Windows 8以降用、safari用のファビコンを諦めてJUGEM内だけで設定する方法からご紹介します。

まずは保存したzipを解凍し、中身を見てみましょう。


このファイル類の中から、拡張子がpngになっているものだけをJUGEMの画像管理からアップロードします。

拡張子がわからん!って方も、一括画像アップロード機能を使ったら大丈夫。アップロード可能な画像のみしか選択できないようになっています。

アップロードが完了したら、次は以下をコピー。
<link rel="icon" type="image/png" href="16x16サイズURL" sizes="16x16">
<link rel="icon" type="image/png" href="32x32サイズURL" sizes="32x32">
<link rel="icon" type="image/png" href="96x96サイズURL" sizes="96x96">
<link rel="apple-touch-icon" sizes="57x57" href="57x57サイズURL">
<link rel="apple-touch-icon" sizes="60x60" href="60x60サイズURL">
<link rel="apple-touch-icon" sizes="72x72" href="72x72サイズURL">
<link rel="apple-touch-icon" sizes="76x76" href="76x76サイズURL">
<link rel="apple-touch-icon" sizes="114x114" href="114x114サイズURL">
<link rel="apple-touch-icon" sizes="120x120" href="120x120サイズURL">
<link rel="apple-touch-icon" sizes="144x144" href="144x144サイズURL">
<link rel="apple-touch-icon" sizes="152x152" href="152x152サイズURL">
<link rel="apple-touch-icon" sizes="180x180" href="180x180サイズURL">
<link rel="icon" type="image/png" href="192x192サイズURL" sizes="192x192">


これをPCのHTML・CSS編集の<head></head>間と、スマホのフリースペース1に貼り付けます。
そして
○x○サイズURL
と書いてあるところを、それぞれ画像サイズに合ったURLに書き換え。


画像サイズは赤丸のところから、画像URLは青丸のところから確認できます。

目次にもどる

他サーバーを活用した設定の仕方


全てのファビコンを適用させたい!とい場合には、他のサーバーも活用しなければなりません。
JUGEMは .gif .jpg .png以外の拡張子がアップロードできない面倒な仕様になっているからです。

先に上記の「JUGEMでの設定の仕方」でIE用、Windows 8以降用、safari用以外のファビコンを設定しておいてください。

まずはJUGEM以外のサーバーに、保存して解凍したファイルの中のmanifest.json、favicon.ico、safari-pinned-tab.svgの三つをアップロード。

アップロードが完了したら、次は以下をコピー。
<link rel="manifest" href="manifest.jsonのURL">
<meta name="msapplication-TileColor" content="#ffcc22">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="shortcut icon" type="image/x-icon" href="favicon.icoのURL">
<link rel="mask-icon" href="safari-pinned-tab.svgのURL" color="#ffffff">


これをPCのHTML・CSS編集の<head></head>間と、スマホのフリースペース1に貼り付けます。

そして
manifest.jsonのURL
と書いてあるところにはmanifest.jsonをアップロードして取得したURLを

favicon.icoのURL
と書いてあるところにはfavicon.icoをアップロードして取得したURLを

safari-pinned-tab.svgのURL
と書いてあるところにはsafari-pinned-tab.svgをアップロードして取得したURLを

以上に書き換えて、残ったIE用、Windows 8以降用、safari用ファビコンの設定は完了です。


めちゃくちゃめんどくさいです(笑)

時間がかかって大変ですが、頑張って設定してみてください。

目次にもどる


シェアする


こちらの記事も読まれています。
ブログランキング・にほんブログ村へ
コメント
とっっても詳しくありがとうございます
こんなに、大変とは思いませんでした。笑

かんばって一通りやってみたのですが、どこか間違っているのかまだ自分のアイコンが表示されません…
1回、PCのアイコンは変わったんですが、なぜかまた元に戻ってしまいました(T ^ T)

間違い探ししたけどどこか分からずです。・°°・(>_<)・°°・。
  • 2016/05/24 6:16 AM
で、で、できました〜〜・゚・(´pωq`)・゚・
すごく難しかったですがこれからはもうできそうです。
ほんとにありがとうございます。

また編集したりするときがくると思うのでこれからもこちらのブログにお世話になります。
本当にありがとうございました(*^_^*)
  • 2016/05/25 3:05 PM

コメントする