LIONMEDIAをカスタマイズして更新マークのアイコン追加する方法【WordPress】

LIONMEDIAをカスタマイズして更新マークのアイコン追加する方法【WordPress】

ブログ記事を読む時、更新日があると、記事の鮮度が分かり安心です。

さらに更新日ですよ~!と一目でわかるアイコンがあると分かりやすい(^ ^)

例えばこんなの。

ということで、今回の記事では、更新日のアイコンマークを表示させる方法をまとめます。

WordPressのライオンメディアというテーマを使っている場合の説明です。

 

スポンサーリンク

更新日を表示させる

まずは更新日を表示させます。

更新日の表示方法をまとめた記事はこちら↓

・LION MEDIAをカスタマイズして最終更新日を表示させる方法【WordPress】

 

この際、次のようなコードをPHPで入力しました。

ここで、ちゃっかり、アイコン表示の準備をしております。

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」フォルダ内のファイルのみです。

  •  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>

icon.cssの最後に追加しました(クリーム色マーカー部分)。

「icon.css」に追加したら「ファイルを更新」をクリックします。

 

追加した1行はこちら。

更新マークのアイコンによって、アイコン名などは変えてください。

今回使用した更新マークはこちら。

これをcssに追加する時、、

.icon-loop2:before {content:”\ea2e“;}

 

ここまでが完了して…

じゃ~ん!!

できた~!

やったぁやったぁ!

 

 

…えっ?更新日は表示されるのにアイコンが反映してないのだが??(´・_・`)

という方は、キャッシュをクリアすると、アイコンが表示されるかもしれません。

キャッシュクリアの記事はこちら↓

・Google Chrome のキャッシュをクリアする方法【CSSの変更が反映されないときの対策】

 

読者にとって必要な情報を見やすく表示させるのは大事(´▽`)

 

それではこの辺で。

またねーっ!

デジタルマーケティングカテゴリの最新記事