雑記

画像で解説!記事が読みやすくなる!?[JIN]でおしゃれな見出し付きボックスを出す方法

なやむくん

JINでおしゃれな見出し付きボックスがあるはずなんだけど、どうやって出すか分からない、、、

ひでまる

分かる!みんなが使っているおしゃれな見出し付きボックス使いたいよね。

出し方なんだけど、ブロック選択画面で”クラシック”を選択して”ショートコード”を選択すれば出てくるよ!

WordPressテーマ「JIN」では、おしゃれな見出し付きボックスを使えるはずなんですが正直どこにあるのか分かりませんでした。

ブロック選択画面で”ボックス”と入力しても、

hidemarublog、JINボックス画面

3つのボックスしかでてきません

見出し付きボックスか?と思い、出してみると

う~ん。なんか違います。

出したいのはおしゃれな見出し付きボックスなんです。

例えば、

ここにタイトルを入力

ここに本文を入力

めっちゃおしゃれですよね。

この見出し付きボックスは、ブロックの追加画面から

  1. クラシック
  2. ショートコード
  3. ボックス
  4. ボックス19

で出すことができます。

でも、文字だけじゃチンプンカンプンですよね、、、

僕もそうでした。

今回は、画像付きで詳しく解説していきたいと思います。

この記事で分かること

  • おしゃれなボックスの出す方法
  • ボックスの種類

おしゃれな見出し付きボックスを出す方法

PCキーボード

ブロックの追加(+)をクリックし、クラシックをクリック

JINおしゃれボックス出し方、ブロックの追加(+)をクリックし、クラシックをクリック
  1. 図①のブロックの追加(+)をクリックします。
  2. 出てきた枠内の図②のクラシックをクリックします。

ショートコードをクリックし、ボックスにカーソルを合わせ、ボックス19をクリック

JINおしゃれボックス出し方、ショートコードをクリックし、ボックスにカーソルを合わせ、ボックス19をクリック
  1. 図①ショートコードをクリックします。
  2. 図②ボックスにカーソルを合わせます。
  3. 右に出てきた枠の中の図③ボックス19をクリック

すると、

JINおしゃれボックス出し方

上のような文字が出てきます。

これをプレビューで見てみると、、、

ここにタイトルを入力

ここに本文を入力

おしゃれな見出し付きボックスが出てきましたね。

ボックスに文字を入力してみよう

実際に文字を入力していきます。

JINおしゃれボックス出し方

上図の”ここにタイトルを入力”を変更することでボックスの見出しが変わります。

”ここに本文を入力”には、ボックスの中に入れた文字を入れましょう。

それだは実際にやってみます。

JINおしゃれボックス出し方

変更しました。

プレビューを見てみましょう。

タイトル

本文

ちゃんと変わってますね。

ボックスの種類

ボックスの種類

何種類か見出し付きボックスがありますが、実際どんなボックスなのかは出してみないと分かりません

ここでは、ボックスを実際に出してみたいと思います。

ボックス16

ここにタイトルを入力

ここに本文を入力

ボックス17

ここにタイトルを入力

ここに本文を入力

ボックス18

ここにタイトルを入力

ここに本文を入力

ボックス19

ここにタイトルを入力

ここに本文を入力

ボックス20

ここにタイトルを入力

ここに本文を入力

ボックス21

Q&Aボックス

ここに質問を入力

ここに回答を入力

アコーディオンボックス

ここにタイトルを入力

ここに本文を入力

これだけたくさんあるので、用途によって使い分けていきたいですね

またJINには、見出し付きボックス以外にアイコンボックスもたくさんあります

さきほどのショートコードから出すことができます。

JINおしゃれボックス出し方、アイコンボックス

僕がよく使っている吹き出しやチェックもここにありますね。

まとめ:おしゃれな見出し付きボックスの出し方

まとめ

今回は、おしゃれな見出し付きボックスの出し方を解説しました。

僕はこれを探し出すのに、1時間かかりました。

やり方が分かると、こんなことが分からなかったのかって思いますけど、そのやり方になかなかたどり着けないんですよね、、、

見出し付きボックスの出し方が分からず悩んでいるあなたのためになったらうれしいです。

にほんブログ村 ブログブログ ブログ初心者へ