文章を枠で囲む方法★記事下メニューや強調部分にコピペでOK!

※最新版エディタで使ってください。

ブラウザが Firefox・Edge・IE(インターネットエクスプローラー)の場合

  •  枠の上下にある「↓」から「↑」までをコピーして、ブログを書く画面に貼り付ける
  • 「↓」「↑」「ここに文章」を削除して入力する

ブラウザが Chromeの場合

  • 下のピンク枠内のHTMLタグをコピーして「HTML表示」タブに切り替えてから貼り付ける

 

イエロー

ここに文章

[aside type=”warning”]Chrome:
<p>&nbsp;</p><div style=”border: 1px solid #ffcc66; background: #fff3da; padding: 10px; border-radius: 10px;”><p>ここに文章</p></div><p>&nbsp;</p>[/aside]

 

オレンジ

ここに文章

[aside type=”warning”]Chrome:
<p>&nbsp;</p><div style=”border: 1px solid #ff9966; background: #ffece2; padding: 10px; border-radius: 10px;”><p>ここに文章</p></div><p>&nbsp;</p>[/aside]

 

ピンク

ここに文章

[aside type=”warning”]Chrome:
<p>&nbsp;</p><div style=”border: 1px solid #ff99cc; background: #ffebf5; padding: 10px; border-radius: 10px;”><p>ここに文章</p></div><p>&nbsp;</p>[/aside]

 

パープル

ここに文章

[aside type=”warning”]Chrome:
<p>&nbsp;</p><div style=”border: 1px solid #bb99ff; background: #f5efff; padding: 10px; border-radius: 10px;”><p>ここに文章</p></div><p>&nbsp;</p>[/aside]

 

ブルー

ここに文章

[aside type=”warning”]Chrome:
<p>&nbsp;</p><div style=”border: 1px solid #99ccff; background: #e5f2ff; padding: 10px; border-radius: 10px;”><p>ここに文章</p></div><p>&nbsp;</p>[/aside]

 

グリーン

ここに文章

[aside type=”warning”]Chrome:
<p>&nbsp;</p><div style=”border: 1px solid #33cc99; background: #ddfff4; padding: 10px; border-radius: 10px;”><p>ここに文章</p></div><p>&nbsp;</p>[/aside]

 

グレー

ここに文章

[aside type=”warning”]Chrome:
<p>&nbsp;</p><div style=”border: 1px solid #999999; background: #eeeeee; padding: 10px; border-radius: 10px;”><p>ここに文章</p></div><p>&nbsp;</p>[/aside]

 

枠の設定をカスタマイズする方法

上記でご紹介した枠線の設定は、「HTML表示」タブでお好みでカスタマイズ(変更)することができます。

まずは、それぞれの記述について、意味をご紹介します。

コピペ枠001

以上を踏まえ、下記のそれぞれの項目について、お好みで変更してみてください!

枠線の太さの変更

数値が大きくなるほど、枠線は太くなります。

 

線の種類の変更

solid 右矢印直線

 

dotted 右矢印破線

 

dashed 右矢印点線

 

double 右矢印二重線(注意線の太さは 2px

 

線の色&背景色の変更

Web上では、「#」から始まる6ケタの半角英数字で色を表現しています。
コチラのサイトから、好きな色をコピーしてみましょう!
※背景白:#ffffff

 

枠線内の距離の変更

  • 数値を大きくする → 文字列が枠線から離れる
  • 数値を小さくする → 文字列が枠線に近づく

 

角の丸みの変更

  • 数値を大きくする → 丸みが大きく(鈍角に)なる
  • 数値を小さくする → 丸みが小さく(鋭角に)なる
  • 数値を0(ゼロ)にする → 丸みが無くなる(角張る)