Lognote

ネット集客に強い整体院サイトを制作

iphone-icon-black-thumbnail

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

公開日:2016-10-30
最終更新日:

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

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

以上、「WordPressでiPhone用アイコンの透過部分が黒くなる問題を疑似的に解決する方法」という記事をお届けしました。

-WordPress

この記事のタイトルとURLをコピーする
WordPressでiPhone用アイコンの透過部分が黒くなる問題を疑似的に解決する方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

ogp-twitter-card-matome-thumbnail

WordPressのSEO対策で必ず設定するべきOGPとTwitter Cardコードまとめ

WordPressでブログを運営するうえで、まず初めにやってもらいたいSEO対策の一つとしてOGP設定というも …

CSSでオリジナルのFeedly購読ボタンを作成する方法

皆さんはブログにFeedlyボタンは設置していますか?リピーターを増やすには必須のサービスですが、公式...

xserver-morisawa-thumbnail

超美麗!無料で日本語のWebフォントが使えるエックスサーバーの新機能が凄すぎた!

エックスサーバーに日本語Webフォントのモリサワを無料で導入できる新機能が追加されました。モリサワと...

views-display-thumbnail

WordPressで記事ごとに閲覧回数を表示する方法

「自分のブログもそこそこ読まれるようになってきたなー」 そんなとき、どれくらい読まれているのか訪問者に見せたく …

affinger4-hukidashi-thumbnail

WordPressで会話風ふきだしを表示させるCSSカスタマイズ

AFFINGER4に実装されている会話風ふきだし機能。あれってすごく便利そうですよね!この記事ではWordPres...

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい