JIN:R「背景ブロック」一歩先ゆくアレンジのアイデア

アシスタントさん

文字ばかりだと単調で、大切なポイントを目立たせる方法はないかな。

じゅん

背景ブロックを使いコンテンツの背景に色や画像を置くことでコントラストが付き、アピール度を高められますよ。

ウェブサイトのトップページやブログ記事で、特に伝えたい内容を際立たせて、もっと注目を集めたいと思うことはありませんか。

そこでこの記事では、JIN:Rの背景ブロックの使い方と設定項目、アレンジのヒントをたくさんのサンプルを使いながら紹介します。

この記事を読めば、背景が単調になりがちなトップページや記事に背景色や写真などで変化を加えて、読者の注目を集める方法がわかります。

背景ブロックを使った効果的な豊富な目立たせ方を知りたい方は、ぜひ最後まで読んでいってください。

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

背景ブロックのクイックガイド

背景ブロックは、フルワイドブロックやWordPressに標準で備わっているカバーブロックと、背景色や背景画像を設定できる点では似ています。でも、背景ブロックの方が、デザイン設定が柔軟にできるメリットがあります。そのため、様々なブロックを演出するベース・敷物として使いやすいJIN:Rのオリジナルブロックです。

選択できる設定項目

背景のタイプをフラットと影の2種類から選びます。影タイプは影の具合を小、中、大、ふんわりの4パターンから選択します。

枠線デザインは、「なし」が標準です。

枠線デザインありは、実線と点線、破線、二重線の4パターン準備されています。配置と太さ、色には、次の選択肢があります。

• 配置をインセットかアウトセットか
• 太さを1から5の5段階
• 色を淡い系の9色と黒、テーマカラー、文字色の12色

背景色は、単色とグラデーションを選択します。単色は淡い系の9色と黒、透明、テーマカラー、文字色の13色あり、グラデーションは6パターンが準備されています。

枠線色と背景色は、自由に選んで設定も可能です。

パターン選択は、ベタ塗りが標準です。他にもドットや斜めストライプ、縦ストライプ、パズル柄、四角から選べます。

「オリジナル画像を使う」を選択すると、メディアにアップロードした画像を表示できます。

ベタ塗りのパターン以外とオリジナル画像を設定した場合は、画像サイズと画像の透明度も調節できます。

画像のサイズの設定で、ひとつの画像を表示したいときは100にします。パターンのように繰り返し表示したいときは適度に数字を下げてイメージに合うように調整します。

画像の透明度は数字を下げるとくっきりと表示されます。

オリジナル画像を使うときのポイント

パターン選択とオリジナル画像では、パターン選択が優先されます。

背景ブロックよりもオリジナル画像が小さいと、余白を埋めるように同じ画像が繰り返し表示されます。パターンのように繰り返し表示したくないときは、縦方向に余裕のある画像の方が良いです。横長だとスマートフォンに最適化されたときに背景ブロックが縦方向に伸びて、意図せずに空白が生まれるからです。その空白を埋めるために自動で繰り返し表示されてしまいます。

オリジナル画像の上に背景色が表示されるため、フィルターをかける効果が得られます。画像の透明度とうまく調整しましょう。

オリジナル画像にパターンになる想定をした画像を使うと、パターンの自作も可能です。

たくさん設定項目があってややこしいように思いますが、細かく選ばなくても初期設定が実用レベルになっているので安心してください。

デザインパターン一覧

JIN:Rの背景ブロックで設定項目を変更したデザインパターンを紹介していきます。

まずは、標準の設定で、タイプ選択：フラット、枠線デザイン：なし、背景色：単色、パターン選択：ベタ塗り です。

次は、タイプ選択：影、影の種類：小、枠線デザイン：なし、背景色：単色、パターン選択：ベタ塗り です。

次は、タイプ選択：影、影の種類：中、枠線デザイン：実線、配置：アウトセット、太さ：1、背景色：単色、パターン選択：ベタ塗り です。

次は、タイプ選択：影、影の種類：大、枠線デザイン：点線、配置：インセット、太さ：3、背景色：グラデーション、パターン選択：四角 です。

次は、タイプ選択：影、影の種類：ふんわり、枠線デザイン：破線、配置：アウトセット、太さ：3、背景色：グラデーション、パターン選択：ドット です。

次は、タイプ選択：フラット、枠線デザイン：二重線、配置：インセット、太さ：5、背景色：グラデーション、パターン選択：斜めストライプ です。

次は、タイプ選択：フラット、枠線デザイン：なし、背景色：グラデーション、パターン選択：縦ストライプ です。

次は、タイプ選択：フラット、枠線デザイン：実線、配置：インセット、太さ：4、背景色：グラデーション、パターン選択：パズル柄 です。

今度は、タイプ選択：影、影の種類：大、枠線デザイン：実線、配置：インセット、太さ：4、背景色：単色、「オリジナル画像を使う」を選び、画像のサイズ：100にしています。

最後は、タイプ選択：フラット、枠線デザイン：点線、配置：アウトセット、太さ：2、背景色：グラデーション、「オリジナル画像を使う」を選び、画像のサイズ：8にしています。

カスタマイズ項目が豊富で全ての組み合わせを紹介できないです。多彩な背景ブロックの選択パターンの中から抜粋しましたが、表示イメージを膨らませるサポートになりましたでしょうか。

背景ブロックをアレンジした使い方

私が思う「背景」ブロックでおすすめの使い方をご紹介します。

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

影と枠線デザインを実線で付けています。ボックスブロックよりも柔軟なデザインが可能です。

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

背景とボタンを組み合わせたシンプルなPRエリアです。記事の終わりなどによく設置しています。

サンプルです

JIN:R 公式

背景の中に、デザイン見出しとカラム（33/66）、画像、段落（テキスト）、ボタンを設置しています。ビジュアルも使ったキャンプ場のPRエリアをイメージしています。

サンプル

富士山がとてもよく見えるキャンプ場

当キャンプ場は、富士山の麓にあり視界を遮ることなく、ばっちりと霊峰富士が見えます。

この素晴らしい環境を維持するためにインビテーションを受け取った方だけの完全会員制キャンプ場です！

「Sample」レビュー記事に飛びます

詳しくはこちら

JIN:Rのブロックは基本的にPCとスマホの全ての端末で表示されますが、それをPCのみ表示とスマホのみ表示に設定も可能です。

スマホで見たときはデザインから直感的にわかりやすくしたり、ブロックを減らすことでページをスッキリと出来ます。

下記は、PCとスマホで見えるボックスが異なるように設定しています。

PCのみの表示では、背景に段落（テキスト）、ボタンを設置して、テキストでコンセプトやアピールポイントを伝えています。

スマホのみの表示では、背景にデザイン見出しとボタンを設置して、テキストでの説明していた内容を省略して、デザイン見出しとボタンのテキストで補っています。

スクロール量を減らすことに繋がり、スマホユーザーの読みやすさ向上を狙っています。

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

背景ブロックの基本的な使い方

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

背景ブロックを設置する

「/背景」と入力します。

ブロックの基本設定をする

タイプ選択や枠線デザイン、背景色を選択します。

パターンorオリジナル画像を設定する

背景のパターン選択をするか、オリジナル画像を設定します。

パターンorオリジナル画像の調整をする

画像のサイズと画像の透明度を表現したい内容に合わせて調整します。

まとめ：アクセントにして強調や、まとまりを演出しよう

WordPressテーマ JIN:Rのオリジナルブロック「背景」の使い方とアレンジのアイデアを紹介してきました。

背景ブロックはトップページや個別記事など幅広い場所で、色々なブロックのベースとして柔軟に使えます。

タイプ選択や枠線デザインなど豊富なプリセットを利用したり、オリジナル画像を使用した独自のビジュアル作成もできます。特に、オリジナル画像は繰り返し表示させることも可能なので、パターン画像のようにもデザインできます。

ぜひ、あなたの創造性を色々な表現方法で試してみてください。

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

多彩なオリジナルブロックでサイト運営をサポート

JIN:R 公式

じゅん

ブロガー

Contact

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