【QooQカスタマイズ】スマホのホーム画面に表示するアイコンを追加する

今回もBloggerの人気テンプレート「QooQ」をカスタマイズしていきましょう。iPhoneやandroidなどのスマホのホーム画面にブログのブックマークを追加すると、アイコンが表示されます。今回はそのアイコン画像を自分の好きなものに設定したいと思います。

最終的な仕上がりとして、このような感じでホーム画面に追加したブログのアイコンを設定することができました。自分はBloggerのサービスが好きなので、アイコンもBloggerにしてみました。QooQのデフォルトではアイコンが設定されてないため、ブログのキャプチャのようなものが表示されるのですが、このようにアイコンを設定しておくと少し手を掛けている感がでて、いい感じですよね。

この画像を使いました。iPhoneで最適化されるように画像を加工しています。android（Pixel3）でも確認しましたがいい感じに表示されていました。加工にはGIMPを使いました。GIMPだとフォトショのように加工できるので便利でした。

テンプレートに反映させるには以下のように記述します。

アイコン画像のURLの部分に、アップロードした画像のURLを貼り付けてください。自分は記事に書いているときに表示したい画像をいつものようにアップロードし、画像を右クリックして「画像アドレスをコピー」を選択して、Bloggerにアップロードしたアイコン画像のURLを調べました。

簡単にスマホのホーム画面にアイコンを表示することができました。今までこの設定をしないままでしたが、ようやく重い腰を上げて設定をしましたが、簡単だったのでもっと早くやればよかったと後悔です。もしどのようなアイコンを表示するかお悩みの方がいましたら、Bloggerアイコンを表示するのも良いかもしれません。皆様の参考になれば幸いです。