JIN:R「ボックス」一歩先ゆくアレンジメントのアイデア

アシスタントさん

文章の中に強調して伝えたいことが埋もれてしまうんです。要点を整理して、明確に示す方法はないかな。

じゅん

ボックスを使って文章や箇条書きを囲むと、本文と区分けしてテキストを見せれるので、悩みが解決するかもしれないですね。

記事の要点やその見出しで伝えたいことを箇条書きにしただけだと、本文のテキストの中に埋もれてしまうと感じる人は多いのではないでしょうか。

大事な内容をもっと明確にして際立たせたいと思うときに役に立つのが、ボックスです。

そこでこの記事では、WordPressテーマ JIN:Rの「ボックスブロック」の使い方とアレンジ方法をたくさんのサンプルを使い紹介します。

この記事を読むと、ボックスの種類やアレンジできる設定項目、イチオシの使い方などが分かります。

多彩なボックスの装飾を使い記事の要点を整理して確実に伝えたいと思う方は、ぜひ最後まで読んで参考にしてください。

もし「JIN:R」にしようか迷っている方には、あなたの決断を後押しする情報を提供できると思います。

ボックスブロックのクイックガイド

ボックスブロックは、ブログ記事を書くときによく使う基本的なブロックです。

テキストや箇条書きなどを囲み装飾することで、本文と区分けできてまとまりが出たり、注目や強調の効果があります。情報を整理するときなどに便利なブロックです。

選択できる設定項目

デザインを選択する

JIN:Rのボックスは、全部で21種類あります。

タイトルなしは、さらに背景色が無い5種類と背景色が有る6種類に別れます。

タイトルありは、タイトル部分は背景色が有りテキスト部分は背景色が無いのが基本です。ただ、1種類だけ全体に背景色が有るボックがあります。

タイトルの表示位置は、テキストの上が7種類とテキストの左横が2種類です。

カスタマイズを選ぶ

「タイトルをつける」をONにすると、標準ではタイトルが無い11種類と引用にもタイトルを追加できます。ただ、枠のデザインに変化はないので、標準でタイトルありよりもさりげない表示になります。

「ボックスを編集」をONにすると、ボックスの色を変更できます。色はプリセットの7色に加えて、サイトのテーマカラーと文字色に登録した2色の合計9色から選べます。ボックスの色とタイトルの色はテーマ側で最適化されています。

この「ボックスを編集」で選んだ色は、そのブロックだけの変更です。よく使う色にボックスを登録変更するのは、WordPressの管理画面からできます。

デザインパターン一覧

JIN:Rのボックスの特徴的なデザインパターンをご紹介していきます。

まずは、シンプルな囲み線のブロックです。

次に、シンプルな囲み線のボックスにタイトルをつけるとこのようになります。

さらに、シンプルな囲み線のボックスにタイトルをつけ、色を変更しました。

今度は、背景色でまとまりを出していて線では囲っていないボックスです

このボックスにタイトルを追加して、色を変更しました。

今度は引用に使うボックスに、タイトルを追加した状態です。色の変更はできないですが、引用と言えばこのような色合いとデザインが定番です。

次に、タイトルありのボックスで、囲みの外にタイトルが出るタイプです。

このボックスの色を変更しました。

次は、タイトルありのボックスで、タイトルが内側にあるボックスです。

最後に、タイトルありのボックスで、左側にタイトルが配置されているタイプもあります。

21種類の多彩なボックスの中から抜粋しました。ボックスブロックの表示イメージを膨らませるサポートになりましたでしょうか。

ボックスの賢い使い方

私が思うおすすめの使い方をご紹介します。

オリジナルブロック単独の設定

このようにタイトルなしのブロックに「タイトルをつける」をONにして使うのがおすすめです。何の情報をまとめたのかをタイトルありのブロックより主張が強くなり過ぎず、でもちゃんと伝えられるところが気に入っています。

ブロックを組み合わせて使う場合

これまで見てきた通り、基本的にはボックスと段落を組み合わせて使います。段落は、文章でも箇条書きでも良いです。

少しアピール力を強めるには、背景とボックスを組み合わせる方法があります。背景ブロックをアレンジすることで、背景色ありのボックスよりもいろいろな表現ができます。

次は、商品コンセプトをアピールするのに使える組み合わせです。

背景とカラム（66/33）、デザイン見出し、段落、ボックスを使っています。ボタンは使わずに、URLをリンクする方法です。

次は、メニュー紹介に使える組み合わせです。

カラム（50/50）とボックス、デザイン見出し、段落、ボタンを使っています。

単純にカラムを分けてテキストを並べるよりも、ボックスを使うことでまとまり感が出せます。最後に、ボタンやリンクを置くことでナビゲーションの役割をします。

企業型のサイトで、プランやセット商品の明細紹介やメニュー紹介にも使えます。

JIN:RにはこのWordPressテーマを開発した方々がデザインしたコードをコピーするだけで使えるデザイン見本帳があります。こちらも超助かる便利メニューなので活用してくださいね。

アイデア次第で簡単にオシャレに仕上がる

JIN:R 公式

ボックスの使い方

ボックスブロックの使い方を説明していきます。設定項目は、右サイドバーに表示される内容をお好みで選択するだけで完了です。

ボックスのブロックを設置する

/ボックス または、/boxで、ブロックを呼び出す。

デザインを選択する

21種類あるボックスの装飾デザインから、目的に合わせて選びます。

カスタマイズを選ぶ

必要に応じて、「タイトルをつける」や「ボックスの編集」のカスタマイズをします。

WordPressの管理画面から、よく使うボックスの設定登録もできます。

まとめ：要点整理をしてコントラストをつけ伝えよう

WordPressテーマ JIN:Rのボックスブロックの、使い方とアレンジの方法をご紹介しました。

ボックスはブログ記事を書くとき、頻繁に使う基本的なブロックです。ボックスを使うことで、要点や明細などが他のテキストに埋もれることなく、読者に伝わりやすくなります。21パターンもの多彩なデザインが搭載されていて、目的に合わせた使い分けが可能になっています。

他のブロックと組み合わせることで、基本的なブロックながらアピールできることはたくさんあります。

ボックスを使って文章の要点整理と視覚的なコントラストを付けることで、読者に伝わりやすい記事を目指しましょう。

この記事がJIN:Rをもうすでにお使いの方にも、検討されている方にもお役に立てば幸いです。

じゅん

ブロガー

Contact

2020年9月から細々とブログを書き始め、現在2つのブログ運営中です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。