アイコン作成マニュアル

アイコンをIllustratorで作成

これまで作成してきたアイコンとのデザインの統一感を重視したいため、線の太さなどはこれまでのアイコンを参考にしてもらえれば。

作成したアイコンをSVG形式で保存する

保存するときのファイル名が謎にややこしいから注意ｗ

参考フォルダ「SVGアイコン」の中にあるファイルを見てもらうとわかりやすい。z2とかz4とかがついてるSVGファイルがあるはず。

これはあとでフォント化するときに重要な意味が出てくるので、必ずこのルールを守らないといけん。

ちなみにz4系が最新の追加アイコンで、作成してもらうやつはz5とかをつけてもらえれば！

SVGアイコンのフォントファイル化

icomoonに別添付の「SVGアイコン」フォルダを解凍してすべて選択し、アップロードする。（左上の「Import Icon」からできるアップロードできる）

その後、追加で作成したSVGファイルを選択して追加する。

アップロードするとicomoon上でアイコンの確認ができる。このとき、アイコン名がアップロードしたファイル名になっているので、ここでz5などのいらない文字を削除する。

すべて完了すれば右下の「generate font」をクリック。

左上の「Preference」をクリックし、

完了したらダイアログを閉じて、右下の「Download」ボタンをクリックしてZIPファイルをダウンロードする。

フォントファイルをJINに組み込む

まず出来上がったフォントデータをicomoonからダウンロードして解凍しておく。

フォントファイルの上書き

いろいろフォルダがついてくるけど、以下の３つをコピーし、fontディレクトリの中に各ファイルに上書きする。

CSSの追加

ダウンロードしたファイルの中にCSSを記載したファイル（style.css？やったと思うｗ）があるので、今回追加したアイコンのCSSだけをコピーして追加CSSに記述する。

下記が例

.jin-ifont-spanner:before {
  content: "\e93d";
}

ショートコード化する

jinのディレクトリにある「include」＞「custom-shortcode.php」を開き、1653行目の下から新しいコードを追記していく。

function shortcode_jin_icon_spanner($atts)  {
	extract(shortcode_atts(array(
		'color' => '#e9546b',
		'size' => '16px',
	),$atts));
	return '<span style="color:'.$color.'; font-size:'.$size.';" class="jic-sc jin-code-icon-spanner"><i class="jic jin-ifont-spanner"></i></span>';
}
add_shortcode( 'jin_icon_spanner', 'shortcode_jin_icon_spanner' );

基本的に上記のコードをコピペして一部を変更するだけでおｋ。

これをアイコンごとに繰り返し作成していく。最後に保存してサーバーにアップロードする。

エディター内で使えるように設定する

jinディレクトリの「js」＞「editor_plugin.js」を開き、６６７行目の最後から下記をコピペして一部編集する。

,{
text: '工具',
onclick: function() {
ed.insertContent('[jin_icon_spanner color="#e9546b" size="16px"]');
}
}

ショートコード化のところと同じでここでもspannerの部分を変更。追加で編集する箇所はアイコン名の「工具」のところをええ感じのアイコン名にするぐらい。

これもアイコン追加分だけどんどん追加していく。

表示テスト

ここの表示テストでうまく表示されなければどこかコードエラーになってる可能性が高いので、見直す。

ショートコード表示テスト

実際に該当ショートコードでアイコンが表示されるか確認する。（今回の例やと[[jin_icon_spanner]]がショートコードになる）

エディター内で選択利用できるかテスト

エディター内の「ショートコード」＞「アイコン」に追加されていて、選択するとショートコードが挿入されるかテストする。

メニューで表示されるかテスト

カスタマイザーの「メニュー」の「説明」欄にコードを記入して、実際にメニュー横に表示されるかテストする。（今回の例やと jic jin-ifont-spanner が対応コードになる）

魔のバランス調整

アイコン自体が小さすぎる、でかすぎる場合はショートコードのサイズ調整（16pxのところ）する。

位置が上すぎたり、下すぎる場合はCSSで調整する。以下に例。（vertical-alignでも微妙に調整可能で合わせ技をせんとあかんこともあるｗ）要ヘルプｗ

.jin-ifont-spanner:before{
	line-height:1.2rem;
	padding-left:1px;
	padding-right:4px;
}

スマホでもチェックが要求される、アイコン作成最大の苦難。。。

番外編：見出し前アイコンの登録手順

これはこっちでやろう(^^)