💻【Bloggerカスタマイズ】iPhone/Androidにも対応！ファビコンをサクッと実装してみた
💡 はじめに：タブ迷子からの脱却！
こんにちは！ブログを運営していると、ついついタブを開きすぎて「あれ？自分のブログはどれだっけ？」って、タブ迷子になることありませんか？特に Safari だと、気づくとタブがえらいことになっています…😅
この「タブ迷子」を解消するために、以前から気になっていたファビコン（Fabicon）をiPhoneやAndroidにも対応させてサクッと実装してみました！
どうせやるなら、PCブラウザだけじゃなく、スマホのホーム画面に追加したときにもちゃんと表示されるようにしたい！ということで、ひとまず納得のいくものができたので、その実装手順をシェアします。
🛠️ 実装手順：対応ファビコンのコードを設置する
ファビコンを各種デバイスに対応させるには、HTMLの<head>内にいくつかの<link>タグを追加する必要があります。
⚠️注意点：
- 事前にファビコン画像を用意する：
180x180（iPhone/iPad用）と192x192（Android用）の画像を用意するのがおすすめです。- CANVAや画像生成AIなどでサクッと作成しましょう。
- 画像をBloggerにアップロードし、URLを控える：
- 用意した画像をBloggerのサーバーなどにアップロードし、画像の公開URLを取得しておいてください。
1. コードをコピー＆ペースト
Bloggerの「テーマ」 ＞「HTMLを編集」から、</head>タグを閉じる直前に以下のコードを貼り付けてください。
コピーして**HEADタグを閉じる直前に貼り付けてください。
<!-- iPhone / iPad ホーム画面用 -->
<link rel="apple-touch-icon" sizes="180x180"
href="https://あなたの画像URL/apple-touch-icon.png" />
<!-- Android -->
<link rel="icon" type="image/png" sizes="192x192"
href="https://あなたの画像URL/android-chrome-192x192.png" />
<!-- 通常ファビコン -->
<link rel="icon" type="image/png" sizes="32x32"
href="https://あなたの画像URL/fabicon-32x32.png" />
※ 上記のコードは例です。
📌 ポイント！
href="https://あなたの画像URL/..."の部分を、あなたがBloggerにアップロードした画像の公開URLに必ず書き換えてください。
2. コードをカスタマイズ（重要！）
今回は「サクッと」実装するため、最低限の3種類に絞りました。
| 対象デバイス | サイズ (px) | コード内の属性 |
|---|---|---|
| iPhone/iPad (ホーム画面用) | 180x180 | rel="apple-touch-icon" |
| Android | 192x192 | sizes="192x192" |
| 通常ファビコン (PCタブなど) | 32x32 | sizes="32x32" |
あとは、Bloggerのテーマを「保存」すればOKです！これで、各種デバイスに対応したファビコンが設定されたはずです。
📢 試行錯誤ポイント：なかなか反映されない！
設定完了！…と思ったのに、あれ？PCでもスマホでも表示が変わらない！そんなときはキャッシュが原因のことが多いです。
特にSafariは、キャッシュが強力でなかなか新しいファビコンに切り替わってくれないことがあります😭
- PCブラウザ: スーパーリロード（
Ctrl+F5やCmd+Shift+R）を試す。 - スマホ: 閲覧履歴とウェブサイトデータ（キャッシュ）の削除、 再起動 、再度アクセスなど、気長にトライしました。（これが一番大変だったかも😅）
🚀 まとめ
サクッとやろうと思っても、キャッシュの問題で少し手間取りましたが、無事に各種デバイスにファビコンを設定することができました！
これでタブ迷子からも卒業できそうですし、何より**ブログに統一感が出てモチベーションが上がりますね！**
もしファビコン設定で迷っている方がいたら、ぜひこの手順で試してみてください！
0 件のコメント:
コメントを投稿