※2021年2月9日更新
ブログ記事を読む時、更新日があると、記事の鮮度が分かり安心です。
さらに更新日ですよ～！と一目でわかるアイコンがあると分かりやすい(^ ^)
例えばこんなの。
ということで、今回の記事では、更新日のアイコンマークを表示させる方法をまとめます。
WordPressのライオンメディアというテーマを使っている場合の説明です。
更新日を表示させる
まずは更新日を表示させます。
更新日の表示方法をまとめた記事はこちら↓
》LION MEDIAをカスタマイズして最終更新日を表示させる方法【WordPress】
この際、次のようなコードをPHPで入力しました。
<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
<li class="dateList__item icon-loop2"><?php the_modified_date('Y.m.d') ?></li>
<?php endif; ?>
ここで、ちゃっかり、アイコン表示の準備をしております。
2行目に「loop2」のアイコンを表示させてという指示。
loop2とはこちらです。
この準備がされている状態という前提で、次からアイコン表示方法を説明します。
既存アイコンをダウンロード
今回は、LION MEDIAで使用している「IcoMoon」フォントにアイコンを追加する方法を解説します。
LION MEDIAには、デフォルトで16個のアイコンが登録されています。
＜初期で登録されているアイコン＞
まずは、これらの既存アイコンをダウンロードします。
FTPを使います。
FTPソフトでWordPressをインストールしている「fonts」があるディレクトリまで行きます。
「wp-content」→「themes」→「lionmedia」→「fonts」
fontsの中には4つのデータが入っています。
- icomoon.eot
- icomoon.svg
- icomoon.ttf
- icomoon.woff
「icomoon.svg」をダウンロードします。
更新マークアイコンを追加
次のサイトにアクセス。
》IcoMoon App – Icon Font, SVG, PDF & PNG Generator
「Import Icons」ボタンを押して、先ほどダウンロードした「icomoon.svg」をインポート。
「Yes」
ここから更新マークを含めた新たなアイコンデータを作成します。
新規で追加する更新マーク
少しスクロールして…
あった！
追加したいアイコンをクリックします。
追加したら「selection(1)」になります。
1個選択してますよ～ということ。
再度、アイコンフォルダをアップしなおすので、既存データも選択します。
ここを選択しないと、新規で追加した更新マークのみ表示されます
既存のアイコンは、すべて□に！？
びっくり(≧◇≦)
既存のicomoonのアイコンを選択。
インポートしたアイコンが表示されている「icomoon」の場所へ。
右上の三本線→「Select All」
選択されると、外枠がオレンジに変化。
Selectionの数が17個になっているのを確認。
確認したら、右下の「Generate Font」をクリック。
次のような画面になります。
画面は続く…
選択した17個のアイコンが表示されています。
既存アイコン＆追加した更新アイコン「loop2」が表示されていることを確認。
右下の「Download」をクリック。
ダウンロードした「icomoon.zip」を解凍すると、次のファイルが展開されます。
ここで使うのは「fonts」フォルダ内のファイルのみです。
div class=”box06″>
- icomoon.eot
- icomoon.svg
- icomoon.ttf
- icomoon.woff
FTPサーバーにアップ
「fonts」フォルダに入っていた4つのファイルを、FTPサーバー内の元の場所に上書き保存します。
LION MEDIAにアイコンを反映させる
FTPサーバーには「fonts」をアップロード完了！
次は、CSSを編集して、WordPressのテーマ「LION MEDIA」にアイコンの情報を追加します。
WordPressのダッシュボードから「外観」→「テーマエディター」をクリック。
「css」→「icon.css」を選択。
＜icon.css＞
/*アイコンフォント
/************************************************************/
@font-face {
font-family: "icomoon";
src: url("../fonts/icomoon.eot?gizg5m");
src: url("../fonts/icomoon.eot?gizg5m#iefix") format("embedded-opentype"),
url("../fonts/icomoon.ttf?gizg5m") format("truetype"),
url("../fonts/icomoon.woff?gizg5m") format("woff"),
url("../fonts/icomoon.svg?gizg5m#icomoon") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: "icomoon";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.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-loop2:before {content:"\ea2e";} /* 2019.06.16追加 */
icon.cssの最後に追加しました(クリーム色マーカー部分)。
「icon.css」に追加したら「ファイルを更新」をクリックします。
追加した1行はこちら。
.icon-loop2:before {content:"\ea2e";} /* 2019.06.16追加 */
更新マークのアイコンによって、アイコン名などは変えてください。
今回使用した更新マークはこちら。
これをcssに追加する時、、
.icon-loop2:before {content:”\ea2e“;}
ここまでが完了して…
じゃ～ん！！
できた～！
やったぁやったぁ！
…えっ？更新日は表示されるのにアイコンが反映してないのだが？？(´･_･`)
という方は、キャッシュをクリアすると、アイコンが表示されるかもしれません。
キャッシュクリアの記事はこちら↓
》Google Chrome のキャッシュをクリアする方法【CSSの変更が反映されないときの対策】
読者にとって必要な情報を見やすく表示させるのは大事(´▽｀)
それではこの辺で。
またねーっ！
