【LION MEDIA】検索アイコンを正しく(欠けずに)表示する方法

【LION MEDIA】検索アイコンを正しく(欠けずに)表示する方法

<事象>検索アイコンが欠けている…?

当サイトは、WordPressの無料テーマ「LION MEDIA」を使っています。

LION MEDIAのTOPページには、デフォルトで記事検索の機能がついており、画面右上に「検索アイコン(虫眼鏡のマーク)」が表示されています。

…ですが、このアイコン…

欠けてる気がするwww
私のサイトだけ…?

細かいことながら、こういうのって一度気づいちゃうと、直すまで地味に気になっちゃうんですよね。。。
ですが、ググっても同じ事象の報告が見当たりませんでした。

困ってWEBデザイナーの友人に相談したところ、無事に解決することができました(ありがたすぎる…)ので、その方法を残しておきます。

この記事を読むと…
→ なぜか欠けてしまっている「検索アイコン」を正しく表示できます

<対応>3ステップで解決!

解決方法を一言でいうと、「検索アイコンを再度追加」したら欠けずに表示できました。
以下3ステップになります。

FTPに接続して「icomoon.svg」をダウンロードする

まずは、自分のサイトの「FTP情報」を確認します。
Xserverを利用している場合は、以下いずれかで確認できます。

  • Xserver登録時に届いたメール
    (件名:【Xserver】■重要■ サーバーアカウント設定完了のお知らせ[試用期間])
  • Xserverのサーバーパネル > サブFTPアカウント設定 > FTPソフト設定

FTPFile Transfer Protocol) とは?
→ 「ファイル転送プロトコル」のこと。
自分のPCとサーバーの間で、ファイルのやり取りができる。

確認できたら、FTPソフトを起動します。
(私は「Cyberduckhttps://cyberduck.io/)」というFTPソフトを使ってます)

このアヒルの狂気に満ちた表情が好き

先程確認した「FTP情報」でサーバーに接続して…
以下のフォルダに入っているicomoon.svg」というファイルをダウンロードします。

[ドメイン名(xxxxx.com)] > public_html > wp-content > themes > lionmedia > fonts

icomoonで検索アイコンを追加

icomoonhttps://icomoon.io/)とは?
→ アイコンフォントを配布している素材サイト。LION MEDIAにデフォルトで入っているアイコン16種類は、このicomoonを使用している。

「icomoon」の公式サイトにアクセスして、検索アイコンを追加し直します。

アイコンの追加方法については
以下の記事が大変わかりやすくまとまっており、助かりました。

LION MEDIAのテーマでアイコンを追加する方法

アイコンを追加したら、icomoonより設定ファイル(zip)を出力(=export)します。
zipを解凍してfontsフォルダ内に、以下4つのファイルがあることを確認します。

  • icomoon.eot
  • icomoon.svg
  • icomoon.ttf
  • icomoon.woff

これらのファイルを、FTPソフトでサーバー(=icomoon.svgが入っていたフォルダ)にアップロードします。

さらに、設定ファイルのzip(fontsフォルダと同階層)に、「style.css」があることを確認します。
※こちらのファイルは次のステップで使います(サーバーへのアップロードはしない)

WordPressで「icon.css」を修正

WordPressの管理画面から、LION MEDIAの親テーマを有効にします。
→ 外観 > テーマ > LION MEDIA

テーマエディターから「icon.css」を修正します。
→ 外観 > テーマエディター

<1箇所め>
問題の、欠けている検索アイコンは
.icon-search:before
です。こちらの「アイコン番号」を変更します。

<2箇所め>
@font-face
のurlの文字列(下記画像の赤く塗りつぶしている箇所)を変更します。

前のステップで、zip内に「style.css」があることを確認しました。
こちらのファイルに
@font-face
が記載されているので、まるっとコピペします。

「icon.css」を2箇所修正できたら、「ファイルを更新」をクリック。
欠けていた検索アイコンが正しく表示されているはずです。

  • アイコンが表示されない場合は、キャッシュのクリアをしてみましょう
  • 作業が終わったら、LION MEDIAの子テーマに戻すのを忘れずに!

<結果> 欠けていない検索アイコンを表示できた

私の場合は、上記の対応で無事に検索アイコンを表示することができました。

そもそもなんで欠けていたのかは…わかりません…w

解決したのでヨシ!!

IT / プログラミングカテゴリの最新記事