WordPressでLION MEDIAのテーマを使い始めてから、まだ一度もアイコンを追加したことがなかったので、いいかげんLION MEDIAのテーマにアイコンを追加してみようと思います。
アイコンを追加すると、サイトのコンテンツで物足りなさを感じる部分にワンポイントなカスタマイズができます。
LION MEDIAのテーマでもともと使用しているアイコン以外に、自分で好きなアイコンを追加して使用したいと思っている方に参考になる方法かと思います。
LION MEDIAのテーマで使われてるアイコン
LION MEDIAのテーマには、テーマをインストールした時点から追加されているアイコンが16種類あります。
- icon-close
- icon-menu
- icon-instagram
- icon-hatebu
- icon-quotation
- icon-line
- icon-pocket
- icon-calendar
- icon-facebook
- icon-folder
- icon-google
- icon-home
- icon-rss
- icon-search
- icon-tag
- icon-twitter
上記の16種類の必要最低限のアイコンはすでに追加されています。そしてLION MEDIAのテーマで元から追加されているアイコンは「IcoMoon」が使われています。元から使われているアイコンでは補えない場合にIcoMoonで追加してしまえばいいのですね。
アイコンを追加する方法はIcoMoonに決定
LION MEDIAのテーマにもとから入っているアイコンはIcoMoonが使用されているので、アイコンを追加する方法はIcoMoonに決定します。使用中のLION MEDIAのテーマに自分の使いたいアイコンをIcoMoonのサイトから追加するだけで済みます。
IcoMoonはWebフォントとして扱えるアイコン素材を配布していて、自作のアイコンや他の素材サイトでダウンロードしたSVGアイコンをWebフォント化することができるサイトです。
はじめにLION MEDIAのfontsフォルダを開く
LION MEDIAにアイコンを追加するときは、はじめにLION MEDIAのfontsフォルダを開きます。
fontsフォルダの場所は「wp-content」⇒「themes」⇒「lionmedia」⇒「fonts」
の順番で進んで開きます。
fontsフォルダを開くと以下の4つのファイルがあります。
- icomoon.eot
- icomoon.svg
- icomoon.ttf
- icomoon.woff
4つのファイルの中の「icomoon.svg」を使用してIcoMoonのサイトでLION MEDIAのテーマにアイコンを追加します。念のためfontsフォルダごとコピーしてバックアップを取っておくか、LION MEDIAのバックアップを取っておくと良いです。
次にIcoMoonでアイコン追加する
次にLION MEDIAのテーマのfontsフォルダに入っている「icomoon.svg」をIcoMoonのサイトでインポートしてアイコンを追加します。
IcoMoonのサイトを開くとサイト右上部に「IcoMoon App」があるのでクリックします。
そして「import icons」をクリックします。そうするとインポートするファイルの選択ができるので、先ほど確認しておいたLION MEDIAの「icomoon.svg」を選択してインポートします。インポート方法はドラック&ドロップでも可能です。
LION MEDIAのicomoon.svgをインポートしたら「YES」と「NO」が表示されます。インポートしたLION MEDIAのicomoon.svgを使用してアイコンを追加しますという確認なので「YES」をクリックしてください。
「YES」をクリック後はLION MEDIAに元から入っているアイコンが表示されます。このアイコン達を全てクリックして黄色い枠表示になるようにします。これは追加するアイコンにLION MEDIAに元から入っているアイコンも一緒に含める作業をしています。
追加したら「Add Icons From Library」をクリックします。色々なアイコンのシリーズがあるので追加したいシリーズの「＋Add」をクリックします。
そうすると追加できるアイコンがズラッと表示できます。LION MEDIAに追加したいアイコンをクリックして決めてください。
決定したアイコンは画面下の「Selection」に追加されます。「Selection」に追加されたアイコンの数は先にLION MEDIAに元からあるアイコンも含まれています。
次に「Generate Font」をクリックします。すると追加したアイコンを確認できるので、確認後に画面右下の「download」ボタンをクリックしてPCに落としてください。
ダウンロードしたときの画面はそのままにしておいてください。LION MEDIAのテーマにアイコン追加するときに使います。
そして追加したアイコンファイルに差し替える
icomoonからPCにダウンロードしたファイルは「icomoon.zip」という名前のZIP形式でダウンロードされているのでicomoon.zipを解凍します。
解凍したicomoonフォルダを開いたら「fonts」フォルダをクリックして以下のファイルがあることを確認してください。
- icomoon.eot
- icomoon.svg
- icomoon.ttf
- icomoon.woff
上記の4ファイルを現在LION MDIAのfontsフォルダに入っているファイルから、icomoonで追加後のファイルに差し替えます。
FTPソフトで差し替えるのが楽かと思います。
FTPソフトは苦手という場合は、レンタルサーバーのファイル管理からでも差し替えできます。
エックスサーバーの場合
ファイル管理でfontsフォルダを開きます。
/ドメイン名/public_html/wp-content/themes/lionmedia/fonts/
icomoon.eot、icomoon.svg、icomoon.ttf、icomoon.woffの4ファイルがあるので4ファイルとも削除します。そしてicomoonでダウンロードした4ファイルをアップロードします。
これでLION MEDIAのテーマにicomoonで追加したアイコンが使えるようになったので、あとはLION MEDIA側で追加したアイコンの情報を追加して実際に使えるようにしていきます。
LION MEDIAのicon.cssにアイコンを追加する
IcoMoonでアイコンをダウンロードした画面を見ながらLION MEDIAのファイルの「icon.css」に、icomoonで追加したアイコンの情報を記述して使えるようにします。
LION MEDIAのテーマの「icon.css」は親テーマのファイルにあります。
/ドメイン名/public_html/wp-content/themes/lionmedia/css/
LION MEDIAにあるicon.cssの中の26行目あたりに以下のアイコン関係の記述があります。
.icon-close:before {content:"\e90e";}
.icon-menu:before {content:"\e90f";}
.icon-instagram:before {content:"\e90d";}
.icon-hatebu:before {content:"\e90c";}
.icon-quotation:before {content:"\e909";}
.icon-line:before {content:"\e90a";}
.icon-pocket:before {content:"\e90b";}
.icon-calendar:before {content:"\e900";}
.icon-facebook:before {content:"\e901";}
.icon-folder:before {content:"\e902";}
.icon-google:before {content:"\e903";}
.icon-home:before {content:"\e904";}
.icon-rss:before {content:"\e905";}
.icon-search:before {content:"\e906";}
.icon-tag:before {content:"\e907";}
.icon-twitter:before {content:"\e908";}
一番下に追加するアイコンを記述します。
記述例
.icon-forward:before {content:”\e969“;}
追加する方法は「アイコン名」と「アイコン番号」を記述して追加します。「アイコン名」と「アイコン番号」はIcoMoonでアイコンをダウンロードしたときの画面に、アイコンと一緒に表示してあります。
たとえば「forward」というアイコンをLION MEDIAに追加する場合
.icon-forward:before {content:”\e969“;}
のように記述します。上記記述で1セットなので、追加したいアイコンの数だけ記述を追加してください。
LION MEDIAに追加したアイコンを表示する
最後にLION MEDIAのテーマを使用しているコンテンツに、追加したアイコンを表示するときの記述です。確認を兼ねて。
- HTMLでアイコンを追加する記述
- CSSでアイコンを追加する記述
2つの方法でアイコンを表示できます。
HTMLでアイコンを追加する記述
HTMLでアイコンを追加する記述は以下のようにしてアイコンを表示します。
<span class="icon-forward">アイコン追加</span>
spanタグでマークアップしてます。開始タグに、アイコンを追加したときのアイコン名を記述します。記述するアイコン名は、先ほどLION MEDIAのicon.cssに追加しているので確認するようにしてください。
このようにしてHTMLの場合はアイコンをLION MEDIAのコンテンツに追加できます。
CSSで追加したアイコンを記述
CSSの場合は以下のように記述してアイコンを追加します。
<span class="icon-test">アイコン追加</span>
HTMLはクラス属性を付けてspan要素にしておきます。
span.icon-test::before {
font-family: "icomoon";
content: "\e969";
color:tomato;
}
CSSはクラス属性に擬似要素「::before」を記述したセレクタにfont-familyプロパティの値をicomoonで記述します。
そして擬似要素に入れるのはアイコンなので追加したときのアイコンの番号を記述します。HTMLのときと同じように、LION MEDIAのicon.cssに追加している番号と名前を確認するようにしてください。
上のCSSの場合は擬似要素がコンテンツの前に適用されるので以下のようにアイコンが表示できます。
表示されない場合はキャッシュを削除してください。
まとめ
LION MEDIAのテーマにアイコンを追加できると、あとはメニューのアイコンやサイドバーのカテゴリー、投稿内などワンポイントでカスタマイズができます
それぞれのサイトで、いい感じにアイコンを使用してみてください。
