THE THOR(ザ・トール)【ブロックエディタ】囲み枠で装飾♪CSS使用

• ブロックディタって囲み枠使えるの？
• ブロックエディタってどうやって囲み枠使うの？

ブロックエディタって機能が沢山あって使いこなすの大変です(￣▽￣;)

クラシックエディタで使えていた「div」タグを使用した「html」での装飾をそのまま使用しようと思っても、「コードをコピペするとこってどこ？」ってなりました(笑)。

私が使用しているバージョン

wordpress　5.8.1
THE THOR　2.3.4

ブロックの背景＆文字の色は指定できる

リストブロックも背景＆文字の色は指定できる

段落のブロックだけではなく、リストのブロックも「色指定」の「文字色」をクリックして指定できます。
一部の文字の場合は「テキストの色」で指定します。

「追加CSSクラス」を使ってｃｓｓで装飾できる

「追加ｃｓｓクラス」には、半角空白で区切れば複数のCSSを設定することが出来ます。

画像は大きさと形状が簡単に装飾できる

画像のについての設定は形と、大きさしかありません。
「高度な設定」に「追加CSSクラス」がありますので、装飾はｃｓｓで設定するしかないようです。
そして画像ブロックというブロックの中に画像があるので、「追加ｃｓｓクラス」にCSS名を入れても画像ブロックへの指定になりました。
画像に枠をつけるのはHTMLで指定してあげるのが楽だなと思いましたので、この記事では方法で紹介します♪
この方法なら、画像ブロック用のCSSなんて考えなくてもよいので(￣▽￣;)

ブロックエディタで画像にCSSで枠をつける

これは、下に紹介しているようなCSSのコードを設定してからの設定になります。
画像をCSSで装飾する前に、画像の形状とサイズを設定を終わらせておいてください。
画像をクリックしてメニューバーを表示させて、右横の点々をクリックして、「HTMLとして編集」をクリックします。

imgの中の「Class＝」を探します。
そして、このクラスの中に、半角スパース+作成したcss名を追加します。
このコードのエリア以外の場所をクリックしてください。
↓の画像の様にエラーが表示されます(￣▽￣;)

右端の点をクリックして「HTMLに変換」をクリックしてください。

このメニューバーの「プレビュー」をクリックすれば画像が表示されます。
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使用 まとめ

この装飾コードについての記事を何個も作成しているので、この記事では詳細説明を省かせていただきました(￣▽￣;)。
記述しているｃｓｓのコードについて、もう少し詳しくしりたい場合は他のｃｓｓの記事たちで確認してみてください。

ランキングサイトに登録しているのでクリックしていただけると嬉しいです(^^♪