WordPressテーマ「LION MEDIA」にWebフォントで使えるアイコンを追加する

LION MEDIAでデフォルトでWebフォントとして使用されているアイコンは16種類。これに今回はアイコンを追加してみることにしました。

 

まずはFTPで必要なファイルをダウンロード

まずはFTPソフトにてサーバーより、必要なファイルをダウンロードします。

このファイルがあるのは下記のディレクトリとなります。子テーマの方では無く、親テーマのフォルダにあります。

wp-content」-「themes」-「lionmedia」-「fonts

このフォルダ内にある4つのファイルをすべてダウンロードしておきます。

私はこの時点でダウンロードしたファイルは、バックアップとしてコピーし保存しておきました。

 

IcoMoonサイトよりアイコンを追加

IcoMoonにアクセスしトップページ右上にある「IcoMoon App」をクリック。

 
左上にある「Import icons」をクリックすると読み込みファイルを指定出来るので、先ほどダウンロードした4つのファイルのうち「icomoon.svg」だけを読み込みます。

 
下記画面が表示されたら「YES」をクリック。

 
上部に読み込まれたアイコン、下部には追加出来るアイコンが表示されます。上部の読み込まれたアイコンを選択すると黄色い枠に囲まれるのですべて選択し、下部の方より追加したいアイコンを選択します。その後右下にある「Generate Font」をクリック。

 
画面が変わり、新たなアイコンが追加されていることを確認して、「Download」をクリックします。

 
ダウンロードしたファイルは最初にサーバーより落とした4つのファイルの中に上書き保存(上書きされるのはicomoon.svgファイルのみ)して、再びFTPソフトにて4つのファイルすべてをサーバー上の元の場所に上書き保存し、取り敢えずアイコンの追加が終了です。

 

更新日付のアイコンを変更するには

前回この記事にてLION MEDIAに更新日付の表示を追加する方法を書きましたが、これのアイコンを変更する方法を記載しておきます。

ワードプレスの管理画面より、「外観」→「テーマの編集」を開いて「編集するテーマを選択」から親テーマである「LION MEDIA」を選び「選択」ボタンを押します。

次に「css」をクリックすると中に「icon.css」があるのでクリックすると内容が左側に表示されます。編集前にバックアップを取った方が安心です

 
画面ではちょっと見づらいですが、一番下に次の記述を入れます。

 
さらに既に追加してあるコードも修正します。

ワードプレスの管理画面より、「外観」→「テーマの編集」を開いて「編集するテーマを選択」から子テーマを選び「選択」ボタンを押します。「個別投稿(single.php)」をクリックして編集画面を開きます。編集前にバックアップを取った方が安心です

以前に追加したのはこの3行。

<?php if (get_the_modified_date(‘Y/n/j’) != get_the_time(‘Y/n/j’)) : ?>
<li class=”dateList__item icon-calendar”><?php the_modified_date(‘Y.m.d’) ?></li>
<?php endif; ?>

 
このうち真ん中の行のアイコン指定部分のみ変更します。「icon-calendar」を「icon-loop2」へ。

こんな感じの表示に

こんな感じの表示になりました。細かい部分ですが、これでアイコンだけで判断が出来ますね。

 


スポンサーリンク


スポンサーリンク