ビジネスクラフト BUSINESS CRAFT

ブログやサイトを運用していて「ここの文章を枠で囲いたいな〜」と思ったら、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;">見出しその１</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」の部分を削除します。