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

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

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

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

そら
「クラシック」ブロックなら、HTMLで装飾できたのですが「段落」ブロックだと「htmlとして編集」にしてHTMLのコードを記入してみても、エラーになってダメでした・・・。
この記事では「段落」&「リスト」ブロックでの装飾方法についての紹介を致します(^^♪

使用しているバージョン

wordpress 5.6.2
THE THOR 2.2.2

ブロックの背景&文字の色を指定できる

囲みたい文章を1つのブロックで作成します。
作成した後に、画面右側の「色指定」の中の「背景色」を選択すると、ブロックに背景色がつきます。

ブロック内の文字は、この「色指定」の「文字色」をクリックして指定します。
一部の文字の場合は「テキストの色」で指定します。

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

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

画像に背景色は付けられない

画像のについての設定は形と、大きさしかありません。
「高度な設定」に「追加CSSクラス」がありますので、装飾はcssで設定するしかないようです。

「追加CSSクラス」には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使用 まとめ

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

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

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

アフェリエイトの登録は無料です!

Amazonなどの物販に興味がある方は、アソシエイトの保険として「もしもアフィリエイト」からの申請もお勧めします。

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。 ここもおすすめ♪アフィリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/

在宅でちょこっと収入~♪

クラウドソーシング「ランサーズ」会員募集 (無料)

私は今の所、アンケートだけしています( ̄▽ ̄;)
アンケートに答えて5円とか11円とかから、100文字位の感想を書いて数百円とか。
アフィリエイトより小銭がたまりそうです(笑)

クラウドソーシング「ランサーズ」

最新情報をチェックしよう!
>

そら

プログラマーとして働いていたが結婚後を機に田舎に戻り、独学でHTML・Perlを勉強し自宅でWEBの仕事をはじめるも、アレルギー児の子育てで断念。 子供の手が離れたのを機にWorldpressの勉強をしながらブログをはじめました。

 そらのまなびぶろぐ について 


そらのまなびぶろぐでは、wordpressの有料テーマ【THE THOR(ザ・トール)】を使用して収益化ブログの作り方を初心者向けに紹介しています。 エディタの使い方、アドセンス申請に必要なページの書き方&作り方、ブログの装飾の方法までを紹介しています。