SVGとアイコンフォントを作ってWordPressテーマの「Simplicity」に表示してみた

以前、「Simplicity」で表示されるPCヘッダーモバイルメニューのスクロール時に、固定表示/非表示する動作をボタンで切り替える方法をご紹介いたしました。

そこで表示しているボタンをもう少しピンと来るようなものにしたいと思い、それらしいアイコンを作成して表示してみました。アイコンは「Simplicity」テーマの作成者である、わいひらさんが運営している寝ログさんの下記の記事を参考にして作ってみました。

最近は、その便利さからWEBアイコンフォント(以下、アイコンフォント)を利用したサイトが増えています。 アイコンフォントは、CSSで色や大きさを指定出来るし、画像と違い大きさが変わったからといって、表示が粗くなるといったこともなく本当

アイコンの作成や変換の手順はほとんど寝ログさんと同じですが、ご紹介していきます。

「GIMP」ソフトでPNGアイコンを作る

GIMP2を使おう

GIMP2を使おう

上記サイトから画像ソフトのGIMPをダウンロードし、インストールします。GIMPの詳細な使い方は「GIMPの使い方」で確認することができます。

私は「GIMP」をダウンロードし、インストールした後、サンプルとして下記のようなPNG形式のアイコンを作りました。

GIMPで作ったアイコン
GIMPで作ったアイコン

「Inkscape」ソフトでPNG画像をSVG画像にする

「Inkscape」をダウンロードする

Draw Freely | Inkscape

Draw Freely | Inkscape

上記サイトのグローバルメニューにある「DOWNLOAD」から使用するOSを選択して、「Inkscape」をダウンロードします。

Inkscape 対応するOSを選択
対応するOSを選択

キャンバスサイズを変更する(ドキュメントのプロパティ)

「Inkscape」をダウンロードし、インストールした後、キャンバスのサイズを作成した画像と同じ値にします。

Inkscape 「ファイル」から「ドキュメントのプロパティ」を選択
「ファイル」から「ドキュメントのプロパティ」を選択

単位(px)、画像と同じ幅と高さを選択します。

Inkscape 単位、幅、高さを選択
単位、幅、高さを選択

画像をインポートする

「ファイル」から作成した画像をインポートします。

Inkscape 作成した画像をインポート
作成した画像をインポート

「埋め込み」など、下記のように作成した画像に適した設定を行い、「OK」ボタンをクリックします。

Inkscape 作成した画像に適した設定を行い、「OK」ボタンをクリック
作成した画像に適した設定を行い、「OK」ボタンをクリック

「GIMP」で作成した画像がインポートされました。

Inkscape 画像がインポート
画像をインポート

画像をパスにする

次にインポートした画像を選択した状態で、「パス」から「ビットマップのトレース」を選択します。

Inkscape 「パス」から「ビットマップのトレース」を選択
「パス」から「ビットマップのトレース」を選択

「ビットマップのトレース」で作成した画像に適した設定を行い、「OK」ボタンをクリックします。私は下記の項目を選択しました。

Inkscape 「ビットマップのトレース」で作成した画像に適した設定を行い、「OK」ボタンをクリック
「ビットマップのトレース」で設定を行い、「OK」ボタンをクリック

パスを作成したあと、画像をドラッグして左にスライドさせると、パスになる前の画像が右に表示されるので、右側の画像を削除します。

Inkscape パスになる前の画像を削除
パスになる前の画像を削除

画像を整列する

パス画像をキャンバスに整列させるために、「オブジェクト」から「整列と配置」を選択します。

Inkscape 「オブジェクト」から「整列と配置」を選択
「オブジェクト」から「整列と配置」を選択

「整列」で基準を「ページ」にしてから、「中心を垂直軸に合わせる」、「水平軸の中心に揃える」をクリックして、画像を垂直中央にします。

Inkscape 画像を垂直中央にする
画像を垂直中央

名前を付けて保存

パスにした画像を、名前を付けて保存します。「ファイル」から「名前を付けて保存」を選択します。

Inkscape 「ファイル」から「名前を付けて保存」を選択
「ファイル」から「名前を付けて保存」を選択

ファイル名を入力した後、ファイルの種類をsvgにして、「保存」ボタンをクリックします。

Inkscape ファイル名を入力しファイルの種類をsvgにして、「保存」ボタンをクリック
ファイルの種類をsvgにして、「保存」ボタンをクリック

保存先で入力したファイル名で、svgファイルが保存されていることを確認します。

Inkscape 保存先でsvgファイルが保存されていることを確認
保存先でsvgファイルが保存されていることを確認

PCヘッダーに変換したSVG画像を表示する

作成したsvgファイルを適当なエディタで開き、コードをコピーして「sns-pages.php」にある「<ul class=”snsp”>」内に下記の記述をしました。

「!is_mobile」により、PCにのみ表示するようにしています。

style.css

子テーマの「style.css」に下記のスタイルを記述します。

解説1

「ul.snsp li.arrow path」でsvgのpathにカーソルのポインターと通常のカラー設定を、「ul.snsp li .arrow-svg.on」と「ul.snsp li .arrow-svg:hover」を「,(コンマ)」でカーソルがアイコンに乗った時とクリックされた後のスタイルを同じにしています。

解説2

「.sns-group li.arrow」の「display: none;」で記事内に表示されるsvgアイコンを非表示にしています。

ヘッダーやアイコンの状態変化のロジックは以前にご紹介したものと変わらないので省いています。

確認

SVG画像の表示と状態を確認します。

Simplicity PCヘッダー SVG画像が表示され、クリック時に状態が変わる
SVG画像が表示され、クリック時に状態が変わる

SVG画像が表示され、画像をクリックした後、状態が変わっていることが確認できます。

SVG画像をWebアイコンフォントに変換する

IcoMoon App - Icon Font, SVG, PDF & PNG Generator

IcoMoon App – Icon Font, SVG, PDF & PNG Generator

次はモバイルメニューにもPCと同じ画像を表示させます。準備として、SVG画像を上記サイトでWebアイコンフォントに変換します。SVG画像のまま使用してもいいのですが、他メニューとの調整を簡単にするために、SVG画像を同じWebアイコンフォントに変換しておきます。

画像をインポートする

サイト上部にある「Import Icons」をクリックして、作成したSVG画像をサイトにインポートします。

IcoMoon 「Import Icons」をクリック
「Import Icons」をクリック

画像がインポートされるので、クリックして選択しておきます。

IcoMoon 画像をクリックして選択
画像をクリックして選択

Webアイコンフォントを生成する

サイト下部の右側にある「Generate Font」をクリックします。

IcoMoon 「Generate Font」をクリック
「Generate Font」をクリック

コードを確認する

Webアイコンフォントが生成され、各種ステータスが表示されます。ここで「Get Code」をクリックします。

IcoMoon 「Get Code」をクリック
「Get Code」をクリック

HTMLやCSSのコードが表示されるので控えておきます。

IcoMoon HTMLやCSSのコードを控える
HTMLやCSSのコードを控える

ダウンロードする

サイト下部の右側にある、「Font」の「Donwload」をクリックします。

IcoMoon 「Font」の「Donwload」をクリック
「Font」の「Donwload」をクリック

ダウンロードしたファイルを解凍すると下記のようなファイルが出来上がります。

IcoMoon 解凍したファイル
解凍したファイル

mobile.css

「fonts」フォルダを「Simplicity」の子テーマにアップロードし、「mobile.css」に下記の記述をします。

上記のスタイルを「mobile.css」に貼り付けることで、変換したWebアイコンフォントを表示させる準備が出来ました。

今現在、「Simplicity」はWebアイコンフォントを採用しているので、下記のようにある程度スタイルを省略することもできます。

モバイルメニューに変換したWebアイコンフォントを表示する

buttons-footer-mobile.php

「buttons-footer-mobile.php」にある「<div id=”footer-mobile-buttons>」内に下記の記述をしました。

「<div class=”menu-icon”>」内のspanはIcoMoonの「Get Code」で表示されるHTMLを張り付けています。

mobile.css

子テーマの「mobile.css」に下記のスタイルを記述しました。

解説1

「#footer-mobile-buttons .arrow .icon-arrow」の「vertical-align: middle;」で位置を調整しています。「#footer-mobile-buttons .arrow span」でアイコンフォントの通常のカラー、「#footer-mobile-buttons .arrow.on span」と「#footer-mobile-buttons .arrow.on span:hover」を「,(コンマ)」でアイコンのタップ時とタップ後のスタイルを同じにしています。

解説2

「#footer-mobile-buttons .arrow .menu-caption:after」で通常のキャプションを「固定」とし、ボタンタップ時に「.on」クラスが付与された「#footer-mobile-buttons .arrow.on .menu-caption:after」で、固定されたメニュー時のキャプションを「固定中」としています。

メニューやアイコンの状態変化のロジックは以前にご紹介したものと変わらないので省いています。

確認

Webアイコンフォントの画像の表示と状態を確認します。

Simplicity モバイルメニュー Webアイコンフォントが表示され、タップ時に状態が変わる
Webアイコンフォントが表示され、タップ時に状態が変わる

Webアイコンフォントが表示され、タップされた後、状態が変わっていることが確認できます。

まとめ

  • 「GIMP」ソフトでPNG画像を作る。
  • 「Inkscape」ソフトでPNG画像をSVG画像にする。
  • PCヘッダーに変換したSVG画像を表示する。
  • SVG画像をWebアイコンフォントにする。
  • モバイルメニューに変換したWebアイコンフォントを表示する。

以前表示していたアイコンよりは幾分かピンとくる感じになったと思います。寝ログさんで紹介されていた「GIMP」と「Inkscape」を始めて使ってみたのですが、なかなかよいソフトだと思います。

使用していて「GIMP」は「Photoshop」、「Inkscape」は「Illustrator」のような印象を感じました。

慣れてくると「Inkscape」だけで作成し、SVG画像で保存、といったことも出来るようになると思います。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

SVGとアイコンフォントを作ってWordPressテーマの「Simplicity」に表示してみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!