文章を枠で囲む方法★記事下メニューや強調部分にコピペでOK!
※最新版エディタで使ってください。
目次
ブラウザが Firefox・Edge・IE(インターネットエクスプローラー)の場合
- 枠の上下にある「↓」から「↑」までをコピーして、ブログを書く画面に貼り付ける
- 「↓」「↑」「ここに文章」を削除して入力する
ブラウザが Chromeの場合
- 下のピンク枠内のHTMLタグをコピーして「HTML表示」タブに切り替えてから貼り付ける
イエロー
↓
ここに文章
↑
[aside type=”warning”]Chrome:<p> </p><div style=”border: 1px solid #ffcc66; background: #fff3da; padding: 10px; border-radius: 10px;”><p>ここに文章</p></div><p> </p>[/aside]
オレンジ
↓
ここに文章
↑
[aside type=”warning”]Chrome:<p> </p><div style=”border: 1px solid #ff9966; background: #ffece2; padding: 10px; border-radius: 10px;”><p>ここに文章</p></div><p> </p>[/aside]
ピンク
↓
ここに文章
↑
[aside type=”warning”]Chrome:<p> </p><div style=”border: 1px solid #ff99cc; background: #ffebf5; padding: 10px; border-radius: 10px;”><p>ここに文章</p></div><p> </p>[/aside]
パープル
↓
ここに文章
↑
[aside type=”warning”]Chrome:<p> </p><div style=”border: 1px solid #bb99ff; background: #f5efff; padding: 10px; border-radius: 10px;”><p>ここに文章</p></div><p> </p>[/aside]
ブルー
↓
ここに文章
↑
[aside type=”warning”]Chrome:<p> </p><div style=”border: 1px solid #99ccff; background: #e5f2ff; padding: 10px; border-radius: 10px;”><p>ここに文章</p></div><p> </p>[/aside]
グリーン
↓
ここに文章
↑
[aside type=”warning”]Chrome:<p> </p><div style=”border: 1px solid #33cc99; background: #ddfff4; padding: 10px; border-radius: 10px;”><p>ここに文章</p></div><p> </p>[/aside]
グレー
↓
ここに文章
↑
[aside type=”warning”]Chrome:<p> </p><div style=”border: 1px solid #999999; background: #eeeeee; padding: 10px; border-radius: 10px;”><p>ここに文章</p></div><p> </p>[/aside]
枠の設定をカスタマイズする方法
上記でご紹介した枠線の設定は、「HTML表示」タブでお好みでカスタマイズ(変更)することができます。
まずは、それぞれの記述について、意味をご紹介します。
以上を踏まえ、下記のそれぞれの項目について、お好みで変更してみてください!
枠線の太さの変更
数値が大きくなるほど、枠線は太くなります。
線の種類の変更
solid 直線
dotted 破線
dashed 点線
double 二重線(線の太さは 2px)
線の色&背景色の変更
Web上では、「#」から始まる6ケタの半角英数字で色を表現しています。
コチラのサイトから、好きな色をコピーしてみましょう!
※背景白:#ffffff
枠線内の距離の変更
- 数値を大きくする → 文字列が枠線から離れる
- 数値を小さくする → 文字列が枠線に近づく
角の丸みの変更
- 数値を大きくする → 丸みが大きく(鈍角に)なる
- 数値を小さくする → 丸みが小さく(鋭角に)なる
- 数値を0(ゼロ)にする → 丸みが無くなる(角張る)