【カスタム】文章を枠で囲む方法

かこむ


文章を枠で囲む方法くする方法


便利なカスタマイズシリーズです！
今回は「文章を枠で囲む方法」をご紹介します。

早速ですが、文章を囲むとこんな感じになります。


・アメブロ正攻法
・アメブロで集客する方法
・アメブロカスタムで成功


これは小さい点々に白のバックをつけたものですね。シンプルにやりたければコレで十分です。

HTMLは下記のとおりです。コピペして使ってください。
<div style="border:1px dotted #CCCCCC; padding:10px;">・アメブロ正攻法
・アメブロで集客する方法
・アメブロカスタムで成功</div>



前半の「border:1px」ってとこでラインの太さ。
次の「#」のあとにカラーコードを入れることで、色の変更も可能です。

※カラーコードはコチラ

例えばこんな感じ。


・アメブロ正攻法
・アメブロで集客する方法
・アメブロカスタムで成功



HTMLは下記のとおりです。コピペして使ってください。
<div style="border:5px dotted #FF0000; padding:10px;"> ・アメブロ正攻法
 ・アメブロで集客する方法
 ・アメブロカスタムで成功</div>



また、枠を“角枠”でなく“丸枠”にすることも可能です。サイトテーマによっては、丸みを出したい場合もあるかと思いますので、お好みで使い分けてください。


丸枠だとこんな感じです。


　・アメブロ正攻法
　・アメブロで集客する方法
　・アメブロカスタムで成功



HTMLは下記のとおりです。コピペして使ってください。

<div style="border: 1px solid #CCCCCC; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">
　・アメブロ正攻法
　・アメブロで集客する方法
　・アメブロカスタムで成功

</div>




文字の後ろに色をつけたり、ラインの色を変えたい場合は前半部分にHTMLを追加・変更します。するとこんな感じにも出来ます。

・アメブロ正攻法
・アメブロで集客する方法
・アメブロカスタムで成功



HTMLは下記のとおりです。コピペして使ってください。

<div style="background: #999999; padding: 10px; border: 3px solid #ff0000; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">・アメブロ正攻法
・アメブロで集客する方法
・アメブロカスタムで成功/div>


※カラーコードはコチラ

HTMLでカスタマイズの幅を利かせることができますが、不慣れなうちは少し難しいかもしれません。

そんなときは弊社のブログカスタムに頼っていただいても大丈夫です！無料診断も行っていますので、ぜひお問い合わせくださいヽ(*´∀｀)ノ

親切丁寧にご対応させていただきます。



アメブロカスタムで
ブランディング＆アクセスアップ！
Clik! Clik! Clik!
↓↓↓↓

SBアメブロカスタム


☆大人気☆
ＨＰ制作サービス
Clik! Clik! Clik!
↓↓↓↓

０円でホームページ制作