「カラム」挿入でDIVER(ダイバー)の入力補助をワードプレスと比較して検証

ワードプレスのテーマDIVER(ダイバー)には入力補助で「カラム(グリッドレイアウト)」を使ってカラムを簡単に挿入できます。

でも、ワードプレスにもカラム表示があるのでどちらの方が使い勝手が良いのか検証しました。

クルミ
カラムを使うとコンテンツの質が高くなるような気がします。

投稿内のカラム挿入の利点

カラムの使いどころ
  • コンテンツを分割表示できる
  • 1つの画面に情報を多く表示できる
  • 比較がしやすい
  • 画面が見やすくなる

私はこのような理由でカラムを使う事が多いです。

カラム表示を使うとダラダラと長くなってしまうコンテンツをギュッとまとめて表示できるのが最大の利点だと思います。

カラム挿入はDIVER(ダイバー)にもデフォルトのワードプレスにもあるため機能がかぶります。

そこでDIVER(ダイバー)の「カラム」挿入ワードプレスのカラム挿入を使ってみて、どちらが使いやすいか検証してみました。

クルミ
まずは、DIVER(ダイバー)の入力補助のカラム挿入です。

DIVER(ダイバー)の入力補助「カラム」挿入手順

DIVERの入力補助でカラムの表示位置(グリッドレイアウト)

入力補助の「カラム」を選択後

「カラム」を挿入

DIVER(ダイバー)の入力補助カラムの挿入画面
DIVERのカラムの挿入画面

DIVER(ダイバー)では、入力補助から「カラム」選択後、カラムのレイアウトを選ぶだけなので挿入が簡単です。

DIVERで作れるカラム10種類

ダイバーで使えるカラムのレイアウト一覧
DIVER(ダイバー)で使えるカラムレイアウト

DIVER(ダイバー)の入力補助の「カラム」では予め用意されたカラムのテンプレートが10種類あります。

視覚的にカラムが表示されるのでカラム全体のイメージが掴みやすいです。

DIVER(ダイバー)のカラムの挿入の仕方

ビジュアルエディタDIVERのビジュアルエディタでのカラムの挿入

コードエディタ

DIVER(ダイバー)のカラムでは、カラムを挿入後、コンテンツを挿入します。

カラム挿入はビジュアルエディタとコードエディタの両方から挿入できますが、ビジュアルエディタでは思うところにコンテンツ挿入ができなかったりするので、そういった場合はコードエディタで挿入してみてください。

カラムのレイアウトオプション

カラムのオプション
  • 画面サイズが小さい時に、グリッドレイアウトを解除する
  • 余白を0にする

カラムのレイアウトのオプションはコンテンツに合わせてチョイスしてみてください。

画面サイズが小さい時に、グリッドレイアウトを解除する

カラムのレイアウトでは「画面サイズが小さい時に、グリッドレイアウトを解除する」にチェックしておくと、画面のサイズ次第で、カラムを表示させずに縦積みにすることができます。

スマホ表示なんかではカラムを表示するとコンテンツが窮屈になる場合にチェックしておくとレイアウトが崩れずに表示できるので便利です。

余白を0にする

DIVER(ダイバー)のアイコン1ページ目の詳細

DIVER(ダイバー)のアイコン2ページ目の詳細

「余白を0にする」にチェックをしておくとカラムの余白がなくなります。

幅の微調整や、見た目次第でチェックしておくと思った通りのカラム表示が作りやすいです。

こんな画像は余白があった方が見やすいです・・・。

クルミ
次は、ワードプレスのカラム挿入です。

ワードプレスのカラムの挿入手順

ブロックエディタのカラム挿入

入力補助の「カラム」を選択後

カラムのパターン表示

グーテンベルグのカラムのレイアウト

ワードプレスのカラム(ブロックエディタ)にも予めカラムのレイアウトが決まったものが用意されています。

しかし、一応用意されているだけで後からカスタマイズ可能なので深く考える必要はありません。

DIVER(ダイバー)のカラムとは違い、幅やカラムの数など色々といじれる要素が豊富なので直感でカラムを作ることができます。

カラムの数の増減

ワードプレスのカラム挿入ではカラムの数の増減スマホなどの小さい画面(モバイル)ではカラムを縦にする設定ができます。

後からカラムが増減できるのは思ったより便利です。

コンテント幅を使用するインナーブロック

コンテント幅を使用するインナーブロックでは、1つのカラムの内のコンテンツを全幅や幅広で表示させたり、カラム内でのコンテンツの位置や大きさを調節できます。

カラムのコンテント幅を使用した画像例

コンテント幅調節前のカラム表示

DIVER(ダイバー)のアイコン15ページ目の詳細
DIVER(ダイバー)で使えるアイコン15ページ目

コンテント幅調節後のカラム表示

DIVER(ダイバー)のアイコン15ページ目の詳細
DIVER(ダイバー)で使えるアイコン15ページ目

例えば、このような画像をカラム表示するとき、アイコンの画像サイズが少し大きいので、カスタマイズしてみました。

画像が大きい場合は限界がありますが、画像の大きさを揃えたい時や小さい画像をカラム表示させるときに便利です。

カラムのサイズと位置調整

カラムのサイズ調整では1つのカラムの余白(パディング)を増やしたり、カラムに枠線を入れることができます。

画像の位置がカラム内で調節できるので、大きさが揃っていない画像などの配置を調節して表示することができます。

カラムの画像をあえてズラしてギャラリーに

例えば、こういったギャラリーなんかも作れそうです。

普通なら上揃えで表示されるような画像もカラムで調節すればちょっとおしゃれかもしれません。

カラムの幅の指定

ワードプレスのカラムの幅の指定

ワードプレスのカラムでは1カラムのごとにpx%単位でカラムの幅を指定することができます。

カラムの幅指定後

DIVER(ダイバー)で使えるアイコン1ページ目
DIVER(ダイバー)で使えるアイコン2ページ目
DIVER(ダイバー)で使えるアイコン3ページ目

カラムのサイズ指定が細かくできるので便利です。

ワードプレスとDIVER(ダイバー)のカラムを比較

カラムの比較項目ワードプレスDIVER
カラムの増減
カスタマイズ性
スマホ表示対応
余白の調整
入力補助挿入

カラム挿入はぶっちゃけ、DIVER(ダイバー)よりワードプレスのブロックエディタの方が何かとカスタマイズしやすいです。

ワードプレスのカラムは万能で、カラムだけどギャラリーのように使う事もできたりします。

DIVER(ダイバー)でもできないことはないですが、ちょっと使いにくい印象です。

ただ、DIVERの入力補助をカラムで使う場合、ワードプレスのブロックエディタにクラシックエディタであるDIVERの入力補は挿入できない仕様になっています。

カラムを挿入する時はDIVERの機能をカラムに使うか否かで使い分けた方が効率よく、見た目も理想通りのカラム表示が作れそうです。

クルミ
ワードプレスのカラムが使いやすすぎました。

DIVER(ダイバー)の入力補助「カラム」のまとめ

DIVER(ダイバー)のカラムのまとめ
  • レイアウトが決まっているからカラムを簡単挿入できる
  • スマホ表示対策可能
  • DIVERの入力補助を組み合わせられる
  • ワードプレスのカラム挿入の方が使い勝手は良い

DIVER(ダイバー)のカラム挿入はワードプレスのカラム挿入に何かと機能が劣ります。

なので、DIVER(ダイバー)のカラム挿入は、DIVERの入力補助を組み合わせて表示する場合に限り、使用することをおすすめします。

カラムは1つの画面に表示できる情報が多くなるのでスクロールする手間も省けます。

DIVER(ダイバー)やワードプレスのカラムを駆使して、ブログに訪れた人の利便性を追求しながらカラム挿入を使ってみてください。


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

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

ロリポップ×Diver




お名前.com×Diver

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




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



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

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

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

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

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

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

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

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

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