【Diver入力補助】囲い枠でリストデザインをより見やすくする方法
スポンサーリンク

Diverの入力補助、リストデザインだけだとオリジナル性が出ない

他の入力補助との組み合わせ方が分からない

今回は、そんな方に向けたDiver入力補助の囲い枠リストデザインを組み合わせ方を紹介します。
リストデザインだけで見やすくなりますが、囲い枠を組み合わせると、3分程度でより見やすく、キレイな表現が可能。

ピロリン
それでは早速説明していきます。

囲い枠とは

囲い枠とはその名の通り、対象のものを枠で囲って目立たせる時に使うもの。
Diverには、Webデザインの知識が無くてもクリック一つでキレイな囲い枠を挿入する機能があります。

使い方は次の通り。

WordPressの投稿画面から入力補助をクリック

Diver入力補助の囲い枠をクリック

後は、こちら⇓の①〜⑦の操作を行うだけ。

基本的にはクリックして選択していくだけでOKです。

  1. タイトルを入力する
  2. アイコンを選択して挿入する場所(タイトル内→タイトルの前、コンテンツ内→枠内の一番上)を選択
  3. 枠内のテキストを入力する
  4. 7種類からデザインを選択する
  5. 色を選択する
  6. 枠内に罫線、枠に影を付けたい場合はチェックする
  7. 囲い枠を挿入するをクリック

挿入するとこんな感じ⇓のフレームが出来上がります。

タイトル

テキストテキストテキスト
※このブログでは本文との差別化のために枠線の太さを細く枠内の文字をグレーに設定しています。

リストデザインとは

リストデザインとは、チェックリストなどのように複数の項目を羅列して分かりやすく表現する時に使うもの。こちらも同じくDiverには、クリック一つでキレイなリストを挿入する機能があります。

こちら⇓の記事で詳しく説明しています。参考にして下さい。

囲い枠とリストデザインの組み合わせ方

Diver入力補助の囲い枠リストデザインを組み合わせることで、こんな感じ⇓でリストをより目立たせることができます。

タイトル

  • テキスト1
  • テキスト2
  • テキスト3

実際に、単純なリストデザインと比較すると、

  • テキスト1
  • テキスト2
  • テキスト3

より目立っていることが分かります。

ピロン
それでは設定方法を説明していきます

① 入力補助をクリック

② 囲い枠を挿入

基本的にはこちらで説明した囲い枠の使い方と同様ですが、「③枠内のテキスト入力」は不要

  1. タイトルを入力する
  2. アイコンを選択して挿入する場所(タイトル内→タイトルの前、コンテンツ内→枠内の一番上)を選択
  3. 枠内のテキストを入力する
  4. 7種類からデザインを選択する
  5. 色を選択する
  6. 枠内に罫線、枠に影を付けたい場合はチェックする
  7. 囲い枠を挿入するをクリック

③ 囲い枠の枠内を選択しリストデザインを挿入

WordPressのビジュアルエディター上で、②で挿入した枠内にカーソルを合わせた状態で、

リストデザインをクリックし、リストデザインの設定を行ってください。

 

リストデザイン作成方法がわからない方は、こちら⇓の記事をご覧ください。

完成したものがこちら⇓(フレームを囲い枠、中身の項目をリストデザインで作成しています)

囲い枠で作成

  • リストデザインで作成1
  • リストデザインで作成2
  • リストデザインで作成3

まとめ:囲い枠でリストデザインをより見やすくする方法

この記事のポイント

  • Diver入力補助の組み合わせにより、簡単にキレイなオリジナルデザインが作成できる

(⇑こちらのビジュアルも囲い枠とリストデザインの組み合わせで作成しています。)

Diverの入力補助はそれぞれかなり完成されたもので、それを挿入するだけでもかなりキレイなデザインにすることが可能。ただ、人気の有料テーマであれば、使用している人も結構多いです。Diverを使い始めてから色んなサイトを回覧してみると、

ピロン
このサイトDiverのデフォルトデザイン使ってるやん!

ってこともしばしばあります。

あまり気にならない人もいるでしょうが、やはりそこは自分のサイト、何とかオリジナル性を出したい!けどWebデザインの知識がない!
そういう方は、一度現在ご利用テーマの機能の組み合わせで人とはちょっと変わったデザインはできないか?ということを考えてみるといいでしょう。

ピロン
Diverであれば20個以上の入力補助とそれらのデザイン選択でオリジナルのデザインが簡単に作成可能!超オススメです!
スポンサーリンク
おすすめの記事