このブログの内容
スマホのホームにブログを貼ったら
スマホのホームにブログを貼ったら、アイコンが出ない！
ファビコンの設定はしたのに？
という方いませんか？
実は、ファビコンの設定の他に、スマホ用の設定が必要なのです。
ファビコンって何ですかという方も大丈夫。
ファビコンの設定方法からご説明しますね！
ファビコンって何？
ファビコンとはこれです。
画像はGooglechromeのタブに出ているファビコンです。
次の画像はGooglechromeのブックマークバーに出ているファビコンです。
ファビコンはパソコンでのアイコンになります。
ファビコンの設定だけしている状態では、スマホだとこんなオレンジbloggerアイコンのまま。
スマホ用のアイコンも設定するとこんな風になります。
ファビコンもスマホ用のアイコンも設定しておきたいですね！
ファビコンを設定しよう
画像を作る
まずは画像を用意しましょう。
正方形かつ100kB未満じゃないとエラーになります。
私は256×256で作りました。
が、もう少し小さくてもいいかもです。
画像は小さいのでシンプルに作りましょう。
色もはっきりしていると目立ちますが、サイトの色に合わせつつがんばりたいですね。
私はCanvaで作りました！↓
Canvaは
コチラです。
設定をする
bloggerの設定ページから設定をします。
画像の「ファビコン」をクリックして、画像を設定します。
これで、パソコン用のファビコンは設定ができました。
反映に少し時間がかかることもあるようです！
少し待ってみてくださいね。
スマホ用のアイコンを設定しよう
ファビコンの設定をしただけではスマホでアイコンが表示されません。
画像を作る
画像を用意しましょう。
画像は同じく256×256で作りました。
パソコンよりも大きく表示されるため、私は少し画像を変えました。
画像を未公開ページに貼る
画像をページを使ってbloggerにアップします。
あとで使うのでページは公開せずに、いったん閉じます。
後ほど使う際は、画像リンクだけをコピーします。
画像リンクはグレーの部分です。
長いです！
設定をする
スマホ用の設定はテーマのHTMLの編集から行います。
次のコードをhead内に書きます。
<!-- ファビコン -->
<link href='画像のアドレス' rel='apple-touch-icon-precomposed'/>
こんな風になります。
「画像のアドレス」と書いたところに、ページで用意しておいた画像リンクをいれてください。
これで、スマホでもアイコンがでるようになります。
おわりに
ファビコンの設定、いかがでしたでしょうか？
パソコンのブックマークや、スマホのホームにオリジナルのアイコンがあると、埋もれることなくその後も見つけてもらいやすいですよね！
ぜひチャレンジしてみてくださいね。
無料で自由なbloggerを楽しみましょう！
0 件のコメント :
コメントを投稿