当ブログではアフィリエイト広告を利用しています

ファンブログで使える、角が丸い囲み枠!

角丸囲み枠

ファンブログで角が丸い"囲み枠"を使いたい!と思ったことはありませんか?

こういうヤツです↓

テキスト

今回の記事は、ファンブログで角丸囲み枠を使う方法についてまとめました!

囲み枠を使うメリットとは?

囲み枠は使うメリットとしては、つぎのようなものがあります!    
記事が見やすくなる
見栄えがよくなる
大事なところを目立たせることができる

さらに、角が丸い囲み枠は・・・・・

角丸囲み枠は、やわらかい感じで、大事なところを強調することができる!

というメリットがあります!

ファンブログで角丸囲い枠を使う方法!

ファンブログで角が丸い囲い枠を使う方法は、以下の通りです。(コピペして、ファンブログのエディタに貼り付けるだけです)

【1】下記のCSSをコピーする。

<div style="border:solid 2px #a9a9a9; border-radius: 8px; padding:10px;">テキスト</div>

【2】ファンブログのエディタを開き、貼り付けます。

ファンブログのエディタ

【3】テキストの部分に文章を入れます。

【ファンブログ】コピペしたCSSの編集


【4】以上で完了です、プレビュー画面で確認してみて下さい!

【ファンブログ】プレビュー

角丸囲い枠のカスタマイズ!

基本的な使い方が分かったら、色や線の太さを自分好みにカスタマイズしてみましょう!

【1】色の変更

色の変更は、下記赤色の部分のカラーコードを変更して下さい。

<div style="border:solid 2px #a9a9a9; border-radius: 8px; padding:10px;">テキスト</div>

カラーコードは、ファンブログの『見出し』を押すとでてくる、カラーパレットで調べると簡単です。

ファンブログの『見出し』
【ファンブログ】見出し

ファンブログ『見出し』の中のカラーパレット

【ファンブログ】カラーパレット

【2】枠線の太さの変更

枠線の太さの変更は、下記赤色の部分の数字を変更して下さい。

<div style="border:solid 2px #a9a9a9; border-radius: 8px; padding:10px;">テキスト</div>

まとめ

記事の中で大事なところを囲むと、メリハリがついてわかりやすく見栄えもよい記事になります!

特に角丸囲み枠は、見た目がやわらかい感じで仕上がるので、活用してみて下さい!