ぼやけた Simplicity の検索アイコンをきれいに表示

検索アイコンをきれいに表示

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

Simplicity の検索フォームには、 虫眼鏡の検索アイコンが表示されます。

この検索アイコンは PNG 画像であるため、輪郭がぼやけている…。

ぼやけている検索アイコン

そこで輪郭をきれいに表示する 3 つのカスタマイズをご紹介します。

その 3つとは、 Font Awesome アイコン、 Base64 に変換した SVG 、 Material icons で検索アイコンを表示するものです。

Font Awesome を :before 擬似要素で表示

Font Awesome アイコンはフォントであるため、輪郭がぼやけることがありません。

Font Awesome アイコンを検索アイコンにするためには、以下の CSS を子テーマの style.css に追加します。

#searchsubmit {
  background: none;
}

#searchform:before {
  content: '\f002';
  font: 21px/1 FontAwesome;
  position: absolute;
  right: 8px;
  top: 5px;
}

これでぼやけることなく、きれいに表示されるようになりました。

Font Awesomeアイコンで検索アイコンを表示

上記の CSS は、検索フォームが Simplicity デフォルトのままであることを想定しています。

font のサイズ、 righttop の値はサイトに合わせてご変更ください。

また、 color を追加し、アイコンの色を変えることもできます。

Base64 に変換した SVG を CSS に埋め込み

ベクター形式の SVG は、どんなに拡大しても画像が荒くなりません。

そのため、 1 つの画像ファイルであらゆる画面サイズに対応できると、多くのサイトが使っています。

Simplicity の検索アイコンは Base64 に変換した PNG ですが、これを Base64 に変換した SVG に変更します。

Base64 に変換することで、画像を使っているにも関わらず HTTP リクエストが発生しません。

以下の CSS を子テーマの style.css に追加します。

#searchsubmit {
  background: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMTUuNSAxNGgtLjc5bC0uMjgtLjI3QzE1LjQxIDEyLjU5IDE2IDExLjExIDE2IDkuNSAxNiA1LjkxIDEzLjA5IDMgOS41IDNTMyA1LjkxIDMgOS41IDUuOTEgMTYgOS41IDE2YzEuNjEgMCAzLjA5LS41OSA0LjIzLTEuNTdsLjI3LjI4di43OWw1IDQuOTlMMjAuNDkgMTlsLTQuOTktNXptLTYgMEM3LjAxIDE0IDUgMTEuOTkgNSA5LjVTNy4wMSA1IDkuNSA1IDE0IDcuMDEgMTQgOS41IDExLjk5IDE0IDkuNSAxNHoiLz4NCiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+DQo8L3N2Zz4=') 29px/29px;
}

すると Font Awesome アイコンとは少し違った形状の、検索アイコンが表示されます。

Material iconsで検索アイコンを表示

今回使用した SVG は、 Material icons の search アイコン。

search アイコンを SVG でダウンロードし、 Base64 Decode and Encode で Base64 に変換しています。

29px/29px を変更することで、大きさが変わります。

Font Awesome の検索アイコンが、しっくりこない方におすすめ。

また、 Material icons 以外の SVG に変更も可能です。

Material icons を遅延で読み込み CSS の :before 擬似要素で指定

Base64 に変換した SVG は、 CSS で色を変えることができません。

また、 CSS の記述が、ものすごく増えるのもデメリット。

そのまま Material icons を使うと、デメリットを解消できます。

ただし、 Material icons を表示するには、スタイルシートを読み込む必要があります。

CSS はレンダリングをブロックするため、「Google Fonts を遅延で読み込みサイト表示を高速化」で紹介している方法で遅延させ読み込みます。

まずは、子テーマの javascript.js に以下のコードを追加します。

window.WebFontConfig = {
  google: { families: [ 'Material+Icons' ] },
  active: function() {
    sessionStorage.fonts = true;
  }
};
(function() {
  var wf = document.createElement('script');
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

続けて、子テーマの style.css に下記の CSS を追加します。

#searchsubmit {
  background: none;
}

#searchform:before {
  content: '\e8b6';
  font: 29px/1 'Material Icons';
  position: absolute;
  top: 2px;
  right: 4px;
  visibility: hidden;
}

.wf-active #searchform:before {
  visibility: visible;
}

見た目は、 Base64 に変換した SVG を使った場合と同じです。

font のサイズや righttop の値は、サイトに合わせてご変更ください。

また、 color で色をつけることも可能です。

細部にまでこだわったカスタマイズを

今回のカスタマイズは、かなり細部にこだわったものです。

そのため、カスタマイズをしたからといって、ユーザビリティやサイト訪問者の満足度が大きく向上することはないでしょう。

しかし、神は細部に宿ると言います。

Apple 社 が Apple 社である所以は、細部にまでトコトンこだわったから。

あなたのサイトも細部にまでこだわってはいかがでしょうか。