整体師がWordPressテーマ作りました

Healerは、スマホ&タブレット対応・SEO対策済みの整体院・サロン専用テーマです。

お客様の声やWeb予約カレンダー表示機能など便利機能が搭載されています。

詳しくはこちらから。

公式サイト

WordPressでiPhone用アイコンの透過部分が黒くなる問題を疑似的に解決する方法

iphone-icon-black-thumbnail

WordPressは、カスタマイズからサイトアイコンを簡単に設定できますが、iPhone用アイコンだと透過部分が黒くなってしまうというデメリットがあります。
そんなデメリットを、疑似的に解決してしまおうという方法を見つけましたので紹介いたします。

初めにお断りしておくと、今回の解決法は完全な解決策にはなりませんので予めご了承ください。

WordPressのサイトアイコン設定

みなさんご存知の通り、サイトアイコンの設定はカスタマイズからおこないます。

iphone-icon-black-01

ファビコンとiPhoneアイコンを同時に設定できてとても便利ですよね。

iphone-icon-black-02

この場合は拡張子はicoではなくpngで設定することになるのですが、周りを透過させた画像を使うとiPhone用アイコンだけ黒くなってしまいます。

アイコンを編集しよう

編集というほどでもないですが、単純に周りを白く塗りつぶせば黒くなる問題は解決できます。
ですが、今回は白ではなくグレーで塗りつぶすところがポイントです。

iphone-icon-black-03

カラーは#f2f2f2を使います。
アイコンができたらカスタマイズからアップロードしなおします。

キャッシュを削除しよう

キャッシュが残っているとアイコンは黒いままなので、設定から削除します。

iphone-icon-black-04

設定 ⇒ Safari

iphone-icon-black-05

履歴とWebサイトデータを消去

iphone-icon-black-06

履歴とデータを消去

アイコンの再度確認してみよう

iphone-icon-black-07

ホーム画面にサイトを登録しなおします。

iphone-icon-black-08

若干グレーっぽさはありますが、そこまで目立つことはないかと思います。

今回のポイントはここです!

iphone-icon-black-09

モバイルSafariでお気に入り登録したサイトは、画面上部の検索窓をタップするとアイコンが表示されます。
今回のポイントはここなのですが、背景がグレーなので疑似的に透過アイコンのように表示することができるのです。

ど……どうでしょうか?……苦し紛れ感が否めませんが、「いいかも!」と思っていただけた方はお試しください!

iphone-icon-black-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

Gravatarに登録すると、お好きな画像をアバターに設定できます。