ブロックエディタ(Gutenberg) | ボックス(div)を作ってブロックを入れる方法
囲み枠など「div」タグはよく使いますよね。私も非常によく使うタグです。
「div」タグで囲ったボックスの中には「段落」や画像などを入れます。そこで今回は「div」ボックスを作って中に色々なブロックを入れる方法を紹介します。
今日はdivタグについてなんだね。ボクもどうやるのか気になってたんだぁ。
私も解らなくてHTMLを自分で書いてたけど…ちゃんと簡単にできる方法があったよwだからメモで記事に書くね！
divブロック
ブロックエディタのブロックの一覧をみても「divブロック」はないので、ちょっとわかりづらいかもしれませんが、divボックスを作るためのブロックはちゃんとあります。
「div」は文字を入れたり、位置やスタイルを指定するためによく使われるものです。なので覚えると便利に使えると思います。
divボックスを作る
まずは先にdivボックスを作る方法を紹介します。
1ブロックの追加から［レイアウト要素］をクリックしてその中にある『グループ』ブロックをクリックします。
2クリックするとdivボックスが作成されるので、真ん中の「＋」をクリックして中に入れたいブロックを選択してください。
「段落ブロック」を入れると文字を入れられます、ブロックは複数入れられます。
これでできるんだぁ。すごく簡単だね！
入れるブロックを指定してグループ化
後からグループ化してdivで囲むこともできます。
1divボックスに入れるブロックを選択します。
複数のブロックを選択する場合は、最初のブロックを選択して、「Shift」キーを押しながら最後のブロックを選択してください。
2次に画面左上にあるをクリックして、メニューの中の「グループ化」をクリックしてください。
これで指定したブロックをdivタグで囲うことができます。
ここに文章
グループの設定
作成したdivブロックの設定では文字色と背景色、クラス名の設定ができます。
※クラス名は下にある「高度な設定」に書いてください。
その他のスタイルを設定する場合は「追加CSS」などにCSSを記述すればOKです。
https://kirari-yums.net/post-9185/はぁ～。divで囲う方法があってよかった～。これ出来ないと逐一HTML書かなきゃいけないから困るんだよね。
あははっ。結耶もやり方調べてたんだね。
最後に
divボックスはいろいろなことで使う重要なタグです。
ブロックの一覧の中には「div」というブロックがないので「できないのか？」と思いましたが、「グループ」ブロックというものがそれに当たるものでした。
わかりづらいですよねw
やり方も簡単なのでHTMLの知識がなくてもdivでいろいろなものを囲うことができるので参考にしてください。
2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。
ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。
