Diverの入力補助機能「グリッドレイアウト」の使い方|初心者向けマニュアル
Diverの入力補助機能「グリッドレイアウト」の使い方|初心者向けマニュアル
Diverには、記事作成を助ける「入力補助」機能があります。

今回は、この入力補助機能の内の一つ「グリッドレイアウト」の使い方を解説したいと思います。

グリッドレイアウトの使い方

記事作成画面でエディター上部にある『入力補助』ボタンをクリックします。

エディター上部にある『入力補助』ボタンをクリック

エディター上部にある『入力補助』ボタンをクリック

入力補助の一覧メニューが開きます。
選択肢の中の『グリッドレイアウト』をクリックしましょう。

『グリッドレイアウト』をクリック

『グリッドレイアウト』をクリック

グリッドレイアウトの設定ウィンドウが表示されます。

レイアウト

「レイアウトを選択してください」の項目では、10個のレイアウトから選べるようになっています。
好きなレイアウトのラジオボタンを選択しましょう。

グリッドレイアウト一覧

グリッドレイアウト一覧

レイアウトオプション

「レイアウトオプション」で、下記2項目を設定します。

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

それぞれどんな機能なのか解説します。

グリッドレイアウトの解除設定

画面サイズが小さい時に、グリッドレイアウトを解除する』にチェックを入れると、スマホなどの小さい画面で見たときにグリッドレイアウトが解除されます。

チェックを入れると、スマホ画面では下記のように表示されます。

レイアウトオプション

グリッドレイアウトが解除され、コンテンツが縦に並んでいます。

チェックを外すと、下記のようになります。

レイアウトオプション

画面が小さくても、グリッドレイアウトが維持されています。

余白

余白を0にする』にチェックを入れると、グリッド間の余白がなくなります。

レイアウトオプション

チェックを外すと、下記のように表示されます。

レイアウトオプション

グリッド間に隙間ができて、余裕のある見た目になっています。

レイアウトを挿入

レイアウトの選択とレイアウトオプションを設定したら、設定ウィンドウ右下にある『レイアウトを挿入する』ボタンをクリックしましょう。

『レイアウトを挿入する』ボタンをクリック

『レイアウトを挿入する』ボタンをクリック

レイアウトを挿入すると、

テキストエディタの場合、下記のようなコードが出力されるので、表示したい項目を中に記述します。

ビジュアルエディタの場合、下記のようなグリッドの線が表示されます。

ビジュアルエディタ でのグリッドレイアウト編集画面

ビジュアルエディタ でのグリッドレイアウト編集画面

グリッドの枠内をクリックすると文字が入力できる状態になるので、テキストや画像を入力しましょう。

グリッドレイアウトの使い方は以上です。

まとめ

今回は、Diverの入力補助機能「グリッドレイアウト」の使い方を解説しました。

HTMLやCSSが分からなくても、簡単に記事の内容をカラム分けすることができるので、気になった方は使ってみてください。

スポンサーリンク

スポンサーリンク

アンケート実施中

テーマニアの内容をさらに充実させるため
アンケートを実施中です。

ご協力お願いいたします。

おすすめの記事