天宮です。
最近はスマホでブログを読む人も多く
スマートフォンでブックマークして
いただいているケースもあるでしょう。
スマートフォンではタッチアイコンで
表示されますが、
現状で確認してみると、
デモ用に作ったブログの方がデフォルト、
ファビコンのベースカラーが
反映してる感じかな…よく分からん（笑）
できれば自分オリジナルのアイコンを
設定したいという人のために
やり方を紹介しておきます。
スマホ用アプリアイコンの設定
手順は- タッチアイコン用の画像を作る
- 画像をアップロードしてURLを取得
- HTMLに画像を読み込ませるコードを追加
タッチアイコン用の画像を作る
192×192pxサイズのPNG画像を作ります。
サイズが違うと表示しない訳じゃないから
あまり神経質に考えなくて良いです。
大体その辺のサイズにしておけばOK
大体その辺のサイズにしておけばOK
フリーの画像加工ソフトで作っても良いし
拡張子PNGで保存できるなら、
無料でアイコン作れるサイトでもOK
画像をアップロードしてURLを取得
ブログ投稿から、先ほど作った画像をアップロードします。
Bloggerの投稿エディターをHTMLモードに切り替え
https～.pngまでが画像URLです。
HTMLに画像を読み込ませるコードを追加
<head>の下にコードを追加します。
テーマを開き <link href を検索
下記を追加します。
<link href='画像URL' rel='apple-touch-icon-precomposed'/>
画像URLの部分に先ほど取得したURLを
入力するのを忘れないようにしてください。
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='画像URL' rel='apple-touch-icon-precomposed'/>
表示を確認してみましょう。
アイコンのデザインが変わりましたね。
無料ブログでアプリアイコンや
ファビコンを自由に変更できるって
けっこうスゴイことです。
そんなにムズカシイことじゃないから
ぜひチャレンジしてみてください。
