[WordPress]Diver入力補助「セクション」の使い方[Gutenberg]編

ばにら営業部長

今回は入力補助「セクション」を解説するよ

WordPressテーマDiverを今から導入しようと考えている初心者の方に入力補助機能「セクション」について解説します。

セクションと言ってもなんのことかさっぱりわかりませんよね。

セクションとは「分割された」や「区切り」などの意味です。

ブログやサイトの記事は通常見出しで区切られています。

簡単に言うと色でわかりやすく演出できるのがセクションです。

Diverのセクションとは色で区切ってコンテンツを分かりやすくする機能です。

この入力補助「セクション」はGutenbergのみの入力補助になっています。

クラシックエディターでは無い機能になっています。

セクションとは何ですか？

冒頭でも述べましたがセクションとは区切りのことです。

私も最初は使い方がいまいち分かりませんでしたがセクションを使って記事を書いてみると意外に便利に使えます。

コンテンツ記事が長く分かりにくくなってしまった場合にセクションで区分を分ければ見やすくユーザーにも読みやすい記事になります。

セクションの使い方

早速DIVER入力補助「セクション」を使ってみましょう。

これだけではイマイチ分かりにくいと思いますので次にもう少し設定を考えてみましょう。

上のセクションはブルーに設定してみました。

その中にアイコンボックスを設定することも可能です。

まだまだ分かりにくいと思いますのでさらにこうしてみました。

魚

綺麗な魚ですね

魚

すごい群ですね

魚

こちらも綺麗な魚です

①このセクションはアイコンボックスを3つのカラムで表示しています。

これでセクションは3つになりましたね。

セクションは他にどのように使えるのか検証

セクションの種類はどのようなものがあるのでしょうか？

下記のセクションは斜めに切り込みが入ったインパクトがあるものです。

これはどのように見えているのでしょうか？

このセクションは斜めスタイルのデザインを設定しました。他にも「吹き出し「や「丸みあり」もあります。

セクションの使い方は他にも出来ます。

イルカ

ここはセクション２です

上記のセクション１は普通にシンプルタイプの「吹き出し」スタイルのセクションを設定しています。

セクション２はシンプルタイプに「斜め2」のスタイルでアイコンボックスを入れて画像を表示設定にしています。

セクション3はシンプルの「吹き出し」で設定しています。

セクション４は背景画像タイプに設定しています。

セクションのおすすめの使い方

セクションの使い方でおすすめなのはピックアップしたい部分などに使うと良いと思います。

クラゲ

クラゲの長い触手には気をつけましょう。

セクションの中にアイコンボックスを使うことで１つの区切りをアピールできます。

セクションを使うことでデザイン的にサイトをはっきりとわかりやすく区切る事ができます。

Diver入力補助「セクション」の設定

設定は簡単です。入力補助でセクションブロックを探してタップすればセクションが表示されるためあとは背景色や文字など設定可能です。

入力補助でセクションを選ぶと表示されます。

セクションんが表示されたら右側のブロック設定でセクションのタイプや色を設定できます。

セクションを設定してセクションの中にアイコンなどを表示させるのはセクションの中に表示される＋をクリックして入力補助を開きます。

入力補助を開いて次にアイコンボックスを選択すればセクションの中にアイコンボックスを追加できます。

まとめ

WordPressテーマDIVERの入力補助機能「セクション」を使って分かりやすいコンテンツを作る事ができます。

DIVERには色々な入力補助機能がありますがセクションでは目立つよう記事を分割する場合に便利です。

セクションの中にアイコンボックスや見出しなど他の入力補助を入れてもっとはっきりとした区切りを設定できます。

あらゆる入力補助を活用する事で見やすいブログやサイトを作りコンテンツの質を上げる事ができます。

他にも入力補助について興味のある方は下記のリンクでまとめていますのでどうぞ。

合わせて読みたいDiver入力補助まとめ

[WordPress] Diver入力補助の使い方まとめマニュアル！[Gutenberg]編

2020.9.1

ばにら営業部長こんにちは！ばにら営業部長です WordPressテーマDiverの入力補助機能を解説しているコンテンツはたくさんあるけどいまいちわからない事ってありますよね。 それ...