自分のブログのアイコンを変更することにしました。
今回のアイコンは「PC」「アンドロイド」「iPhone」対応です。
PC→ファビコン
スマホ→webクリップアイコン ウェブクリップアイコンという。
といっても、すでにやけっぱちな←即席アイコンに
変更をしていたのですが、ちょっと凝った物に変更です。
といっても、デザインがすぐには思い浮かばないので、自分のココログアバターをアイコンにすることに。
↓地味だったので、面白おかしくしてみようと思ったけど、無料では限界が有り、少しばかりお金を使うことに。右の画像ができあがった物。
↓ココログアバターは、ちょっとゲームしたくらいでは、全く衣類が手に入らず、公式によると「衣類」としてちゃんと購入してくださいとのこと。
で、286円も出して購入。40～60円くらいのアイテムならまぁいいとしても、頭につけている飾りが123円ってのはね。購入アイテムの種類も少ないし。
ここからが アイコンの設置の話。
PCのインターネットエクスプローラーでお気に入りに入れたら基本はeマーク。
ファビコンを設定しているサイトだとロゴやちょっとしたイラストだったりする。
ブログだと、FC2だと馬マークとか ココログはココログマーク。アメーバは緑のマーク。
楽天ブログなど一切変更がきかないブログもあるけれど、FC2やココログでは変更ができるので、変更してしまおう！（ここではココログの記事です）
まずは アイコンを用意します。
１６×１６ PC用 ファイル名何でもOK 拡張子png
３２×３２ PC用 ファイル名何でもOK 拡張子png
４８×４８ PC用 ファイル名何でもOK 拡張子png
１４４×１４４ iPhone用 拡張子png
１５２×１５２ Android用 拡張子png
↑スマホは目安。実際はいろいろなサイズがあるらしい。
jpeg→ico化も変換サイトによっては可能です。
ちなみにどこに置く変わらず同じ物が4つ必要に。
PC・スマホ用のicoアイコンを作ろう。
半透過マルチアイコンfavicon.icoを作ろう!さんから
http://ao-system.net/alphaicon/
16・32・48の３つの画像をicoファイルに変換してダウンロード。
（152を入れると黒いアイコンになってしまうのでひとまず除外）
アイコンのできあがり。ファイル名はfavicon.ico のままにしておきます。
ココログのブログにアップロードする。
管理ページトップ > コントロールパネル > ファイルのファイルマネージャーで、blogフォルダがある「ホーム」の階層にアップロード。
サイトを見たときに、表示できるHTMLを入力。
管理ページトップ > ブログ一覧 > wshinchan-next （該当ブログ）> 設定 > ブログの基本情報の、
ブログのサブタイトル内に（ここはheadにあたる）
<link rel="shortcut icon" href="http://じぶんの・・ty.com/favicon.ico"> をいれる
com./blog/favicon にならないように注意。
これでPC上では問題なくファビコンが表示されると思います。
↓スマホでPCで閲覧を選んでも表示されます。
iPhoneとアンドロイド用のアイコンを作ろう。
追記：結論ココログでは無理なようです、この記事の最後に記載します。
実はここで大苦戦をしました。
なぜかわからないのですが、表示されない・・・。
先人様方のブログを参考に、まとめた物を表記します。
★本来スマホではアイコンをウェブクリップアイコンとよぶそうです。
しかし実際作成すると、PC用に作ったファビコンと混在することがありっぽい。（自分の経験）
chrome・Yahoo!・ブラウザでも表記が異なり、さらに私のXperia 結構前のIS12sでは表示されるのに、ちょっと前のZ3では表示されない。chromeのキャッシュが消えないので実際どうなっているかわからない などなど・・・
表示方法も、ホーム画面にする。お気に入りにするなど、設定も違いまして・・・。
私はアップル端末が無いため、妹にお願いするも正しく表示されずと あれこれ設定を変えて悩んで1日。時間の無駄なのでとりあえず設定して自分でチェックすることはあきらめました。
私のブログを、ご覧になって、お気に入りに入れてみてうまくいっていれば方法は合っていると思ってくださいね。
※追記 ちょい前のギャラクシーも表示可。
★iPhoneは144×144でアイコンを作成し、
apple-touch-icon.pngもしくは、
apple-touch-icon-precomposed.pngファイル名にする。
iPhoneの設定は、作成したアイコンをindexと同じ階層に置くだけ。（HTMLの記述不要）
なのですが・・・・
ココログの場合、どの階層に置くのかが疑問。
・ファビコンのアイコンは
ttp://wshinchan-next.cocolog-nifty.com/favicon.ico
↑ここにあります。
・iPhoneのアイコンは本来であれば同じ場所に設定するのでは？となるとttp://wshinchan-next.cocolog-nifty.com/apple-touch-icon.png
↑この位置に置くはずです
が、indexと同じ階層に置いてくださいと説明があり、そうなると、
↓ココログはindexと同じ層にするには /blog/が入るので、
ttp://wshinchan-next.cocolog-nifty.com/blog/index.html
ttp://wshinchan-next.cocolog-nifty.com/blog/apple-touch-icon.png
↑この位置に置かなくてはいけないのか？と疑問になります。
よくわからないので、とりあえず、どっちの階層にも置きました。（これで都合が悪くなることは無いと思う）
そして、iPhoneのもう一つの疑問が
apple-touch-icon.pngもしくは、
apple-touch-icon-precomposed.pngファイル名 どっちのファイ名がいいのよ！の件。
・precomposedあり→光沢有り アンドロイド変更無し
・precomposedなし→光沢無し アンドロイド変更無し
結果的にはアンドロイドのみならばprecomposed無しのみのファイルでOK。
これは賛否両論でして、precomposedを勧める人もいれば勧めない人もいる。
無いと表示されない というサイトもある。
これも、よくわからないので、どっちの階層にも置きました。
（HTML記述順が関係し、iPhoneとアンドロイドで分けることも可能）
iPhone対策は、
ホームの階層に、2つのファイル。
indexのある階層に、2つのファイルを置いています。
これが裏目に出なければ良いのですが・・・・。
この時点で、iPhoneで見てもらって送ってもらったスクリーンショット。
←これ、違いすぎるだろ・・・
←この記事の最後までやり通したあとで、キャッシュまで消してもらってホームにしてもらった結果・・・。
記事そのものがアイコンになった。。。。
ん～～～ iPhoneを自分でいじれないのが痛い。
気を取り直して、アンドロイド用のアイコン製作にかかる。
★アンドロイドのアイコン・ウェブクリップアイコンは、iPhoneで作った画像をそのまま利用すれば良い。
ただしHTMLの記述が必要になる。
ココログのファビコンアイコンと同じように入力します。
管理ページトップ > ブログ一覧 > wshinchan-next > 設定 > ブログの基本情報の、
ブログのサブタイトル内に、
「<link rel="apple-touch-icon-precomposed" href="http:// 画像の置いてある場所・画像名.png" />」
↑この場合、ファイルの場所はiPhoneの時に作成した、4個のどれかのリンクで良いって事になる。
しかしここでまた疑問発生。
link relなのですが、サイトによって記述が異なる。
precomposedなし
<link rel="apple-touch-icon" href="画像のパス">
precomposedあり
<link rel="apple-touch-icon-precomposed" href="画像の置いてある場所/apple-touch-icon-precomposed.png">
precomposed両方表記
<link rel="apple-touch-icon-precomposed apple-touch-icon" href="画像の置いてある場所/apple-touch-icon-precomposed.png" />
そもそも、iPhoneは勝手に読み込んでくれるはずなので記述不要。
アンドロイドのため記述をしてしまうと、iPhoneは記述を優先するのであろうか？
そして、ファイルに関してだが、実はファイル名はapple-touch-icon.pngではなくて、任意でも。画像の場所を指定するので。
結果、私の記述はこうなった。head内です↓これ記述しても意味ないのでご注意
笑門来福！
<!--20160114修正 -->
<!--PC・スマホのファビコン・アイコン名はfavicon.ico 場所ホーム-->
<link rel="shortcut icon" href="http://wshinchannext.cocolog-nifty.com/favicon.ico">
<!--PCのファビコンここまで-->
↑ここまでの記述は全く問題なし
<!--iPhoneのウェブクリップアイコンは、ホームとblog下indexに。自動で拾う。ファイル名はapple-touch-icon.pngとapple-touch-icon-precomposed.png -->
<!--iphonのウェブクリップアイコンここまで-->
↑iPhone用は4つのファイルを用意し自動で拾ってくれるようにしてみた。ちなみにこの方法をとっている人はいない
<!--アンドロイドのウェブクリップアイコン・アイコン名iPhoneと同じ物を拾わせる -->
<link href="/apple-touch-icon-precomposed.png"rel="apple-touch-icon-precomposed">
↑そのままのパス
<link rel="apple-touch-icon-precomposed apple-touch-icon" href="http://wshinchannext.cocolog-nifty.com/apple-touch-icon.png" />
↑一番上の階層
<link rel="apple-touch-icon-precomposed apple-touch-icon"href="http://wshinchannext.cocolog-nifty.com/blog/apple-touch-icon.png" />
indexのある階層
<!--スマホのウェブクリップアイコンここまで-->
そして実際にアンドロイドで確かめてみる。
先にZ3ではなく、キャッシュの全く入っていない IS12S機で試してみた。
なんじゃこりゃ～である。
まず左から
chrome・PCで閲覧からホームに
chrome・スマホ版でホームに
ブラウザ・スマホ版でホームに（お気に入り→ホームに）
ブラウザ・PC版でホームに（お気に入り→ホームに）
↑ウェブクリップアイコンとして成功したのは、ブラウザのスマホ版からホームにしたものだけだった。
※数回試すと、一番右も成功→結果的に、ブラウザでは成功。
chromeの失敗点は、ファビコンが表示されたということ。
が！！！！
次に最近のXperiaZ３機で
↓もっとなんじゃこりゃーである
左上から
Yahoo!ブラウザ ミニですがファビコンを拾っているっぽいです。
chromePC版 chromeスマホ版 chromeスマホ版個別記事
↑左下から
ブラウザお気に入りから
ブラウザPC版から
そして笑える Google先生もこの有様。
赤いリボンの上にマークが表示されてしまうのです。
chrome→話にならない
ブラウザ→ショートカットの作り方によって画像が表示されるが、ファビコンを拾っている。
なんかもう、自分のスマホが駄目なのか、設定が駄目なのか、わからない状態です。
スマホのchromeキャッシュをクリアしても駄目。キャッシュ関係も検索してかなり削除しても変わらずデス。
しかし、IS12Sでは問題なく「ウェブクリップアイコン」を拾っているので、私の記述には問題が無いのでは？と思います。
ウェブクリップと、ファビコンの画像を微妙に変えているので判明しました。ファビコンは顔だけウェブクリップは全身
これは数日たてば キャッシュ関係で結果が変わるかもしれないのですが。
ココログブログで、実際にウェブクリップアイコンを作成した人のサイトも確認しましたが、iPhone上では成功したとあっても、アンドロイドで確認をとった人が見当たらず、該当のブログを自分でホーム画面に入れても無理で・・
もう 何がなにやら・・・・
ということで、アイコンだけで2日近く時間を取ってしまったので、ここでいったん中断しようと思います。
ネットの情報は数ヶ月でどんどん覆されるので、もう少し待ってみようと思います。
※アイコンがいろいろだと楽しいのにねぇ・・・。
追記・ちょっと古いギャラクシーでもIS12Sと同じ結果です。
ココログブログでのウェブクリップアイコンは表示されない。
私のブログはFC2もあるのですが、こちらでもウェブクリップアイコンにチャレンジしてみることにしました。
結果・・・ココログとFC2の最大の違いに気づきました。
ココログ→スマホのHTMLがいじれない。
FC2→スマホもカスタマイズできる。
そこで、まず、FC2でPC用のHTMLのhead内に、ウェブクリップ（<link href="/apple-touch・・・）を入れました。
その後、chrome・ブラウザでHOMEに設置したところ馬マークに。（ウェブクリップが表示されない）
その後、FC２のスマホカスタマイズで、head内にウェブクリップ（<link href="/apple-touch・・・）を入れたところ、見事に表示されました。
結論→スマホのheadにHTMLを入れないとウェブクリップアイコンは表示されないようである。（ただし、スマホが古い場合は成功することも・iPhoneは未確認）
そして、もう一つ。chromeとブラウザでは表記が異なる。
↓左から
ブラウザでPCで閲覧よりお気に入りに。ファビコンを拾う。
ブラウザのスマホ版でお気に入りに。何も拾わない。←理由は不明・課題
※FC２の件は解明しました。ブラウザでウェブアートクリップを表示する方法
→該当のTOP画面でブックマークに保存・その際追加先をブックマークにする。
その後ブックマークを開き先ほどブックマークした物を長押し
ホームにショートカットを作成→ブラウザでもウェブアートクリップが表示されます。
chromePCで閲覧よりお気に入りに。ウェブクリップアイコンを拾う。
chromeスマホ版お気に入りに。ウェブクリップアイコンを拾う。
という結果になりました。ブラウザからは、赤いリボンを消せないのですが、古い機種はリボンが表示されない事からバージョンの問題なのでは？と思います。
消し方がわかればそのうち追記します。ファビコンを拾いウェブクリップアイコンを拾わないのも謎です（キャッシュの問題？）
chromeは、最近の機種では正確に拾っていたのかもしれません。
MだのCだのは、ココログ側がどこかに設定しているアイコンなのでは？と。
ココログの場合、上級プランでもスマホはいじれないようで、
というか、ココログの上級プランは難しすぎて簡単にはいじれない。
iPhoneについてですが、実際確認を取れている方がいるようなので、どこかの層にiPhone用のアイコンを置いておけば拾うのかもしれません。（ただしHTML記述はできないため、光沢についての指定などは不可）
以上、ココログでのウェブクリップアイコンについて でした。
この記事は2016年1月時点での記事です。
