スポンサーリンク

ブロックエディタ(Gutenberg) | ボックス(div)を作ってブロックを入れる方法

WordPress

囲み枠など「div」タグはよく使いますよね。私も非常によく使うタグです。

「div」タグで囲ったボックスの中には「段落」や画像などを入れます。そこで今回は「div」ボックスを作って中に色々なブロックを入れる方法を紹介します。

きらり
きらり

今日はdivタグについてなんだね。ボクもどうやるのか気になってたんだぁ。

結耶
結耶

私も解らなくてHTMLを自分で書いてたけど…ちゃんと簡単にできる方法があったよwだからメモで記事に書くね!

スポンサーリンク

divブロック

ブロックエディタのブロックの一覧をみても「divブロック」はないので、ちょっとわかりづらいかもしれませんが、divボックスを作るためのブロックはちゃんとあります。

「div」は文字を入れたり、位置やスタイルを指定するためによく使われるものです。なので覚えると便利に使えると思います。

divボックスを作る

まずは先にdivボックスを作る方法を紹介します。

1ブロックの追加から[レイアウト要素]をクリックしてその中にある『グループ』ブロックをクリックします。

2クリックするとdivボックスが作成されるので、真ん中の「+」をクリックして中に入れたいブロックを選択してください。

結耶
結耶

「段落ブロック」を入れると文字を入れられます、ブロックは複数入れられます。

きらり
きらり

これでできるんだぁ。すごく簡単だね!

スポンサーリンク

入れるブロックを指定してグループ化

後からグループ化してdivで囲むこともできます。

1divボックスに入れるブロックを選択します。

複数ブロックを選択

複数のブロックを選択する場合は、最初のブロックを選択して、「Shift」キーを押しながら最後のブロックを選択してください。

2次に画面左上にあるをクリックして、メニューの中の「グループ化」をクリックしてください。

きらり
きらり

これで指定したブロックをdivタグで囲うことができます。

結耶
結耶

ここに文章

グループの設定

作成したdivブロックの設定では文字色と背景色、クラス名の設定ができます。

※クラス名は下にある「高度な設定」に書いてください。

その他のスタイルを設定する場合は「追加CSS」などにCSSを記述すればOKです。

結耶
結耶

はぁ~。divで囲う方法があってよかった~。これ出来ないと逐一HTML書かなきゃいけないから困るんだよね。

きらり
きらり

あははっ。結耶もやり方調べてたんだね。

最後に

divボックスはいろいろなことで使う重要なタグです。

ブロックの一覧の中には「div」というブロックがないので「できないのか?」と思いましたが、「グループ」ブロックというものがそれに当たるものでした。

結耶
結耶

わかりづらいですよねw

やり方も簡単なのでHTMLの知識がなくてもdivでいろいろなものを囲うことができるので参考にしてください。

スポンサーリンク

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。