ブログやサイトを運用していて「ここの文章を枠で囲いたいな〜」と思ったら、htmlを編集できる画面で枠をつけることができます。WordPress、アメブロ、FC2でも記事を枠で囲うことができます。

 

今回は簡単な枠をつけらえるhtmlのサンプルになります。

 

使いたい枠を見つけたら「ああああああああああああ」の部分を好きなテキストに変えて、HTMLの記述できる画面にしてからコピペしてください。

 

 

※ワードプレスの場合:テキストエディターに切り替えてコピペします。

 

 

 

細かい点線の枠

html-sample-boxline-1

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;">
    ああああああああああああ
</div>

 

 

点線の枠

html-sample-boxline-2

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">
    ああああああああああああ
</div>

 

 

実線の枠

html-sample-boxline-3

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">
    ああああああああああああ
</div>

 

 

二重線の枠

html-sample-boxline-4

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333;">
    ああああああああああああ
</div>

 

細かい点線の枠

html-sample-boxline-5

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px;">
    ああああああああああああ
</div>

 

 

点線の枠

html-sample-boxline-6

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px;">
    ああああああああああああ
</div>

 

 

角丸実線の枠

html-sample-boxline-7

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">
    ああああああああああああ
</div>

 

 

角丸二重実線の枠

html-sample-boxline-8

<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」の部分を削除します。

 

 

この記事を読んだ方はこちらも読まれています

最後まで読んで頂きありがとうございます。

このブログを「いいな」と感じていただけましたら、

下のボタンをクリックしていただくととても嬉しいです^^

ブログランキングに参加しています。応援クリックよろしくお願いします!

にほんブログ村 為替ブログ FXの基礎知識へ

さらに下のボタンからSNSに拡散していただくととても嬉しいです!