pickup
WordPress
ばにら営業部長
こんにちは。今回はDiverの囲い枠について解説します。

この記事はWordPressのテーマDIVERの入力補助機能「囲い枠」の使い方を解説しています。

これからWordPressを始めてテーマをDIVERにしている方が使い方の参考になるようレビューしています。

今回は「囲い枠」を使った記事をどんな風に書けるのかと記事中でどのように使うのかをレビューします。

このコンテンツでわかること

  • この枠は囲い枠で囲っています。
  • 囲い枠の種類がわかります。
  • 囲い枠の色がわかります。
  • 背面の色の変更方法がわかります。

DIVER入力補助「囲い枠」の種類

囲い枠とはそのなの通り文書を枠で囲っている機能です。

目立たせたい部分や強調したいところなどを枠で囲って見やすくする演出です。

それではどうゆうものか見てみましょう。

まずDIVERの入力補助機能「囲い枠」の種類ですがWordPressエディター「Gutenberg」では6種類あります。

囲い枠その1

ここには文書以外でもいろんな記述を入力可能です。

これで通常の文書よりも目立つことが出来ますね。上の「囲い枠その1」の部分がタイトルになります。

そしてテキスト部分は文書以外も入力が可能なため結構便利な使い方が出来ます。

囲い枠その2

ここには文書以外でもいろんな記述を入力可能です。

テキスト以外の使い方はURLを埋め込んだりショートコードを埋め込んだりと普通のブロック同様に使えて便利です。

上の囲い枠は上側部分全体がタイトル欄になっています。

囲い枠その3

ここには文書以外でもいろんな記述を入力可能です。

上の囲い枠は下側がタイトル部分になっています。

囲い枠その4

ここには文書以外でもいろんな記述を入力可能です。

上の囲い枠は左上部分がタイトル部分です。

囲い枠その5

ここには文書以外でもいろんな記述を入力可能です。

上の囲い枠は枠線自体にタイトルが入っています。

「囲い枠その6」ここには文書以外でもいろんな記述を入力可能です。

上の囲い枠はタイトル部分がなく囲い枠ののみになっています。

DIVERの「囲い枠」の色設定

枠線色の設定

囲い枠の枠線の色は11種類+カスタムカラーが選べます。

この色を枠線に設定することでテキストを強調することが可能になります。

枠線色の設定

11色+カスタム色があります。この枠線はブルーを選んでいます。

カラー設定の枠線は自分の好きな色をクリックすればすぐにその色を設定可能です。

また出先でブログを更新する場合などiPhoneで作業する場合も枠線の設定と色を変更する作業はサクサク行えます。

iPhoneの場合は設定画面に切り替えて作業する必要があります。

背景色の設定

背景色を設定すれば囲い枠をさらに強調することが可能です。

しかし設定する色によっては明るいイメージと暗いイメージになるため気を付けて設定する方が良いです。

背景色の設定

ここでは黒い枠線色を設定して背景色は黄色にしています。どうですか目立つでしょう?

このように背景色によってかなり目立たせることが可能です。特に強調したいところなどで使えます。

DIVER入の力補助機能「囲い枠」の使い方「gutenberug」ブロックエディターの場合

DIVERの入力補助機能「囲い枠」の便利な使い方もご紹介します。

使い方は簡単でブロックエディターの場合はブロックの選択で囲い枠を選択して枠線を選ぶだけです。

その後、枠線の色設定やタイトルを入力して最後にテキストを入力するだけです。

ここでいくつかの使い方をご紹介します。

まず私が良く使うのが他のページのリンクを貼る時にURLを囲い枠の中に埋め込みます。

下記の画像のようにすれば簡単にリンクを貼ることが出来ます。

囲い枠にURLを埋め込むと下記のようにページを貼れます。

もう1つご紹介します。下の画像は「会話」を囲い枠の中に入れています。

囲い枠の中には全てのブロックを表示させることが可能です。

囲い枠

実際には下の画像のようになります。囲い枠の中でだけ会話をしているように設定出来ますね。

囲い枠に会話を入れています。
バニラ
囲い枠の中に会話を入れているよ。

囲い枠にの中にはテキストやURLの埋め込み、動画の埋め込みなどあらゆるブロックを埋め込むことができるため普通にブロックを使うのと同じように囲い枠を使うことが可能です。

まとめ

DIVERの入力補助機能「囲い枠」はブログまたはサイトの目立たせたい部分を枠で囲って表示させる便利な機能です。

使い方によって目を引くような鮮やかな色にしていればブログを訪れた方も見てしまうことでしょう。

アピールしたいものや目立たせたいものに便利に使えます。

囲い枠はどのタイプが良いのかは使う方の好みで自由に選べて6種類の中から自分のブログにあったものをチョイスすればオリジナル性も高くなります。

Twitterでフォローしよう

おすすめの記事