DIVER(ダイバー)の入力補助「囲み枠」の使い方やデザインと使用感のまとめ

ワードプレスのテーマDIVER(ダイバー)では、ブログやサイトの記事の装飾で入力補助を使って「囲み枠」を簡単に挿入することができます。

囲み枠のデザインや色もカスタマイズできるので他サイトともデザインが被りにくいです。

しかし、選択肢が多いので、挿入する時、デザインの選定に迷うのが悩みの種でもあります。

クルミ
DIVER(ダイバー)の「囲み枠」を色々いじってみました。

記事に「囲み枠」(囲い枠)が必要なわけ

「囲み枠」(囲い枠)とは、ブログの装飾の1つです。

文章のまとめや重要なポイントに「囲み枠」(囲い枠)を用いると、読者も文章を読み進めやすく、情報が伝わりやすい効果があります。

「囲み枠」(囲い枠)は記事作成でかなり使う装飾なので見栄えの良いデザインは重要。

DIVER(ダイバー)では、「囲み枠」(囲い枠)のデザインが豊富なので思い通りの囲み枠をデザインしやすいです。

DIVER(ダイバー)の入力補助の「囲い枠」の挿入方法(クラシックエディタバージョン)

DIVERの(ダイバー)の入力補助の囲い枠の位置
DIVER(ダイバー)の入力補助画面の「囲い枠」

「囲い枠」選択後

DIVER(ダイバー)の入力補助の囲い枠の入力箇所
「囲い枠」の入力画面

DIVER(ダイバー)の入力補助では「囲い枠」を選択すると、DIVER(ダイバー)デザインの囲い枠をボタン一つで挿入することができます。

プラグインやコードをいじる必要がありません。

ワードプレス初心者には非常にありがたい機能です。

入力補助の「囲い枠」ではタイトルとテキストを挿入するだけで簡単に「囲い枠」を作ることができます。

入力補助の「囲い枠」デザイン一覧(クラシックエディタ)

DIVER(ダイバー)の入力補助の囲い枠のスタイル(デザイン)選択画面
DIVER(ダイバー)の囲い枠のスタイル選択
DIVER(ダイバー)のクラシックエディタの囲い枠のデザイン一覧
囲い枠の「スタイル」

DIVER(ダイバー)の「囲い枠」のデザインは5種類用意されています。

オーソドックスですが、シンプルで整っているデザインです。

「囲い枠」はクラシックエディタとブロックエディタ(グーテンベルク)ではデザインや使える機能が違うので注意してください。

入力補助の囲い枠は後から変更不可なので手間がかかる

DIVER(ダイバー)の囲い枠はデザインや色を決めて挿入してしまうと後から変更ができません。

変更する場合、一から作り直す必要があり、手間と時間がかかります。

ちょっとの手間ですが、これが不便なので改善されないかな?っと思います。

入力補助の囲い枠の色一覧(クラシックエディタ)

DIVER(ダイバー)の囲い枠の色の選択肢
入力補助の囲い枠で選べるカラーの種類

囲い枠はデフォルトの色が8種類用意されています。

カスタムでは背景、文字色、枠線の色が自由に選べるので実質、色の選択肢は無限です。

DIVER(ダイバー)の囲い枠はアイコン挿入で装飾感アップ

DIVER(ダイバー)の入力補助のアイコン挿入画面
囲い枠のアイコンの挿入画面
DIVER(ダイバー)入力補助の囲い枠でアイコン挿入例
囲い枠のアイコンの挿入場所

DIVER(ダイバー)の「囲い枠」は「囲い枠」にアイコンを挿入することができます。

囲い枠でアイコンが挿入できる箇所はタイトルコンテンツ内です。

それ以外の場所にアイコンを挿入する場合は、入力補助の「アイコン」から挿入できます。

アイコン以外にもリストなどの入力補助を挿入することができ、DIVER(ダイバー)はこういったデザインに融通が効く事が多いです。

アイコンがあるとちょっとおしゃれに見えるような気がします。

DIVER(ダイバー)は「囲い枠」のどこでもアイコンが挿入できる。

DIVERの「囲み枠」

「囲み枠」を使う事で、重要な部分を読者に分かりやすく伝えることができます。

アイコン挿入は難点もある

Diverにインストールされているボタンアイコン
DIVER(ダイバー)の入力補助「アイコン」

DIVER(ダイバー)のアイコンが使いにくい点

  • 種類が多い
  • 特殊なアイコンが多い
  • アルファベット検索にしか対応していない

DIVER(ダイバー)はアイコンが非常に使いにくいです。

アイコンが約800種類っと豊富なのですが、なにせ目的のアイコンが探しにくいです。

特殊なアイコンも多く、よく言えば珍しい。

悪く言えば、使いどころが難しいアイコンが結構あります。

一応、アイコンに検索ボックスがついていますが、アルファベットで検索する必要があります。

アイコンがどんな単語で登録されているのか、何で検索すれば良いのかわからないためアイコンを探すのに苦労します。

なので私は目視で探すことが多いです。

これが結構時間がかかる!!

探すのが面倒で、同じアイコンを使うか、アイコンを使わない人は多いと思います。(私もその1人・・・。)

クルミ
なかなか使いたいアイコンが見つからない!!

囲い枠のオプション【背景色】

ダイバーの囲い枠のオプションの背景色をチェック
DIVER(ダイバー)のオプションで背景選択

背景オプションを選択

ダイバーの囲い枠の背景色のデザイン例
DIVER(ダイバー)の入力補助「囲い枠」の背景のオプションの表示例

DIVER(ダイバー)の「囲い枠」は、オプションが充実しています。

「囲い枠」のオプションでは背景色にチェックするとデフォルトのカラーを選択した場合、囲い枠の背景に選択したカラーの色が薄くつきます。

カスタムで細かい色を変更できるので好みのカラーを探すと自分オリジナルの囲い枠ができあがります。

囲い枠のオプション【背景色+枠線】

ダイバーの囲い枠のオプションの背景と枠線を選択
DIVER(ダイバー)の入力補助「囲い枠」の背景、枠線のオプションをチェックした画面

背景・枠線オプションを選択

ダイバーの囲い枠のオプションを背景色と枠線にチェックを入れた囲い枠のデザイン例
DIVER(ダイバー)の入力補助「囲い枠」の背景、枠線のオプションの表示例

「囲い枠」のオプションで背景色枠線にチェックを入れるとこのようなデザインになります。

こっちの方が囲い枠のフレーム感が強く強調されるような気がします。

囲い枠のオプション【背景色+影+枠線】

ダイバーの入力補助の囲い枠で背景色、枠線、影を選択
DIVER(ダイバー)の入力補助「囲い枠」の背景、影、枠線のオプションをチェックした画面

背景色・影・枠線オプションを選択

ダイバーの入力補助の囲い枠で背景色、枠線の表示例
DIVER(ダイバー)の入力補助「囲い枠」の影オプション比較

囲い枠のオプション【背景色+影+枠線】にチェックをいれるとこのようなデザインができます。

影があった方が私は好きです。

囲い枠のオプション【背景色+影+枠線+罫線】

ダイバーの入力補助の囲い枠で背景色、枠線、影、罫線を選択
DIVER(ダイバー)の入力補助「囲い枠」の背景、影、枠線、罫線のオプションをチェックした画面

背景・影・枠線・罫線オプションを選択

ダイバーの入力補助の囲い枠で背景色、枠線、影、罫線を選択した表示例
DIVER(ダイバー)の入力補助「囲い枠」の背景、影、枠線、罫線のオプションの表示例

DIVER(ダイバー)の「囲い枠」の全てのオプション【背景色+影+枠線+罫線】すべてにチェックを入れるとこのようなデザインになりました。

作ってみたものの、デザインがちょっと崩れてるような気がするのは私だけでしょうか?

DIVER(ダイバー)の「囲い枠」で罫線は行がズレたり、このようにデザインが崩れがちです。

とくに改行なんかはしない方が良いです。

クルミ
環境設定とかの関係かな?
罫線を挿入するときの注意点

DIVER(ダイバー)の「囲み枠」で罫線を挿入する時は、デザインが崩れがちなのでプレビューで要確認

DIVER(ダイバー)の入力補助の囲い枠の挿入の仕方(ブロックエディタ)

ブロックエディタの入力補助の囲い枠を選択

ブロックエディタ(グーテンベルク)では左上の+ボタンから一番下に入力補助の欄があり、「囲い枠」を挿入することができます。

入力補助の囲い枠(ブロックエディタ)デザイン一覧

ブロックエディタ(グーテンベルク)で表示できるダイバーの囲い枠デザイン一覧
ブロックエディタで使える囲み枠デザイン

ブロックエディタ(グーテンベルク)では6種類の「囲い枠」デザインを使う事ができます。

背景やテキストなどクラシックエディタよりカスタマイズできる項目は少ないです。

色も変更できますが、背景色を変更するとデザインが崩れるのでやめたほうが良いです。

ブロックエディタは決まったデザインを素早く使いたい場合に、手っ取り早く挿入する事ができます。

DIVER(ダイバー)の入力補助の囲い枠のデザインをエディタで比較

クラシックエディタブロックエディタ
デザイン5種類6種類
色のカスタマイズ
アイコン挿入×
背景色×
×
枠線
罫線×
DIVER(ダイバー)の囲い枠をエディタで比較

DIVER(ダイバー)の「囲い枠」を挿入するエディタの違いを比較してみました。

ブロックエディタの方がデザインは多いですが、多いと言ってもフレームだけの特に使いたくなるようなデザインでもありません。

また、ブロックエディタで囲い枠を作るとその他のオプションが全く設定できません。

なのでおしゃれでカスタマイズ性を求めるなら断然クラシックエディタで囲い枠を作った方が良いです。

DIVER(ダイバー)の入力補助の「囲い枠」はスタマイズ性は抜群

DIVER(ダイバー)の「囲い枠」はオプションの組み合わせで何通りもの囲い枠のデザインを作ることができます。

デザインがシンプルなのでどんなサイトにもマッチさせやすいです。

特にアイコン挿入はあまり見られない装飾なので、パッと目を引き他のブログと差別化が期待できます。

正直、設定できる項目が多すぎて、私は囲い枠のデザインを設定をあまり使いこなせていませんでした。

設定してみるとこんなデザインもできてたんだーっと関心しきりです。

クルミ
デザインが豊富なだけに使いこなすのに苦労しています。

DIVER(ダイバー)の入力補助の「囲い枠」の使用感のまとめ

最新SEO対策済み!wordpressテーマ「Diver」

DIVERの「囲み枠」のまとめ
  1. ブロックエディタよりクラシックエディタの方がカスタマイズ性が高い
  2. 一度挿入するとデザインの変更は不可
  3. アイコン挿入でアピール要素がアップ
  4. アイコンが探しにくいので使わないことが多い
  5. オプション設定でデザインの幅が広がる
  6. 罫線は場合によってはデザインが崩れるので注意
  7. カスタマイズ性が高いので使いこなすのに苦労する

私が感じたDIVER(ダイバー)の使用感はこんな感じでした。

改めてDIVER(ダイバー)っというテーマを研究してみると自分がどれほど使いこなせていなかったのか思い知らされました。

今まで時間が惜しくてあまり囲い枠に力を入れてなかったのですが、使ってみると良いデザインが豊富で、使いたくなってきました。

これからは、せっかく備わっている機能なので多少時間がかかろうが見栄えの良い囲い枠を使って記事の装飾に役立てていきたいと思います。

クルミ
あるのに使わない方がもったいなかったです。

ハイスペックテーマ「Diver(ダイバー)」は安く買える!?

サーバー契約をするとワードプレスの有料テーマ「Diver」がお得に買えます。

ロリポップ×Diver




お名前.com×Diver

さらに独自ドメインと同時申込みで、ドメインの初年度登録料が実質0円でお得。




エックスサーバー×お友達紹介



友達紹介プログラムでエックスサーバーを契約すると12か月契約で5,000OFF

契約期間に応じて最大1万円OFF

下記のボタンからエックスサーバーを契約するとお友達紹介プログラムが適用され、契約料金が割引きされます。

エックスサーバーのキャンペーン(不定期)と併用するとさらにお得です。

テーマを安く購入するよりもサーバー契約でお得にDIVERを始められます。

スポンサーリンク
このblogはワードプレスのテーマ「DIVER(ダイバー)」を使っています。
DIVERのテーマイメージ

WordPress(ワードプレス)のテーマで最初に手にしたのは「DIVER(ダイバー)」でした。

DIVER(ダイバー)を一言でいうと、カッコいい!!最初は見た目で選びましたが、洗練されたデザインに、多彩でハイスペックな機能は何年使っても飽きません。 コンテンツが増えるほどカスタマイズ性がアップし、サイトの構築が楽しくなる、そんなテーマです。常にバージョンアップを欠かさない向上心のあるテーマと共にサイトを長く大切に育てられます。 長年愛用できるハイスペックで高機能なテーマ「DIVER(ダイバー)」は、一度使うともう手放せません。

代表コンテンツ
おすすめの記事
スポンサーリンク