JIN:Rのデモサイト「Cute」を使ったWebサイト構築の最短ルート
JIN:R「デザイン見出し」の一歩先ゆくカスタマイズ術を紹介します。
web-kumitatekoubou
記事内に商品プロモーションを含む場合があります
デザイン見出しのブロックを使えば、おしゃれなサイトにできそう。どのような使い方できるんだろう。普通の見出しと違うのかな。
WordPress テーマ「 JIN:R」のオリジナルブロックであるデザイン見出しは、どんな風に使えるのか見て見たい人も多いのではないでしょうか。
この記事では、様々な設定項目の紹介からデザインパターン、私なりのおすすめ設定をサンプルを使って紹介していきます。
デザイン見出しはサイトのデザイン性をアップさせることや、情報を区切り整理することで読みやすくできるブロックです。
デザイン見出しブロックの使い方を詳しく知りたい方は、ぜひ最後まで読んでいってください。
デザイン見出しは色々な設定ができて、アイディア次第で組み合わせは無限大です。JIN:Rを検討している方には、とても参考になると思います。
Contents
デザイン見出しブロックのクイックガイド
JIN:Rのオリジナルブロックであるデザイン見出しは、普段記事を執筆するときに使う見出しとは見た目が違います。アイコンや画像を追加するなど、様々なデザインで見出しを追加できます。逆に、デザインを最小限にすると、タイトルのようにも使えます。
トップページや記事などを華やかにデザインできて、情報を整頓して構造化するのに向いているブロックです。
このブロックはひとつで成り立つ訳ではないので、他のオリジナルブロックとの組み合わせ方が重要なポイントです。アイディアやセンスが光る部分になるでしょう。
選択できる設定項目
デザイン見出しでカスタマイズできることは多いですが、デザイン変更は全て右サイドバーから設定項目を選択するだけです。
デザイン見出しの設定項目
- レイアウト
- シンボル装飾
- デザイン
- 線の太さ
- タグ設定
- 色設定
- テキストサイズ
レイアウト
見出しタイトルやサブテキスト、シンボル装飾の位置を2パターンから選べます。
左寄せは、見出しタイトルやサブテキストが左寄せになり、シンボル装飾は見出しタイトルの横に配置されます。普通の見出しや、文章の開始位置と端が揃うイメージです。
中央寄せは、見出しタイトルやサブテキスト、シンボル装飾が中央寄せになり、シンボル装飾はサブテキストの上に配置されます。文字の位置が異なり、さらにシンボルが中央に来ることで目に留まる効果が高くなります。アイキャッチとして注目を集めたり区切りとしての効果が強まります。
シンボル装飾
選択項目は、なしと番号、アイコン、画像の4パターンです。選択したシンボルが、見出しタイトルとサブテキストを合わせたぐらいの大きさで表示されます。
番号は、1から9まで、アイコンはオリジナルのJINアイコン400種類から選べます。JINアイコンはショートコードなしでクリックで選択可です。
画像は、メディアライブラリから選ぶかフィルをアップロードして設置します。写真やイラストなどが使えてオリジナリティがさらに高まります。
デザイン
選択項目は、文字のみと下線、上下線の3パターンです。
見出しタイトルとサブテキストに横線の装飾を追加できて、アイキャッチや区切りの効果を調整できます。
中央寄せでシンボル装飾を設定しているときは、上線がシンボルを挟む形になります。
線の太さ
選択項目は、細めと、普通、太めの3パターンです。
デザインで設定した線の太さを選択できて、デザイン性や注目度を調整できます。デフォルトは細めでややシャープな印象で、太めにすると少し親しみやすい印象になります。
タグ設定
選択項目は、h2とh3、divの3パターンです。
デザイン見出しの見た目は、執筆画面やサイト上で変わらないですが、生成されるHTMLタグが変わります。デザイン見出しは変化しないですが、h2やh3にすると目次を作るときに反映されます。
h2やh3は見出しを表すタグなので、検索エンジンに「見出し」として伝えられます。キーワードなど検索結果に反映したいときはこちらを使います。divは汎用的な構造化するものという意味で、デザインとしてブロックを使ったときに設定すると良いでしょう。
色設定
メインテキスト、サブテキスト、見出し装飾（デザインの線）、シンボル装飾が個別で選べます。
主に淡い系の12色と黒がプリセットで、テーマカラーと文字色に設定した色も選択できます。デフォルトは全ての選択項目にテーマカラーが設定されているので、基本的には変更なしで使えます。
もちろん、自由な色を選んだり色コードを指定することも可能です。
テキストサイズ
見出しタイトルとサブタイトルの文字の大きさを変更できます。
通常のエディターで出来ることは基本できるので、JINアイコンやリンクを追加することも可能です。
デザインパターン一覧
デザイン見出しブロックの設定項目をいろいろ変えたデザインパターンをご紹介していきます。
まずは、シンプルなプランで、レイアウト：左寄せ、シンボル装飾：なし、デザイン：文字のみ、色設定：テーマカラー、テキスト：見出しタイトルのみです。
ここに見出しタイトル
次は、レイアウト：中央寄せ、シンボル装飾：番号、デザイン：下線、線の太さ：細め、色設定：テーマカラー、テキスト：見出しタイトルとサブテキストです。
2
サブテキストはここ
ここに見出しタイトル
次に、レイアウト：左寄せ、シンボル装飾：アイコン、デザイン：上下線、線の太さ：普通、色設定：テーマカラー、テキスト：見出しタイトルのみです。
次に、レイアウト：中央寄せ、シンボル装飾：画像、デザイン：上下線、線の太さ：太め、色設定：テーマカラー、テキスト：見出しタイトルとサブテキストです。
サブテキストはこちら
ここに見出しタイトル
次に、レイアウト：左寄せ、シンボル装飾：アイコン、デザイン：下線、線の太さ：細め、色設定：シンボルだけ変更、テキスト：見出しタイトルとサブテキストです。
最後に、レイアウト：中央寄せ、シンボル装飾：番号、デザイン：上下線、線の太さ：太め、色設定：シンボル・見出し装飾（線）を変更、テキスト：見出しタイトルとサブテキストです。
6
サブテキストはこちらに
ここに見出しタイトル
文字の説明だとイメージが湧きにくかったかと思います。これらのデザインパターン以外にも様々な組み合わせを楽しんでみてくださいね。
デザイン見出しの賢い使い方
私が考えるデザイン見出しのおすすめ設定をご紹介します。
オリジナルブロック単独の設定
まずはこちらです。
設定項目は、中央寄せでシンボル装飾：アイコン、デザイン：上下線、線の太さ：細め、テキスト：メインタイトルとサブテキストです。
見出しとして注目をしっかりと集められて、区切りであることもわかりやすいです。伝えられる情報は多いですが、すっきりとした印象に仕上がります。
もう一つはこちらです。
1
コンセプトAとして
2
コンセプトBとして
設定項目は、左寄せでシンボル装飾：番号、デザイン：下線、線の太さ：太め、色設定：シンボル装飾だけ変更、テキスト：見出しタイトルのみです。
明確に画面の中を区切れて、繰り返すことで複数のコンセプトを表現できます。
ブロックを組み合わせて使う場合
デザイン見出しは、他のブロックと組み合わせるとその良さがさらに引き出せます。
トップページなどで使うことが多いのが、「デザイン見出し」＋「記事リスト」です。
JIN:Rのデモサイト「Resort」を使ったWebサイト構築の最短ルート
JIN:Rのデモサイト「Nature」を使ったWebサイト構築の最短ルート
PRしたい記事や商品へのリンクを配置するCTAエリアに使う場合は、「背景」＋「デザイン見出し」+「段落」＋「ボタン」です。
ここが「段落」のブロックです。おすすめな理由をここに書きます。
JIN:Rのブロックは基本的に、PCとスマホの全ての端末で表示されますが、それをPCのみ表示とスマホのみ表示に設定も可能です。
スマホで表示したときは文字数を減らして、情報をすっきりとさせるためにブロックを非表示する方法が取れます。
下記は、PCとスマホで見え方が異なるように設定しています。
ここが「段落」のブロックです。おすすめな理由をここに書きます。スマホで見るとここは表示されないです。
他にも、JIN:Rを開発した方々がデザインしたコードをコピーするだけで使えるデザイン見本帳があります。こちらも超助かる便利メニューなので活用してくださいね。
JIN:R公式の「デザイン見本帳」マニュアルはこのリンクから見れますデザイン見出しブロックの使い方
実際に、どのようにしてデザイン見出しブロックを使うのかを説明していきます。
デザイン見出しのブロックを設置
ブロックを呼び出すには、使いたい場所で「 /デザイン見出し」と入力をします。
そうすると候補として表示されるのでクリックして選択します。
デザイン変更
ブロックを選択したら表示される右サイドバーで設定項目を選びます。
設定項目できるのは、レイアウト、シンボル装飾、デザイン（線の有無と太さ）です。
タグを設定
デザイン見出しのHTMLタグを設定します。見出しの属性を持たしたい場合はh2かh3を、装飾の場合はdivを選択します。
色設定
標準でテーマカラーが選択されています。基本的には変更なしで大丈夫ですが、それぞれの選択項目で色を変えることもできます。
テキストは見出しテキストとサブテキストの2カ所に入力できます。サブテキストは空欄にしておくと非表示です。文字の大きさも変更可能です。
詳しくは、JIN:R公式の「デザイン見出し」マニュアルをこちらから参考にしてくださいまとめ：デザイン見出しを使って見やすいサイトに
JIN:Rのデザイン見出しブロックをサンプルと共にご紹介してきました。
実際のデザイン見出しのデモを目にしたことで、出来ることのイメージが膨らんだのではないでしょうか。
いろいろと設定できるので、きっと自分のイメージや好み、目的にあった組み合わせ方が見つかるでしょう。
最低限整ったデザインに仕上がる中から選ぶだけなので、ぜひ気軽に試してデザインを楽しんでください。
この記事が、JIN:Rを利用してブログを始めようかと検討されている方のお役に立てれば幸いです。
ABOUT ME
2020年9月から細々とブログを書き始め、現在2つのブログ運営中です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。
