SWELLの始め方ガイド|これからSWELLを使い始める方はこちら→SWELLの始め方ガイド→クリックタップ

WordPressテーマJIN:Rのブロックエディター機能や使い方まとめ

WordPressテーマJIN:Rのブロックエディター機能や使い方まとめ
  • URLをコピーしました!

WordPressテーマ「JIN:R」のブロックエディターの使い方や機能をまとめて紹介します。

JIN:Rのブロックエディターは、デザインに関わるような設定項目が多く、デザインに力を入れている印象を受けました。

この記事では、画像を多めに使いながらそれぞれのブロック機能を紹介していきます。


執筆時の環境 ※初回執筆:2022/11/25
WordPress

v6.1.1

JIN:R

v1.0.2

記事はできる限り最新情報に更新していきますが、キャプチャ等は執筆時点の物が多くなると思います。

目次

WordPressテーマJIN:Rのブロックエディター機能まとめ

WordPressテーマJIN:Rでは、ブロックエディターの機能に以下の独自機能が追加されています。

JIN:Rの独自機能を使いこなすためには、まずWordPress標準のブロックエディターの使い方を把握することも大切です。以下の記事にまとめているので参考にしてください。

それでは、JIN:Rのブロックエディターオリジナル機能を紹介していきます。

JIN:R専用のオリジナルブロック

WordPressテーマJIN:Rで独自に用意されているオリジナルのブロックは以下です。

  1. ボックスブロック
  2. デザイン見出しブロック
  3. ボタンブロック
  4. アイコンボックスブロック
  5. 吹き出しブロック
  6. アコーディオンブロック
  7. タイムラインブロック
  8. プロフィールブロック
  9. リッチメニューブロック
  10. 記事リストブロック
  11. ブログカードブロック
  12. カテゴリー区別ブロック
  13. フルワイドブロック
  14. 背景ブロック
  15. コードブロック
  16. 区切り線ブロック

それぞれ紹介していきます。

ボックスブロック

ボックスブロックは、囲み枠の中にテキストや画像を自由に配置できるブロックです。

JIN:Rのボックスブロックでできることは以下のとおりです。

  • ボックスのデザインを21種類から選択できる
  • ボックスの中には、画像やリストなど段落ブロック以外も配置できる

ボックスのデザインはサイドバーから選択できます。

JIN:Rのボックスブロック-1

ボックスデザインの数が多いので、動画にまとました。

ボックスのカラーは、テーマカスタマイザーから変更できる仕様になっています。

WordPress管理画面→「外観」→「カスタマイズ」→『ボックス』⇒”ボックス”タブ

JIN:Rのボックスブロック-2

ボタンブロック

WordPress標準ブロックにもボタンブロックがありますが、JIN:Rでは独自のボタンブロックが用意されています。

JIN:Rのボタンブロックでできることは以下のとおりです。

  • ボタンのデザインを6種類から選択できる
  • ボタンの配置を3種類から選択できる
  • 広告タグも改変無しで入力できる

ボタンのデザインはサイドバーから選択できます。

JIN:Rのボタンブロック-1
スクロールできます
JIN:Rのボタンブロック-4
塗りつぶしスタイル
JIN:Rのボタンブロック-5
アウトラインスタイル
JIN:Rのボタンブロック-6
アロースタイル

ボタンのデザインは、テーマカスタマイザーから変更できる仕様になっています。

WordPress管理画面→「外観」→「カスタマイズ」→『ボタン』

JIN:Rのボタンブロック-2
JIN:Rのボタンブロック-3
さとしん

CSS無しで細かいところまで設定できるようになっています…!

アイコンボックスブロック

アイコンボックスブロックでは、アイコンとテキストを組み合わせた装飾ができます。

JIN:Rのアイコンボックスブロックでできることは以下のとおりです。

  • ボックスタイプを2種類から選択できる
  • 2つのタイプ合計で12種類のデザインを選択できる

アイコンボックスのタイプは2種類から選ぶ仕様になっています。

JIN:Rのアイコンボックスブロック-1
JIN:Rのアイコンボックスブロック-3
ベーシック
JIN:Rのアイコンボックスブロック-2
タイトル付き

ベーシックタイプで8種類、タイトル付きタイプで4種類のスタイルがそれぞれ用意されています。

JIN:Rのアイコンボックスブロック-4
ベーシックのスタイル
JIN:Rのアイコンボックスブロック-5
タイトル付きのスタイル

アイコンボックスのアイコンとカラーをテーマカスタマイザーから設定できます。

WordPress管理画面→「外観」→「カスタマイズ」→『ボックス』⇒”アイコンボックス”タブ

JIN:Rのアイコンボックスブロック-6

吹き出しブロック

吹き出しブロックでは、テキストを会話風の装飾で表現することができます。

JIN:Rの吹き出しブロックでできることは以下のとおりです。

  • 良く使う吹き出しを登録できる
  • 吹き出しのデザインは3種類から選択できる

良く使う吹き出しの画像やデザイン、配置をデフォルトで10個まで登録しておくことができます。

登録した吹き出しはサイドバーから簡単に記事内に配置できます。

JIN:Rの吹き出しブロック-4

11個目のふきだしからはショートコードを使って作ることになるので、使い勝手としては少し悪くなってしまう点に注意です。

吹き出しはテーマカスタマイザーから登録します。

WordPress管理画面→「外観」→「カスタマイズ」→『吹き出し』

JIN:Rの吹き出しブロック-10
JIN:Rの吹き出しブロック-9

吹き出しのデザインを3種類から選択できます。

JIN:Rの吹き出しブロック-5
スクロールできます
JIN:Rの吹き出しブロック-8
デフォルト
JIN:Rの吹き出しブロック-7
心の声
JIN:Rの吹き出しブロック-6
インタビュー
さとしん

インタビュースタイルもアクセントになって良さそうですね…!

アコーディオンブロック

アコーディオンブロックは、コンテンツを折り畳んで隠しておくことができるブロックです。うまく活用するとページをすっきりさせることができます。

JIN:Rのアコーディオンブロックでできることは以下のとおりです。

  • デザインを2種類から選択できる
  • タイプを2種類から選択できる

アコーディオンのデザインとタイプをそれぞれ2種類から選べます。

JIN:Rのアコーディオンブロック-1
JIN:Rのアコーディオンブロック-2
アウトライン/ベーシック
JIN:Rのアコーディオンブロック-3
ベタ塗り/QA形式

アコーディオンのタイトル部分のみ、枠線(ベタ塗りの場合は背景色)と文字色を変更できる仕様になっています。

JIN:Rのアコーディオンブロック-4

タイムラインブロック

タイムラインブロックは、物事を時系列順や手順ごとに並べて紹介する時に便利なブロックです。

JIN:Rのタイムラインブロックでできることは以下のとおりです。

  • タイプを2種類から選択できる
  • スタイルを2種類から選択できる
  • STEPのテキストを個別に設定できる
  • タイムラインのタグを選択できる

タイムラインのタイプとデザインをそれぞれ2種類から選べます。

JIN:Rのタイムラインブロック-1
JIN:Rのタイムラインブロック-4
テキスト/リバーフロー
JIN:Rのタイムラインブロック-2
記事/ベーシック

STEP部分のタイトルを個別に設定することも可能です。

JIN:Rのタイムラインブロック-5

個人的に特にありがたいなと感じたのは、タグを「div」か「h3」で選択できる点です。例えば、h3に設定しておけばSTEPの見出し部分が目次にも表示されるので活用の幅が広がると思います。

JIN:Rのタイムラインブロック-6

プロフィールブロック

プロフィールブロックは、設定しておいたプロフィールカードを記事内に自由に配置できるブロックです。

JIN:Rのプロフィールブロックでできることは以下のとおりです。

  • デザインを2種類から選択できる
  • SNSフォローボタンの表示・非表示、カラーを設定できる

まず、プロフィール情報をテーマカスタマイザーから設定しておく必要があります。

WordPress管理画面→「外観」→「カスタマイズ」→『プロフィール登録』

JIN:Rのプロフィールブロック-1
さとしん

SNSアカウントの紐づけは同じくテーマカスタマイザーの『SNSアカウント登録』から設定できます…!

プロフィールが登録されていれば、後は記事内に自由にプロフィールブロックを配置するだけでOKです。

JIN:Rのプロフィールブロックでは、2種類のデザインを選択できます。

JIN:Rのプロフィールブロック-2
JIN:Rのプロフィールブロック-3
デザイン1
JIN:Rのプロフィールブロック-4
デザイン2

デザイン見出しブロック

デザイン見出しは主にトップページなどで活用するケースが多い、タイトルとキャッチコピーがセットになった見出しを配置できるブロックです。

ブログ記事内では、デザイン見出しではなく通常の見出しブロックを使うことが多いと思います。

JIN:Rのデザイン見出しブロックでできることは以下のとおりです。

  • レイアウトを2種類から選択できる
  • シンボル装飾を柔軟に設定できる
  • デザインを3種類から選択できる

レイアウトを2種類から選べます。

JIN:Rのデザイン見出しブロック-1
JIN:Rのデザイン見出しブロック-3
左寄せ
JIN:Rのデザイン見出しブロック-2
中央寄せ

シンボル装飾の設定欄で、見出しと一緒に配置するシンボルを設定できます。

JIN:Rのデザイン見出しブロック-4

配置できるシンボルは、数字や画像の他にJIN:Rのオリジナルアイコンを設定することができるので、かなり選択肢が豊富です。

スクロールできます
JIN:Rのデザイン見出しブロック-5
番号
JIN:Rのデザイン見出しブロック-6
アイコン
JIN:Rのデザイン見出しブロック-7
画像

デザインを3種類から選択できて、ボーダー(線)の太さも調整できます。

JIN:Rのデザイン見出しブロック-8
スクロールできます
JIN:Rのデザイン見出しブロック-11
文字のみ
JIN:Rのデザイン見出しブロック-10
下線
JIN:Rのデザイン見出しブロック-9
上下線

リッチメニューブロック

リッチメニューブロックは、ナビゲーションなどで活躍するブロックです。

JIN:Rのリッチメニューブロックでできることは以下のとおりです。

  • カラムをデバイスサイズごとに指定できる
  • 画像比率を5種類から設定できる
  • デザインを5種類から選択できる
  • アニメーションやホバー時の挙動も設定できる

PCとスマホそれぞれで、カラム(列の数)を設定できます。スマホではスライドも可能です。

JIN:Rのリッチメニューブロック-1

リッチメニューの画像の比率(縦横比)を5種類から設定できます。

JIN:Rのリッチメニューブロック-2

メニューアイテム(タイトル)を表示する場合の、デザインや文字サイズ、カラーも変更できす。

JIN:Rのリッチメニューブロック-3
JIN:Rのリッチメニューブロック-4
スタイル1|下
JIN:Rのリッチメニューブロック-5
スタイル5|外に出す

リッチメニューが表示されるときと、マウスカーソルをメニューに合わせたときのアニメーションも設定できます。

JIN:Rのリッチメニューブロック-6

記事リストブロック

記事リストブロックでは、記事を新着順やカテゴリーごとにまとめて表示させることができます。

JIN:Rの記事リストブロックでできることは以下のとおりです。

  • 記事タイプを2種類から選択できる
  • デザインとカラム数をデバイスサイズごとに4種類から選択できる
  • アニメーションやホバー時の挙動も設定できる

新着記事を表示するか、指定したカテゴリーの記事を表示するか選択できます。表示する記事の数も設定可能です。

JIN:Rの記事リストブロック-1

PCとスマホで表示するデザインをそれぞれ4種類から選択できます。カラム数(列の数)もデバイスごとに指定可能です。

JIN:Rの記事リストブロック-2

下のタブをクリックするとそれぞれのデザインが確認できます。

JIN:Rの記事リストブロック-3
縦長カード

ブログカードブロック

ブログカードブロックは、記事内で関連記事などを紹介するときに便利なブロックです。

JIN:Rのブログカードブロックでできることは以下のとおりです。

  • デザインを2種類から選択できる
  • 内部リンク、外部リンクともに設定できる ※懸念点あり

デザインを2種類から選択できます。

JIN:Rのブログカードブロック-1
JIN:Rのブログカードブロック-2
ベーシック
JIN:Rのブログカードブロック-3
コンパクト

内部リンクの場合は、サイドバーにURLを入力します。

JIN:Rのブログカードブロック-4

外部リンクの場合は、URLに加えて、記事タイトルやアイキャッチ画像まで手動で設定する必要があります。

JIN:Rのブログカードブロック-5
みにしん

この外部リンクの仕様はかなり大変なので注意…!

カテゴリ区別ブロック

カテゴリ区別ブロックは、特定のカテゴリだけにブロックを表示させることができるブロックです。

カテゴリ区別ブロックは「ウィジェット」だけで使えるブロックです。

JIN:Rのウィジェットは「ウィジェットブロックエディター」という形式です。以下の記事に使い方をまとめています。

JIN:Rのブログカードブロックでできることは以下のとおりです。

  • ウィジェットでのみ使用可能
  • カテゴリーの設定方法は2種類

ウィジェットの編集画面を開いたら、任意のウィジェットエリアにカテゴリ区別ブロックを配置します。

カテゴリーの指定方法は「カテゴリー名」、「ID」の2種類です。

JIN:Rのカテゴリ区別ブロック

カテゴリ区別ブロックの内容を表示させたいカテゴリーを選択しましょう。複数のカテゴリーを表示対象にしたい場合は「ID」の方でカンマ区切りで指定します。

フルワイドブロック

フルワイドブロックは、画面いっぱいに背景やコンテンツを配置できるブロックで、トップページなどのデザインで活躍します。

JIN:Rのフルワイドブロックでできることは以下のとおりです。

  • コンテンツの幅を2種類から選択できる
  • 背景を画像にするか単色にするか選択できる
  • ブロック内側の余白を設定できる

コンテンツの幅と背景装飾をそれぞれ2種類から選択できます。

JIN:Rのフルワイドブロック-1
JIN:Rのフルワイドブロック-2
装飾なし
JIN:Rのフルワイドブロック-3
背景画像

ブロック内側の余白をPC&タブレット、スマホサイズでそれぞれ設定できます。

JIN:Rのフルワイドブロック-4

WordPress標準ブロックの機能拡張

WordPressテーマJIN:Rでは、以下のWordPress標準ブロック(コアブロック)に対して独自の拡張機能が追加されています。

  • 見出しブロック

見出しブロック

JIN:Rでは、WordPress標準ブロックの見出しブロックにデザイン面で機能が追加されています。

JIN:Rの見出しブロックでできることは以下のとおりです。

  • h2~h4の見出しデザインが豊富
  • 自分でCSSを記述したカスタマイズもしやすくなっている

編集画面では、特に見出しブロックの設定は変更できません。ブロックを配置して見出しを入力するだけです。

JIN:Rの見出しブロック-1

テーマカスタマイザーでh2~h4の見出しデザインをそれぞれ設定する仕様になっています。

WordPress管理画面→「外観」→「カスタマイズ」→『見出し』

JIN:Rの見出しブロック-2

また、JIN:Rの選択肢に無い見出しデザインを自分でカスタマイズして使いたい場合は、「CSSカスタマイズ用」の見出しを選んだ状態で、以下のクラスに対してCSSを記述することで簡単にカスタマイズが可能です。

JIN:Rの見出しブロック-3
  • .d–h2-original
  • .d–h3-original
  • .d–h4-original

エディター全体の機能拡張

WordPressテーマJIN:Rでは、WordPress標準のブロックエディター機能に対して以下の独自拡張機能が追加されています。

  1. JIN:Rオリジナルアイコンの挿入
  2. ブロックの上下余白設定
  3. マーカー風の装飾
  4. 文字サイズの個別調整
  5. デバイスごとの非表示設定
  6. ブロックごとのCSS追加

それぞれ画像や動画を使いながら紹介していきます。

JIN:Rオリジナルアイコンの挿入

JIN:Rでは、オリジナルのアイコンを400種類ほど使用することができます。

アイコンは、記事の文中に挿入することもできますし、装飾として各ブロックと組み合わせて使うこともできます。

JIN:Rのオリジナルアイコンの挿入はブロックツールバーの「JINアイコン」から行います。

JIN:Rのオリジナルアイコン-1

その他にもデザイン見出しアイコンボックスなどでもアイコンを設定できます。

JIN:Rのオリジナルアイコン-2
デザイン見出し
JIN:Rのオリジナルアイコン-3
アイコンボックス

ブロックの上下余白設定

JIN:Rでは、サイドバーから各ブロックの上下の余白をPCとスマホサイズをそれぞれ指定できます。

JIN:Rの余白設定
さとしん

読みやすい記事や見やすいページを作るためには適切な余白が必要になります。機能をうまく使いながら心地の良い余白感を設定していきたいですね…!

マーカー風の装飾

JIN:Rでは2種類のマーカー風装飾を使うことができます。マーカー色や太さの設定はテーマカスタマイザーで行います。

WordPress管理画面→「外観」→「カスタマイズ」→『カラー設定』⇒”執筆ツールの設定”

JIN:Rのマーカー風装飾-1

マーカー風の装飾は、ブロックツールバーの「文字装飾」から行います。

JIN:Rのマーカー風装飾-2

マーカーだけでなく、太字との組み合わせやカスタムカラー、キーボード風装飾などもあります。

文字サイズの個別調整

ブロックエディターのデフォルトの機能では、ブロック全体の文字サイズを一括で変更することしかできません。

そこでJIN:Rでは、ブロック内の一部の文字だけサイズを変更できるような機能が用意されています。

対象の文字を選択した状態でブロックツールバーの「フォントサイズ」から設定できます。

JIN:Rのフォントサイズ

デバイスごとの非表示設定

PCでページを閲覧したときだけ非表示にしたり、スマホで閲覧したときだけ非表示にすることができます。

対象のブロックを選択した状態でブロックツールバーからお好みに合わせたアイコンをクリックするだけでOKです。

JIN:Rのデバイスコントロール
  • 全ての端末で表示
  • PCのみ表示
  • スマホのみ表示

ブロックごとのCSS追加

JIN:Rでは、ブロックごとに適用するCSSをエディター内で記述することができます。

CSSを当てたいブロックを選択した状態で、サイドバーの「追加CSS」欄にCSSを記述するだけでOKです。

JIN:Rのブロックごとの追加CSS

記述したCSSは、フロント側(実際の記事の表示画面)だけでなくエディター側(編集画面)にも反映されるので便利です。

JIN:Rパターンブロック|デザイン見本帳について

JIN:Rでは、WordPressのブロックパターンという仕組みを活用した「デザイン見本帳」が用意されています。

JIN:Rのデザイン見本帳-1

デザイン見本帳にあるブロックはコピペで自分の記事内に挿入することができます。

デザイン見本帳は、エディターのトップツールバー内にある「JIN:R デザイン見本帳」のボタンリンクからアクセス可能です。

JIN:Rのデザイン見本帳-2

ランキングなど記事内で使えるパターンや、JIN:Rのデモデザインもパターンとして用意されています。

JIN:Rのブロックエディター機能と使い方まとめ

WordPressテーマJIN:Rのブロックエディターについて紹介しました。

JIN:Rのブロックエディターでできることは以下です。

この他にデザイン見本帳というブロックのパターンをコピペできる仕組みもあります。

ブロックエディター機能に関しては、例えばSWELLのブロックエディター機能の方が充実していますが、JIN:Rではデザイン面にかなり力を入れて作られているなという印象を持ちました。

JIN:Rのブロックエディターが今後どのように開発が進められていくのか楽しみにしておきたいと思います。

最後まで読んでいただきありがとうございました。


WordPressテーマのブロックエディター機能一覧

WordPressテーマJIN:Rのブロックエディター機能や使い方まとめ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次