JINのアイコンは2020年5月に追加分も出て、ますます使いたいアイコンとなりました。
アイコンの使い方、今ひとつ把握していなかったのでまとめました。
ここでは「ペンマーク」でいろいろ試してみますね。
下準備
JINコード表を開いておきましょう。
「ペンマーク」のところに
- [ jin_icon_pencil]（ショートコード）（実際には[の次の半角はスペースはありません）
- jic jin-ifont-pencil（CSSクラス名）
- \e921（文字コード）
と3種類書いてあります。
以下この枠の中に表示されているのが、入力後の表示結果となります。
文中埋め込みで使う（ショートコード）
- シンプル
「色鉛筆は24色です。」
- 色とサイズを指定する
「色鉛筆は24色です。」
ブロックの先頭につける（CSS）
ブロック自体に右側の「高度な設定」からCSSを入力した場合です。
- 改行される（jin-ifont-pencil）
「色鉛筆は24色です。」
- 改行されない（jic jin-ifont-pencil）
「色鉛筆は24色です。」
色や大きさの指定は別途自分でCSSを書く必要があります。
記事中に使用するのにはあまり用途がないように思います。
特にCSSにする必要がなければ、ショートコードで入力するのがいいと思います。
背景処理する（CSS）
使いまわしでパーツを作る際など、最初からCSSを書く場合は、CSSに組み込んでしまう方がよいと思います。
色鉛筆1番の色はデフォルトなので、本文のフォントの色になります。
色鉛筆2番の色は赤にしてみました。文章が長くなったとしても2行目以降はインデントされます。
色鉛筆3番の色は青にしてみました。
文頭にアイコンを付けるときの例です。
できるだけ簡素なものにしてみました。
.pen{
position:relative;
padding-left:1.5em;
}
.pen:before{
position:absolute;
top:0;left:0;
content:"\e921";
font-family: 'jin-icons';
}
.pen.pred:before{
color:#cc0000;
}
.pen.pblue:before{
color:#0000cc;
}「content」に文字コード、「font-family」にjin-iconsを指定します。
htmlで記述してそのコードを張り付けてもいいですが、文書内容が簡単であれば、右側の「高度な設定」に記入してもよいと思います。
新しいアイコンの紹介
2020年5月についかされたものの中から個人的にカワイイと思ったものをご紹介します。
いかがでしたか？
WordPressテーマ「JIN」を使っている人だけが使えますが、普通に使うだけであればショートコードをいれるだけなので、カワイイものはどんどん使っていきましょう！
