JIN

【JINカスタマイズ】ボックスの色とボックスタイトルを変更する方法

【JINカスタマイズ】ボックスの色とボックスタイトルを変更する方法
こんにちは! Webデザイナーのアズサ(@azusascom)です。

WordPressテーマ「JIN」ユーザーのあなた、ボックスを活用してますか?

箇条書きなど、情報を整理するのに使えるボックス。JINでは20種類以上用意されてるんです。

以下はボックスの一部。

  • 良い例だよ
  • 良い例だよ
  • 良い例だよ
  1. リストだよ
  2. リストだよ
  3. リストだよ
見出し付きボックス
  • 見出し付きボックスのリスト
  • 見出し付きボックスのリスト
  • 見出し付きボックスのリスト

でも、初期設定されてる色が自分のブログに合わないこと、ありませんか?

ブログのイメージとボックスの色が合ってないと、ちぐはぐな印象を与えてしまいます。

結果「なんか思ってたのとちがう」と感じてしまい、読者が離脱してしまうんですよね。

ボックスの色はブログ合わせて変える必要があるんです。

そこで今回は、WordPressテーマ「JIN」のボックスデザイン設定を変更する方法をお伝えします。

ボックスの種類の確認方法

ボックスは22種類。

カスタマイズの前に、どんなデザインのボックスがあるか確認してみましょう。

どのボックスを使うか先に決めておくのがおすすめです。3~5種類くらい。

さすがに20種類使い分けるのはむずかしいですからね。

Gutenbergの場合

JINブロック一覧

JINブロックの「シンプルボックス」を選択します。

シンプルボックスを選択

ボックスが表示されたら、上記画像の丸印のあたり、ボックスの外側をクリックします。

すると、画面右側にボックスの種類を選択するプルダウンが表示されます。

シンプルボックスのプルダウン

シンプルボックスは15種類あるので、ボックスのデザインを確認してくださいね。

続いて、「見出し付きボックス」も確認してみましょう。

JINブロック一覧

JINブロックの「見出し付きボックス」を選択します。

見出し付きボックスを選択

シンプルボックスのときと同じように、ボックスの外側をクリックします。

見出し付きボックスのプルダウン

画面右側に、見出し付きボックスの種類を選択するプルダウンが表示されます。全6種類。

こちらもデザインを確認してくださいね。

クラシックエディターの場合

クラシックエディターでは、編集画面の「ボックスデザイン一覧」を確認するのが簡単です。

クラシックエディターの編集画面
クラシックエディターのボックスデザイン一覧

一覧が表示されていない場合は、以下手順で表示オプションを変更してくださいね。

クラシックエディターの表示オプション

編集画面右上の「表示オプション」タブをクリックします。

表示オプションのチェック一覧

「ボックスデザイン一覧」にチェックを入れます。

「あわせて読みたいボックス」について

実は、ボックスはもう1種類あるんです。それが「あわせて読みたいボックス」。

自分のブログ記事のURLを貼り付けるだけで作成できるボックスです。内部リンクってやつですね。

記事編集画面では表示されないので、URLを貼ってプレビュー画面で確認してください。

なお、Gutenbergの「見出し付きボックス」ブロックにある「細枠背景色付きボックス」は、「あわせて読みたい」ボックスと同じカラー、同じデザインになります。

ボックスデザイン設定をカスタマイズ

ボックスデザイン設定では、以下2つを変更できます。

  • ボックスの色
  • ボックスタイトル

ボックスの色を変更する方法

カスタマイズのボックスデザイン設定

「外観」⇒「カスタマイズ」の「ボックスデザイン設定」を選択します。

ボックスデザイン設定の色を選択

変更したいボックスの「色を選択」ボタンを押します。

太枠線ボックスの色を選択

白丸カーソルを動かすか、「#」から始まる色コードを指定して、色を決めます。

ボックスデザイン設定を公開

「公開」ボタンを押して保存完了です。

自分が使うボックスだけ色を変更しておくといいですよ。

  • 存在を忘れがちな「あわせて読みたいボックス」も、ブログに合った色に変更しましょう。
  • 「黒板ボックス」だけは色の変更ができないシステムになってます。

ボックスタイトルを変更する方法

あらかじめボックスタイトルが入ってる以下6種類ですが、タイトルを変更が可能です。

タイトル変更可能なボックス一覧

当ブログでは、「メモボックス」のタイトルを「まとめ」に変更して、記事最後のまとめを記入するボックスとして使ってます。

  • まとめ1
  • まとめ2
  • まとめ3

必要に応じて、以下手順で変更してみてくださいね。

カスタマイズのボックスデザイン設定

「外観」⇒「カスタマイズ」の「ボックスデザイン設定」を選択します。

ボックスタイトル入力欄

「ポイントボックス」以下は、タイトル変更ができます。

ボックスタイトルを入力して公開

タイトルを変更して、「公開」ボタンを押します。

ボックスタイトルを変更した場合でも、編集画面ではデフォルトのタイトルが表示されます。

編集画面でのボックスタイトル

プレビュー画面ではタイトル変更が反映されてるので、必ず確認してくださいね。

プレビュー画面でのボックスタイトル

使用するボックスだけ設定変更

当ブログでは、すべてのボックスカラーを変更しました。

が、とっても面倒でしたw

シンプルにしたいのでグレー系で統一したんですよね。

アズサのボックスカラー

画像のように、すべてのボックスを変更する必要はありませんよ。

20種類以上あるので、ひとつずつカラーを変更するのは時間がかかりますから。

どのボックスを使うか決めて、該当のボックスだけ色やタイトルを変更しておくのがおすすめ。

最初は3種類くらいのボックスを変更しておいて、必要に応じて設定をいじってくださいね。

ブログに合わせてボックスカスタマイズ

今回は、WordPressテーマ「JIN」のボックスデザイン設定を変更する方法をお伝えしました。

  • 最初にボックスの種類・デザインを確認しておく。
  • 黒板ボックス以外は色を変更できる。
  • ボックスタイトルも変更可能。
  • 実際に使うボックスだけ設定変更しておけばいい。

ボックスは目立つので、記事内で使うと読んでもらいやすくなります。

せっかく買ったテーマですから、設定をカスタマイズして使い倒してくださいね。

ではでは。

稼ぐ力を身につけて運命を変えよう!
ビジネスの勉強、試してみる価値あるかも。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です