apple-touch-icon の変更

このサイトのapple touch icon を作らなきゃなと思い、ちゃんとしたものを。

地味に他のapple-touch-iconも変更を加えています。

それはともかく・・・

そのサイトに関しては今までルートディレクトリに[apple-touch-icon.png] or [apple-touch-icon-precomposed.png]を置いただけでした。
iphoneのみですと、これだけでホーム画面に追加するときにこの画像がアイコンとして使われます。

ですので、WordPressに関してもそれでいいのかと思い、調べずにやってみたところfavicon画像が表示されてしまいました。

調べてみたところ、簡単でした。

wpcontent/themes/テーマ名/header.phpと wpcontent/plugins/wptouch/themes/core/core-header.phpの内に

<link rel="apple-touch-icon-precomposed" href="~/~/apple-touch-icon-precomposed.png" />

を追加するだけでした。

私の場合、ホーム上に表示される画像にエフェクトを掛けたくないので precomposed を追加しております。

これを入れて置くとアンドロイド端末にも対応できるみたいですね。

知らなかった・・・

別サイトの方も早速対応させようと思います。

他の変更点は以下の画像の赤丸部分。

タイトルロゴに色を付けて、それに合わせてメニューボタン、faviconも変更いたしました。

着々と完成に近づいてきました。

即席で作ってしまったブログボタン等、課題がまだまだあるのでドンドン進めて行こうと思います。

ひとまず、about this site という項目を作ってページを作り終えました。

footerに入れたので少し見難くなってしまいました。これも改良の余地ありですね。

関連記事