こちら、私のスマートフォン（iphone6）で購読中のはてなブログをお気に入り登録し、Safariのページ内に集めたものになります。

皆さんオシャレなアイコンが表示されていますね。
ブログ名を出していいかどうか分からないので、一応名前は伏せさせていただきますねｗ

 

さて、この画像をもう一度ご覧ください。

 

あれあれあれ～？

なんか一つだけ変なアイコンが混ざっているぞぉ～？

 

誰だ誰だ～ｗｗｗ？
こんなアイコンのやつは～～ｗｗｗ？

 

 

うん。

 

 

私だーーーーーーーーｗｗｗ！

 

何が起きた？

スマホでの表示方法をレスポンシブデザインに変えてからこうなってしまったようなんですよね。
はてなブログで設定しているはずのアイコンではなく、ブログ名の最初の一文字が表示されてしまうのです。

『記』となっているのはトップページを記事一覧にしているからです。

トップページを本来のものに戻すと、このように『元』の字が表示されるようになります。

『元アベンジャーのCOJ』の頭文字ですねｗ

 

レスポンシブを解除すると登録しているアイコンが表示されるようになります。

 

現在はレスポンシブデザインに戻していますので、文字アイコンが表示されているはずです。 

 

本当にレスポンシブデザインが原因なの？

自分のサブブログを立ち上げていろいろなテーマを試したり、他の方のブログも確認してみたのですが、このような表示になっているのはレスポンシブデザインにしているブログだけでした。

そのため、テーマは関係なくレスポンシブデザインにしていることが原因であると推測されます。

スマホでの表示をレスポンシブデザインにしている方は、後述の特別な設定をしていない限り、私と同じように文字アイコンになっている可能性が高いです。

実際、購読しているブログの中にも、私と同じように頭文字が表示されている方のブログがいくつかありました。
その方は意図的に先ほどの画像からは外していますｗ

ですので、「なんで俺のブログをお気に入りに入れてないんだ！」と思われた方は、私と同じ症状が発生しているかもしれません。

ちなみに普段はパソコンからブログを巡回していますので、今回はこの記事の為にお気に入りアイコン画像を集めただけに過ぎず、「俺のブログがお気に入りに入ってないじゃないか！　今後の付き合いを考えさせてもらう！」と怒ったりしないでくださいｗ

 

アイコンを表示させるやり方はあるようなのですが……

・アイコン用画像としてapple-touch-icon.pngファイルを作成する
・上記のファイルをサーバーにアップする
・上記ファイルを指定して表示させるhtml構文をhead要素に記載する

 

すごく簡単に述べるとこのようなやり方で指定通りのアイコンが表示されるようになるらしいのですが、いろいろ試してみても駄目でした……。

はてなフォトライフにアイコン画像のapple-touch-icon.pngをアップして、『headに要素を追加』の項目に見よう見まねでhtmlを記載してみたのですが、別の文字アイコンが表示されたりとどうも上手くいきません。

画像のアップ場所が悪いのか、html自体が間違っていたのか。
素人の私には少々難しい問題だったようです。

詳細が気になる方は『apple touch icon』もしくは『アップルタッチアイコン』でググってください。
そして解決策が分かったらこっそり教えてくださいｗ

 

皆さんが気になるのかが気になる

私はスマホからブログを見ないのでいまいちピンと来ないのですが、やっぱりアイコンが変だったら気になりますか？
このことが理由で現在レスポンシブデザインをやめようかどうかちょっと迷っているところですので、良かったら教えてください。

出来たらやめたくないんですけどね。
レスポンシブデザインの方が設定が一箇所で済んで楽なので（怠惰）。