WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法_後編

 

前編（21時限）では目次の１、２、３、４までを解説して4つのwebアイコンフォントを作りました。

 

ここまでの簡単な流れです。１のScratchで自分のオリジナルのイラストを作り→２のIcoMoonでそれをwebアイコンフォントに変えて→３（これからこの記事で説明する部分です）WordPress（ワードプレス、以下WP）で実際に使えるように設定し架空のキャンプ場情報の投稿記事を書きます。

 

 

仕上がり見本、架空のキャンプ場情報です

 

ここにあるランタン、テント、火、インスタのアイコンは画像では無くwebアイコンフォントというフォントです。ですからこんな風に文字と同じように大きさや色を変えたり線で囲んだり背景に色を付ける事が出来て便利です。

 

 

5. WordPressで使えるようにする

 

テーマの中のファイルを操作するので、万が一を考えてテスト用の新しいテーマを用意することをお勧めします。ここでは「外観」→「テーマ」でWP公式テーマであるTwenty Fifteen を有効化しました。

 

テーマファイルをいじる

（この時点ではテーマファイル下の方に「fonts」の文字が無い事をちょっと確認しておいてください）

ここはあまり見た事のない人もいるかもしれませんが、今からTwenty Fifteenのテーマファイルの中に前編のIcoMoonで作ってダウンロードしたファイルを入れます。

難しそうだなぁ

画像満載で1つ1つ説明するからきっと大丈夫

これですね。fontsフォルダ（の中の4つのファイル）をサーバーに入れたりstyle.cssファイルをコピペしたりします。本来はFTPソフト（Cyberduck、File Zillaなど共に無料でオススメ）を使うのがいいのですが、今回は少しだけなのでFTPソフトは使わず解説します◎

 

 

自分のレンタルサーバーを見てみましょう

WPをインストールしたレンタルサーバー、ここではスターサーバで解説しますので「スターサーバー管理」→「サーバー管理ツール」からログインします。

他のレンタルサーバーの方も全く同じでは無いと思いますが頑張ってやってみてください

 

 

FTPアカウント設定をクリック、

 

いくつかドメインを作っていたとしたら先程Twenty Fifteenのテーマを入れたドメインを選択してください。

 

ここもアカウントがいくつかある人もいるかもしれません。選んでWebFTPにログインします。

 

これがWPを作っているファイル群です。

 

スクロールした下の方フォルダのアイコン、wp-contentをクリックします。

 

themesをクリックします。

 

あっ、さっき入れたTwenty Fifteenが入っている
そうよ。他にも最初から入っていたり自分で入れたテーマがいくつか入っているわ

twentyfifteenをクリックします。

 

 

余談ですが

私の場合はこの時、子テーマも合わせて全部で5つ入れていましたので、レンタルサーバーの管理ツールで見た所（１つ上の画像）にも5つ入っています。ですからここのフォルダの数やフォルダ名は人によって違います◎

 

今現在の場所も確かめてみます。上の方、アドレスです。

 

wp-content/themes/twentyfifteen となっているのが確認できます。

wp-contentの中の、themesの中の、twentyfifteenの中を見ているって事だよね

 

下の方を見ると現在4つのフォルダがあります。ちょっとこの数、覚えておいてください◎

 

 

テーマの中にフォルダやファイルを作ります

今からIcoMoonでダウンロードしたこのフォルダとファイルを入れます（作ります）

 

WPの管理画面からはフォルダを作ったり出来ませんが、ここだと作る事が出来ます。上にある新規作成をクリックします。

 

fonts と入力してフォルダを追加してください。

 

さっき4つを覚えていてください、と言った所に今作ったfontsフォルダが追加されました。クリックします。

 

当然中はまだ空です。この中にファイルを4つ入れます。

 

アップロードをクリック。

 

小窓が出るのでファイルを選択。

 

icomoon.eot 、icomoon.svg 、icomoon.ttf 、 icomoon.woff の4つを1つずつ選択します。

 

アップロードをクリック。

 

カラだったfontsフォルダにファイルが4つ入りました。

他のレンタルサーバーは分からないのですが、スターサーバーの場合フォルダはアップロード出来ません。なのでfontsフォルダをまるっととはできなかったのです。

（FTPソフトを使うとフォルダも出来ます。今回はファイルが4つなので1つずつやりましたが数が多い時は非常に大変です。その時はFTPソフトを使った方が早いし間違いがありません◎）

 

 

今やった作業がどうゆう事だったのかWPの管理画面の方でも確認してみましょう。

ダッシュボードの外観＞テーマエディター　の編集するテーマを選択：Twenty Fifteen にするとfonts（そしてicomoon.svg）が入りました。

 

最初に「fontsが無い事を確認」って言った意味が分かったよ

 

ここは飛ばしてもいいのですがicomoon.svgをクリックして中を見てみると、lantern（ランタン）などIcoMoonで選んだアイコンの名前が確認できます◎

 

 

CSSファイルにIcoMoonのCSSをコピペします

もう１つやる事があります。IcoMoonでダウンロードしたフォルダの中のstyle.cssファイルを開いてください。

 

 

CSSファイルを編集します

style.cssを開いた時、もしパソコンにテキストエディターがインストールしてあればこんな感じの画面が開きます。

 

テキストエディターとはコードを書くことのできるソフトだよ。パソコンに最初から入っているメモ帳などを使ってもいいけど使い勝手があまり良くないんだ。AtomやVisual Studio Codeなどが無料だしオススメだよ。

急に難しそうになってきたなぁ
コピペするだけだから安心して

 

Macでテキストエディターを入れていない時は「テキストエディット」という名前のアプリケーションがデフォルトで入っていて開けると思います。

 

こんな感じで内容は同じです。Windowsでは「メモ帳」で開けるようです。

 

Google Chrome やSafariでも開けます。

 

どの方法でもOKですので開いた中身を全部コピーしてください。

 

コピーした内容をWPのstyle.cssファイルに貼り付けるため、管理画面の外観＞テーマエディターのスタイルシート(style.css)をクリックしてください。

 

ご使用のテーマによって非常に長い場合もありますが1番下まで行ってください。（右側に出るグレーを引っ張ると早いです）

 

1番下に先程コピーした内容をペーストします。

@font-faceから}まで全部だよ

 

これは6157行と表示されていますが、テーマやIcoMoonで選んだアイコンの数が多ければ行数も変わって来ます。ファイルを更新で保存します。

 

 

WPの投稿記事で実際に使ってみます

準備が出来たのでWPの投稿記事でwebアイコンフォントを表示させてみましょう。

やっとだね

ここで注意。コードを書く（貼り付ける）時は”ビジュアル”ではなくて”テキスト”の方にしてください

 

 

IcomoonでコードをGetする

webアイコンフォントを表示させるHTMLコードはIcoMoonのGenerate Font画面でアイコン下にマウスをあてるとGet Codeと出てきますので、これをクリックして下さい。

 

開いた小窓のHTMLをまるっとコピーして

 

投稿記事の”テキスト”の方にペーストします。そうしたら「更新」をクリックして投稿を表示してみます。※ここで更新をせずに「ビジュアル」のタブを押すとコードが消えてしまうので注意してください。それとWebアイコンフォントはビジュアルの方には表示されないのでびっくりされませんよう◎

 

 

できた！、、けど小さすぎるよ
そうね、大きくしたいし色も変えたいからもうちょっと頑張りましょう。

 

 

CSSコードが書けるプラグインを入れる

CSSとはウェブページのデザインやレイアウト、見栄えを変えるためのコンピュータ言語です。

CSS有りと無しを比べるとこんな感じで無しはすごい初期のHPみたいになっています。背景の緑色もCSSでカラー指定しているのです。

 

投稿でCSSコードを書くためのプラグインを今から入れます。（既に入れている方は飛ばしてください）

 

色々ありますが機能のシンプルなWP Add Custom CSS にします。今すぐインストール、

 

有効化します。すると左側の黒い所にAdd Custom CSSと入りました。

 

カスタムCSSにコードを書いてみる

投稿画面を更新すると下の方に「カスタムCSS」を書くスペースが出来ました。（ webアイコンフォントが消えていたらもう一度テキストの方にIcoMoonのHTMLコードをコピペしてください。）

 

IcoMoon の下、Generate FontのGet Codeで出てくるCSSの{と}の中以外を全てコピー、

 

content: "\e902";は要らないの？

さっき『管理画面の外観＞テーマエディターのスタイルシート(style.css)』に書いた（コピペ）よね。だからもうここでは必要無いんだよ◎

 

 

カスタムCSSにペースト。font-size:50px; color: #d67400;と追加で記述します。全体は以下のようになります。

.icon-lantern:before {
font-size: 50px;
color: #d67400;
}

更新して投稿を表示します。

 

webアイコンフォントが大きい(50px)オレンジ色(#d67400)になりました。色の事を少し解説します◎

 

 

CSSで色を指定する

色の指定は検索するとたくさん出て来ます。例えば原色大辞典など

 

原色大辞典の右端のピンクのゾーンの中からdeeppink #ff1493 をクリックするとR:255 G:20 B:147  の数字も確認できます。color:の後はdeeppink、 #ff1493、rgb(255, 20, 147)、どれで表記してもOKです。

 

 

消えてしまう問題を解決します

ここまでやって来て、webアイコンフォントのこのコードが消えてしまって「ああっ！」と思った方もいると思います。ビジュアルの方で保存すると消えてしまうのです。理由は空のspanタグだからで

空のタグ？

えっと、<span class="icon-lantern">と</span>の間に何か文字を書けば消えなくなります。

 

真っさらな投稿画面からスタートします。ビジュアルの方にしてください。”キャンプ用品レンタル貸し出し”と書きます。

 

次にIcoMoonのGetCodeでHTMLコードの<span class="icon-lantern"></span>の前の部分、<span class="icon-lantern">を”キャンプ用品レンタル貸し出し”の頭に、後の</span>をお尻にペーストします。

 

 

Bが今やった事です。カスタムCSSを上のように書いたら更新（保存します）。

「表示」のように出来たでしょうか

 

 

もしこんな風に文字までランタンと同じ色、大きさになってしまったら、ちょっと面倒ですがこれから書く方法を試してみてください。

（実は私も昨日この記事を書いている時はこうでした。でも今朝になってもう一度やったらランタンはオレンジ、文字は黒で別々の色、サイズで表示出来たのです。パソコンあるあるでしょうか、冗談じゃなく1日放置してみると出来るかもませんー）

 

webアイコンフォントと文字が同じ色、サイズになってしまった時の対処法

ビジュアルの方にして”キャンプ用品の〜”と書きます。次にフォントの指定（これはしてもしなくても）。フォントサイズ（※デフォルトと同じサイズだとしてももう一度してください）。そしてテキストの色（※デフォルトが黒なら普段はしないと思いますが、ここではしてください）

 

テキストの方で見てみると色とサイズのコードが入っているのが確認できます。面倒でもビジュアル側で指定しないとこのコードが入らず、次にwebアイコンフォントのタグで囲んだ時に影響を受けてwebアイコンフォントと同じ色、サイズになってしまうのです。

 

テキストの状態のままwebアイコンフォントをつけます。IcoMoonのGet Codeをクリックします。HTMLの
<span class="icon-lantern">を先頭に、</span>をお尻に貼り付けます。

 

こうです。><の間は隙間を開けないでください。更新、投稿を表示してみます。

 

できた！

どちらかの方法で綺麗に表示できたでしょうか。webアイコンフォントのタグの中身が空ではなくなったので、これでもう「消える」事はありません。

 

 

後はもうどこまでデザインに凝るかです。ランタンと文字の間がきつくて見にくいと思ったら

カスタムCSSにmargin-right: 6px; など記入するとその分隙間が出来ます。

マージン、余白を右側に6px という意味だよ。

 

 

架空のキャンプ場情報が完成しました。

 

CSSは他にも色々と指定出来るので調べてみると面白いと思います。コードで書いた通りの見た目にならない場合は「: 」や「 ; 」を忘れていたりスペルミスがあったり全角スペースがあったりする（半角はOK）のでよーーく確認してください。

 

注意：テーマを変えると表示されません

今回のwebアイコンフォントはテーマ、Twenty Fifteenに入れたので他のテーマに変更すると当然の事ながらこんな感じでちゃんと表示されなくなります。

ですのでテーマを変えた場合はこのページの先頭に戻ってレンタルサーバーの管理画面にログイン、themes＞〇〇（入れたいテーマ）にフォルダやファイルを入れる所から始めてください。

それから投稿の記事ごとにカスタムCSSにコードを書く必要があります。逆に言えば記事ごとに大きさや色を変えられると言う事です◎

 

 

最後に、ここまで出来た方はこんな事も出来ますというサンプルコードです。　

“css border-radius” “css padding” などでググるとすぐ意味が分かりますよ◎

 

お疲れ様でした

 

 

---

2020年7月30日　追記 

アイコン1つを色違い、サイズ違いで同時に表示

 

プログラミング24時限で「webアイコンフォントを色違い、サイズ違いで表示する」方法を書きました。

形状が違うならまだしも同じ形状なら1つのアイコンで色違い、サイズ違いが表示できる方が便利です。商品の色数が増えてもすぐに対応できます◎

 

 

例えばこんな感じです。このページが出来た方ならあと少しHTMLとCSSをいじるだけなのでぜひ◎

 

 

---

2020年8月3日　追記 

アイコンフォントの差し替えと新規追加

 

プログラミング25時限で「webアイコンフォントの差し替えと新規追加」方法を書きました。

 

すでに使っているアイコンはそのままに新規追加はもちろん、 昔のアイコンのコードを書き直す事なくイラストだけ新しく差し替えたりも出来ます。この22時限とセットで覚えておくと便利です◎

 

---

webアイコンフォント制作します

無料・有料のアイコンやWebフォントは便利で私も使っています。 でも、デザインや見易さにこだわればこだわるほど御社独自の製品、サービスのアイコン が欲しいと感じませんか。

 

スキルのオンラインマーケットcoconala（ココナラ）にて4つで17,000円で承ります。ご相談ください◎