女性起業家のためのWEB活用講座

女性起業家のために、解りやすくWEBマーケティングを教える
日本一解りやすいWEBマーケティング講座

女性起業家のためのWEB活用講座
無料メール講座

【WordPress】記事を装飾する罫線いろいろ(文字を囲む、下地を入れる)


【WordPress】記事を装飾する罫線いろいろ(文字を囲む、下地を入れる)

 

 

こちらに記述したコードは、シンプルテキストなどにいったんコピーして、「デフォルト」処理をしてから使ってくださいませm(_ _)m

 

 

 

実線の場合いろいろ

 

赤系の実線 太さ2ポイント

見本

【コード】

<div style=”padding: 20px; border: solid 2px #ff6347; border-radius: 10px; background-color: #fffaf0; margin-top: 30px; margin-bottom: 30px;”>見本</div>

 

赤系の実線 太さ2ポイント

見本

【コード】

<div style=”padding: 20px; border: solid 2px #ff6347; border-radius: 10px; background-color: #ffffea; margin-top: 30px; margin-bottom: 30px;”>見本</div>

 

青系の実線 太さ2ポイント

見本

【コード】

<div style=”padding: 20px; border: solid 2px #191970; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;”>見本</div>

 

 

緑系の実線 太さ2ポイント

見本

【コード】

<div style=”padding: 20px; border: solid 2px #00cc33; border-radius: 10px; background-color: #d1ffd1; margin-top: 30px; margin-bottom: 30px;”>見本</div>

 

 

 

いちいちコードを記述するのが面倒な場合は、コチラのプラグインがオススメです。

Add【AddQuicktagの使い方】WordPressの投稿を時短してくれるプラグインだと思ってます!!

 

 

点線の場合いろいろ

▶点線(細)

見本

【コード】

<div style=”padding: 20px; border: dotted 2px #ff6347; border-radius: 10px; background-color: #fffaf0; margin-top: 30px; margin-bottom: 30px;”>見本</div>

 

 

▶点線(大)

見本

【コード】

<div style=”padding: 20px; border: dashed 2px #ff6347; border-radius: 10px; background-color: #fffaf0; margin-top: 30px; margin-bottom: 30px;”>見本</div>

 

 

二重線の場合

▶二重線

二重線

【コード】

<div style=”padding: 20px; border: double 5px #ff6347; border-radius: 10px; background-color: #fffaf0; margin-top: 30px; margin-bottom: 30px;”>見本</div>

 

 

掘り込む

▶掘り込み線

見本

【コード】

<div style=”padding: 20px; border:groove 3px #00cc33; border-radius: 10px; background-color: #d1ffd1; margin-top: 30px; margin-bottom: 30px;”>見本</div>

 

 

 

 

最後まで読んでいただき、ありがとうございます(^^)

このあともニッコリはっぴーなひとときを♪

ニッコリWEBプランナー 白井佐代子

1日1ポチ、応援していただけると励みになります(^^)

↓ ↓ ↓

にほんブログ村 経営ブログ 女性社長へ
にほんブログ村



メルマガ登録はこちらをクリック

メルマガ登録はこちらをクリック
 

この記事を読んだ方はこちらの記事もチェックしています!

 

無料メール講座の詳しい内容はこちら
講座情報
申込み締切まで
  • 申込期限設定

    あと1 ヶ月
  • オンライン(zoom)だから全国どこからでも、お好きな場所から、お好きな時間にご受講いただけます! ※対面をご希望の場合は、LINE@にご登録いただき、「対面希望」の旨をご連絡ください。ご相談に応じます。   1...

    イベント内容はこちら
    新着ブログ
    コンテンツ一覧

    講座情報

    申込み締切まで

  • 申込期限設定

    あと1 ヶ月
  • オンライン(zoom)だから全国どこからでも、お好きな場所から、お好きな時間にご受講いただけます! ※対面をご希望の場合は、LINE@にご登録いただき、「対面希望」の旨をご連絡ください。ご相談に応じます。   1...

    イベント内容はこちら
    女性起業家のためのWEB活用講座
    Copyright(C) 女性起業家のためのWEB活用講座 all rights reserved.
    Copyright(C) 女性起業家のためのWEB活用講座 all rights reserved.