JIN

JINのボタンにアイコンをプラスしてみた【グーテンベルク】

ども、くまです( ˶ˆ꒳ˆ˵ )

みなさん、JINのオリジナルアイコンを最大限活用できていますか?

一テーマとは思えないほどのクオリティと数のアイコンが用意されています。ほんと尊敬。

JINのオリジナルアイコンページ

お気に入り必須

度肝を抜かれたのはこちらのバイクのアイコンです。

メンくん

これはクオリティ高すぎっしょ!!


こんな素敵なアイコンがあるなら、ぜひどこかで使いたい、、、この欲望はカスタマイザーなら当然ですよね?

そこで、この記事ではJINのボタンにアイコンをプラスしてみました♫

カスタマイズは自己責任!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちらを読んでくださいね。

くま

カスタマイズは仮に同じテーマであっても、100%成功する補償はありません。

JINのボタンにアイコンをプラスしてみた結果

とりあえずJINにあるボタンすべてにアイコンを打ち込んでみました!

右側にちょこんとあるだけでもいい感じですね♫

カスタマイズの流れ

今回のカスタマイズはグーテンベルクでやっていきます。

そのため、カスタマイズというか、、もう本当に秒で終わります(笑)

のちのちは、アイコンを変えたりクラシックエディタでもできるようにカスタマイズできたらいいな(他人事)

カスタマイズの流れ
  1. ボタンに高度な設定でクラス名を追加
  2. CSSコードを追加CSSに追加

たったこれだけです。

しかも、CSSコードはめっちゃ短いです。

くま

てか、バイクのアイコンは使わんのやな

ボタンに高度な設定でクラス名追加

ボタンブロックを追加したあとに右側のサイドバーから高度な設定でクラス名を追加します。

高度な設定とか言ってますが、文字を書くだけです。

ボタンブロックを追加

JINブロックをクリック
シンプルボタン(またはリッチボタン)をクリック
ほい!ボタンブロックが追加できたよ
メンくん

グーテンベルクは簡単にボタンを追加できていいですね

高度な設定にクラス名を書くよ

右メニューに出てくる高度な設定をクリック

高度な設定はボタンブロックを選択している状態のときにしか出てきませんので、注意しましょう。

ここにクラス名を書いていきます
今回のクラス名はこちら

今回のカスタマイズで入力してもらうクラス名は

plus-icon1

です。

メンくん

あとはCSSコードを追加CSSにコピペするだけだから簡単ですね!

CSSコードをコピペする準備

基本的にはこちらの2つの方法があります。

  • 追加CSS(初心者向け)オススメ
  • 外観>テーマエディタ>style.css(慣れた人向け)

はじめての方は追加CSSが簡単なのでおすすめです。

追加CSSの詳しい使い方についてはこちら

メンくん

どっちでも大丈夫です。ちょっとしたカスタマイズだけなら追加CSSでOKです。

カスタマイズのCSSコード

カスタマイズコードを書き込んだら、最後に必ずキャッシュ削除して更新をしましょう。 これを忘れてしまうとせっかくカスタマイズしたのにデザインに反映されません。

キャッシュ削除 簡単な方法は Ctrl + F5 を押す方法です。またはF12を押した後に更新マークを右クリックして「キャッシュの消去とハード再読込」をクリックします。

ここにボックスタイトルを入力

関連記事