ブログを書いていると時々見かける「囲み枠」があります。実際に文章を読んでいると、読みやすかったりすることがあります。こんな機能を簡単に使いたい・・・と思ったことはありませんか？
実は、簡単に使う方法があるんです。この記事では、ブログ初心者でも今日から使える「囲み枠」の使い方について解説します。あなたがこの記事を読む事で、」ブログをお洒落に演出できる囲み枠が使える様になります。是非、最後まで読んでくださいね。
普段使いの囲み枠４種
僕が普段から使っている囲み枠は３種類だけです。枠の種類や色はたくさんあるのですが、基本的には３種類しかつかっていません。なので、この記事では３種類の枠で解説していきます。
実際に使っている枠は次の３つです。
- シンプル枠
- コメント付き枠
- ラベル付き枠（２種類）
この４つです。では、早速それぞれの枠の使い方について解説していきますね。
作業モードは「HTMLビュー」に切り替えてください。作業手順は次の通りです。
①記事作成画面を開きます。
③プルダウンウインドウが開くので「HTMLビュー」をクリックします。
ココまでの作業でbloggerの入力モードは切り替わりました。枠のHTMLを貼りつけたら、保存して今の逆の手順で「作成ビュー」に戻してから作業を再開してくださいね。
次項から、枠の取り入れ方を解説しますね。
シンプル枠
コピペ用HTMLは次の通りです。
囲み枠の設置
枠のデザインはそれぞれ違います。コードは決まっているので、あなたの好きな囲み枠を使ってみてくださいね。
シンプル枠
シンプルな四角の枠ですね。
記事本文
コピペ用HTML
<div style="background:#ffffff; padding:10px; border:2px solid #000000; border-radius:10px;"> 記事本文 </div>
貼りつけたら、作成画面に戻って枠の中に文字を入力して仕上げてくださいね。
コメント付き枠
枠の最初に一言文章を入れることが出来る枠です。イメージはこんな感じです。
最初にコメントが入るので、シンプル枠より目立たせる事が出来ます。あなたならではの使い方で試してくださいね。
コピペ用HTMLは次の通りです。
<fieldset style="border: 2px solid #000000; padding: 15px;"> <legend style="color: #000000; padding:0 10px;">タイトル</legend> <p style="margin: 0;">ここに文章</p> </fieldset>
ラベル付き枠①
ラベル付き枠は、文章の中でも読者の目を惹きやすい枠です。イメージはこんな感じです。
コピペ用HTMLは次の通りです。
<fieldset style="border: 2px solid #000; padding: 10px;"><legend style="background-color: #000000; padding: 3px 10px; border-radius: 5px; color: #ffffff;">タイトル付き枠</legend>ここに文字を入力する。</fieldset>
ラベル付き枠②
枠のデザインが少し違います。イメージはこんな感じです。
＊タイトル
ここに本文を入れます♪
<div style="margin:0em ;display:inline-block;position:relative;top:2px;padding:0 .5em;height:1.5em;line-height:1.5em;color:#ffffff;background:#000000;font-weight:bold;text-align:center;border-radius:2px 2px 0 0;">＊タイトル</div><div style="background:rgba(255,255,255,0);border:solid 2px #000000;border-radius:0 5px 5px;padding:20px;font-size: 100%;">ここに本文を入れます♪</div>
囲み枠のカスタム
僕は基本的に「白 / 黒」で装飾したいタイプなので、このままで使っています。でも中には、もうちょっとお洒落にしたい・・・と考えている人もきっといると思います。
この項では、シンプル枠を使って簡単にできるカスタムの方法について解説しますね。
囲み枠のカスタムは３か所です。３か所とは次の通りです。
枠線の太さ
枠線の色
枠内の色
上記の３か所のカスタムになります。今回はシンプル枠で解説します。カスタム項目はどの囲み枠でも同じなので、あなた好みにしあげてくださいね。
では、囲み枠のHTMLで解説しますね。
background:#ffeeee = 枠内の色になります。変更する際には「#ffeeee」を好みの色のコードを入力してください。色コードは「色コード HTML」で検索するとたくさんのサイトがでてくるので、あなた好みの色を探してください。
border:2px = 枠線の太さ になります。枠線を太くすることで、読者の目を惹くことができます。太線枠の連発だと、効果は半減するので上手く使ってみてください。
solid #ff0000 ＝ 枠線の色 になります。枠線の色を変えることでも読者の目を惹くことが出来ます。あなたならではの使い方で色々試してくださいね。
囲み枠は文章装飾の１つ
文字装飾も、読者の目を惹く効果があります。当然、囲み枠にも同様の効果は見込めます。装飾だらけの文章・・・読みにくさが出てしまう可能性もあるので、使い方はしっかり意識してくださいね。
因みに、僕がいつもアドバイスしているのは文字装飾であれば、太字・色文字・塗りつぶしは多くて３つの色。使う色は、黒・赤・黄色マーカーでお勧めしています。他の色を否定するつもりはありませんが・・・読みやすさから考えると、妥当な考え方だと感じています。
この関係は囲み枠でも同じだと考えています。ブログの主役は「文章」なので、装飾して際立たせて読んでもらえる様にしていきましょう。
今回のまとめ
今回は「ブログ初心者でも今日から使えるお洒落な囲み枠の使い方と簡単カスタム」をテーマに解説しました。併せて、囲み枠のカスタムのやり方もお伝えしましたいかがでしたか？
多くの人が使っている囲み枠も、使い方と、ちょっとしたカスタムのやり方が分かると、ライバルとの差別化することができます。使い方1つで、読者からの反応も大きく変わってくるので、まずは色々試してくださいね。
編集後記
WordPressだと、テーマの中に予め幾つかの囲み枠がセットされていたので使いやすかったです。でも、実際に使った囲み枠は今回おつたえした３種類でしたので、テーマの枠を使う事はありませんでした（笑）
そのお陰で、枠のカスタムのやり方を覚えられたのはラッキーでした。ブログで使える枠は他にもあるので、改めて別記事で案内していきますね。
まずは、読者の目を惹くような枠の使い方から模索していきましょう。僕は頑張るあなたを応援しています。
コメント