- ブロックディタって囲み枠使えるの？
- ブロックエディタってどうやって囲み枠使うの？
ブロックエディタって機能が沢山あって使いこなすの大変です(￣▽￣;)
クラシックエディタで使えていた「div」タグを使用した「html」での装飾をそのまま使用しようと思っても、「コードをコピペするとこってどこ？」ってなりました(笑)。
使用しているバージョン
wordpress 5.6.2
THE THOR 2.2.2
ブロックの背景＆文字の色を指定できる
囲みたい文章を１つのブロックで作成します。
作成した後に、画面右側の「色指定」の中の「背景色」を選択すると、ブロックに背景色がつきます。
ブロック内の文字は、この「色指定」の「文字色」をクリックして指定します。
一部の文字の場合は「テキストの色」で指定します。
リストブロックも背景＆文字の色は指定できる
段落のブロックだけではなく、リストのブロックも「色指定」の「文字色」をクリックして指定できます。
一部の文字の場合は「テキストの色」で指定します。
画像に背景色は付けられない
画像のについての設定は形と、大きさしかありません。
「高度な設定」に「追加CSSクラス」がありますので、装飾はｃｓｓで設定するしかないようです。
「追加CSSクラス」にはｃｓｓを複数設定できる
「追加ｃｓｓクラス」には、半角空白で区切れば複数のCSSを設定することが出来ます。
ブロックエディタで使用する囲み枠のCSSコピペ文
「#文字」は枠線色です。
自分の好きな色のコードに変えてください。
≫【wordpress】文章の囲み枠で必要になる色のコードまとめ♪
border:数字px
枠線の太さです。
自分の好きな太さの数字に変えてください。
padding: 20px;
枠と中の文字との隙間の大きさを指定しています。
ピンクの破線の囲み枠。
.pink_hasen_waku{
padding: 20px;
border:8px dashed #fca2a2;
}
ピンクの点線の囲み枠
.pink_maruten_waku{
padding: 20px;
border:4px dotted #fca2a2;
}
ピンクの実線の囲み枠
.pink_sen_waku{
padding: 20px;
border:8px sorid #fca2a2;
}
ピンクの二重線の囲み枠
.pink_nijuu_waku{
padding: 20px;
border:8px double #fca2a2;
}
四つ角に丸みを出す
.waku_kado{
border-radius: 10px;
}
数字を大きくすると、丸みが大きくなります。
中の文字に影を付ける
.moji_kage{
text-shadow:3px 3px 2px #fca2a2;
}
「追加CSSクラス」の複数指定の使用例
「ピンクの二重線の囲み枠」と「四つ角に丸みを出す」の場合は下のように記述します。
pink_nijuu_waku waku_kado
THE THOR(ザ・トール)【ブロックエディタ】囲み枠で装飾♪CSS使用 まとめ
この装飾コードについての記事を何個も作成しているので、この記事では詳細説明を省かせていただきました(￣▽￣;)。
記述しているｃｓｓのコードについて、もう少し詳しくしりたい場合は他のｃｓｓの記事たちで確認してみてください。
アフェリエイトの登録は無料です！
Amazonなどの物販に興味がある方は、アソシエイトの保険として「もしもアフェリエイト」からの申請もお勧めします。
A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。ここもおすすめ♪アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/
