【QooQカスタマイズ】スマホのホーム画面に表示するアイコンを追加する
本ページはプロモーションが含まれています
今回もBloggerの人気テンプレート「QooQ」をカスタマイズしていきましょう。iPhoneやandroidなどのスマホのホーム画面にブログのブックマークを追加すると、アイコンが表示されます。今回はそのアイコン画像を自分の好きなものに設定したいと思います。
どんな風にアイコンを表示できるようになるのか
最終的な仕上がりとして、このような感じでホーム画面に追加したブログのアイコンを設定することができました。自分はBloggerのサービスが好きなので、アイコンもBloggerにしてみました。QooQのデフォルトではアイコンが設定されてないため、ブログのキャプチャのようなものが表示されるのですが、このようにアイコンを設定しておくと少し手を掛けている感がでて、いい感じですよね。
どの画像を使ったのか
この画像を使いました。iPhoneで最適化されるように画像を加工しています。android（Pixel3）でも確認しましたがいい感じに表示されていました。加工にはGIMPを使いました。GIMPだとフォトショのように加工できるので便利でした。
Point
- 画像のサイズは「180px × 180px」が最適です
QooQへの設定方法はどうやるの？
テンプレートに反映させるには以下のように記述します。
<link rel="apple-touch-icon" href="アイコン画像のURL" />
アイコン画像のURLの部分に、アップロードした画像のURLを貼り付けてください。自分は記事に書いているときに表示したい画像をいつものようにアップロードし、画像を右クリックして「画像アドレスをコピー」を選択して、Bloggerにアップロードしたアイコン画像のURLを調べました。
注意事項
- アイコン画像を貼り付ける際に末尾に「/」を必ず記述しましょう。エラーになります
- このページのタグをそのままコピペすれば問題ありません
まとめ
簡単にスマホのホーム画面にアイコンを表示することができました。今までこの設定をしないままでしたが、ようやく重い腰を上げて設定をしましたが、簡単だったのでもっと早くやればよかったと後悔です。もしどのようなアイコンを表示するかお悩みの方がいましたら、Bloggerアイコンを表示するのも良いかもしれません。皆様の参考になれば幸いです。
