スポンサーリンク
ブログやサイトを運用していて「ここの文章を枠で囲いたいな〜」と思ったら、htmlを編集できる画面で枠をつけることができます。WordPress、アメブロ、FC2でも記事を枠で囲うことができます。
今回は簡単な枠をつけらえるhtmlのサンプルになります。
使いたい枠を見つけたら「ああああああああああああ」の部分を好きなテキストに変えて、HTMLの記述できる画面にしてからコピペしてください。
※ワードプレスの場合:テキストエディターに切り替えてコピペします。
目次
細かい点線の枠
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;"> ああああああああああああ </div>
点線の枠
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;"> ああああああああああああ </div>
実線の枠
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;"> ああああああああああああ </div>
二重線の枠
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333;"> ああああああああああああ </div>
細かい点線の枠
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px;"> ああああああああああああ </div>
点線の枠
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px;"> ああああああああああああ </div>
角丸実線の枠
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;"> ああああああああああああ </div>
角丸二重実線の枠
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px;"> ああああああああああああ </div>
水色の可愛い点線角丸HTML枠
ああああああああああああああ
<div style="background:#eaf4fc; padding:10px; border:2px dotted #5eb7e8; border-radius:10px;"> ああああああああああああああ<br> </div>
ピンク系赤色の可愛い点線角丸HTML枠
ああああああああああああああ
<div style="background:#fce5e2; padding:10px; border:2px dotted #f29c97; border-radius:10px;"> ここに枠で囲みたい内容を入れます。<br> </div>
黄色の可愛い点線角丸HTML枠
ここに枠で囲みたい内容を入れます。
<div style="background:#fffbc7; padding:10px; border:2px dotted #f9c158; border-radius:10px;"> ああああああああああああああ<br> </div>
黄緑色の可愛い点線角丸HTML枠
あああああああああああああああああ
<div style="background:#edf2c5; padding:10px; border:2px dotted #c3d83f; border-radius:10px;"> ああああああああああああああああ<br> </div>
淡いグレーのHTML枠
ああああああああああああああ
<div style="background:#eae5e3; padding:40px; border:4px double #ffffff; border-radius:10px;">ああああああああああああああ</div>
淡い青色のHTML枠
あああああああああああああ
<div style="background:#d8e8f6; padding:40px; border:4px double #ffffff; border-radius:10px;">あああああああああああああ</div>
淡い赤色のHTML枠
あああああああああああああ
<div style="background:#fce5e2; padding:40px; border:4px double #ffffff; border-radius:10px;">あああああああああああああ</div>
淡い黄色のHTML枠
ああああああああああああ
<div style="background:#fffbc7; padding:40px; border:4px double #ffffff; border-radius:10px;">ああああああああああああ</div>
淡い緑色のHTML枠
あああああああああああああ
<div style="background:#edf2c5; padding:40px; border:4px double #ffffff; border-radius:10px;">あああああああああああああ</div>
見出しつき囲い枠
青い見出しつき囲い枠
<font style="padding:6px 10px; background:#000066; color:#ffffff; font-weight:bold;">■タイトルはこちら■</font><div style="border:1px solid #000066; padding:10px; font-size:0.9em; margin-top:2px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>
もしくは
<span style="padding:6px 10px; background:#000066; color:#ffffff; font-weight:bold;">■タイトルはこちら■</span><div style="border:1px solid #000066; padding:10px; font-size:0.9em; margin-top:2px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>
赤色の見出しつき囲い枠
スポンサーリンク
<font style="padding:6px 10px; background:#ff0000; color:#ffffff; font-weight:bold;">■タイトルはこちら■</font><div style="border:1px solid #ff0000; padding:10px; font-size:0.9em; margin-top:2px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>
ピンクの見出しつき囲い枠
<font style="padding:6px 10px; background:#ff1493; color:#ffffff; font-weight:bold;">■タイトルはこちら■</font><div style="border:1px solid #ff1493; padding:10px; font-size:0.9em; margin-top:2px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>
緑色の見出しつき囲い枠
<font style="padding:6px 10px; background:#008000; color:#ffffff; font-weight:bold;">■タイトルはこちら■</font><div style="border:1px solid #008000; padding:10px; font-size:0.9em; margin-top:2px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>
黄色の見出しつき囲い枠
<font style="padding:6px 10px; background:#ff9933; color:#ffffff; font-weight:bold;">■タイトルはこちら■</font><div style="border:1px solid #ff9933; padding:10px; font-size:0.9em; margin-top:2px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>
黄色の角丸見出しつき囲い枠線
<div style="height:12px;"><span style="margin-left:8px; padding:6px 10px; background:#ff9933; color:#ffffff; font-weight:bold;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">見出しその1</span></div><div style="border:2px solid #ff9933; padding:25px 12px 10px; font-size:0.85em;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">本文記事1<br>本文記事2<br>本文記事3</div>
青い角丸見出しつき囲い枠線
<div style="height:12px;"><span style="margin-left:8px; padding:6px 10px; background:#000066; color:#ffffff; font-weight:bold;border-radius:5px;">■タイトルはこちら■</span></div><div style="border:2px solid #000066; padding:25px 12px 10px; font-size:1em;border-radius:5px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>
水色の四角見出しつき囲い枠線
<div style="background: #a0d8ef; border: 1px solid #a0d8ef; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">あいうえおかきくけこ</span></div> <div style="border: 1px solid #a0d8ef; padding: 10px;">ああああああああああ</div>
マゼンダの四角見出しつき囲い枠線
<div style="background: #ff1493; border: 1px solid #ff1493; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">あいうえおかきくけこ</span></div> <div style="border: 1px solid #ff1493; padding: 10px;">ああああああああああああああ</div>
あああああああああああああ
<div style="border: 1px dotted #a0d8ef; padding: 10px;">あああああああああああああ</div>
あああああああああああああ
<div style="background:#fff; padding:10px; border:2px dotted #000;">あああああああああああああ</div>
あああああああああああああ
<div style="background:#fff; padding:10px; border:2px dotted #0000ff;">あああああああああああああ</div>
あああああああああああああ
<div style="border: 1px solid#e6bfb2; padding: 10px;">あああああああああああああ</div>
あああああああああああああ
<div style="border: 1px solid#7f1184; padding: 10px;">あああああああああああああ</div>
あああああああああああああ
<div style="background:#fff; padding:10px; border:2px solid #FFC0CB;">あああああああああああああ</div>
あああああああああああああ
<div style="background:#fff; padding:10px; border:2px solid #ff8c00;">あああああああああああああ</div>
あああああああああああああ
<div style="border: 5px solid #fdd35c; padding: 10px;">あああああああああああああ</div>
あああああああああああああ
<div style="background:#e0ffff; padding:10px; border:2px solid #afeeee;">あああああああああああああ</div>
あああああああああああああ
<div style="background:#f8f8ff; padding:10px; border:1px solid #b0e0e6; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;">あああああああああああああ</div>
あああああああああああああ
<div style="padding: 10px; border-radius: 10px; border: 5px double#a1d8e2;">あああああああああああああ</div>
あああああああああああああ
<div style="background:#fff; padding:10px; border:3px double #afeeee;">あああああああああああああ</div>
あああああああああああああ
<div style="background:#fff; padding:10px; border:3px double #ffb6c1;">あああああああああああああ</div>
あああああああああああああ
<div style="background:#fff; padding:10px; border:3px double #dda0dd;">あああああああああああああ</div>
ああああああああああああああ
<div style="background:#fffaf0; padding:10px; border:3px double #ffa500;">ああああああああああああああ</div>
補足
- background・・・背景のことです。
- border・・・線の太さを調整できます。
- padding・・・枠線と文字の間の隙間の大きさを調整できます。
- solid・・・直線にできます。
- dashed・・・破線にできます。
- double・・・二重線にできます。
- dotted・・・ドット線にできます。
- 点線から線を実線に変更する方法・・・「dotted」部分を「solid」に書き換えます。
- 線の太さを変更する方法・・・「border:●●●px」の●●●部分の数字を書き換えます。数字を大きくすることで線を太くできます。
- 四角枠に変更する方法・・・「border-redius:●●●px」の部分を削除します。
スポンサーリンク
1 Response