はてなブログを簡単カスタマイズ!⑩枠囲み編(前編)
■はじめに
前回の「マーカー風の装飾編」からしばらく間が空きましたので、久しぶりのカスタマイズ記事になります。と言いながら、今回もカスタマイズというよりは、ブログの本文中で使うことができる、ちょっとした表現方法と思っていただければ良いかと思います。そんなわけで、今回のテーマは「枠囲み」編です。
■こんなことができます
記事の本文中で特に強調したい箇所は、太字にしたり、前回に取り上げたマーカー風の装飾を施すというやり方があります。しかし、ある程度まとまった行数の文章は、次のように枠囲みすると良い感じになります。
囲みの中で太字を使うこともできます。
■基本パターン
まずは、コピペ用のコードの紹介です。次のコードを本文に貼り付けてみてください。
<div style="border-style: solid ; border-width: 1px;">★基本パターン</div>
次のように表示されたでしょうか?
■線の太さを変えてみる
まずは線の太さを変えてみます。基本パターンのコードの中に「border-width」という記述がありますが、その次の「○px」が線の太さを示しています。
<div style="border-style: solid ; border-width: 5px;">★5px</div>
見たままですが、太さを5pxにしてみました。
■線の色を変えてみる
今度は線の色を変えてみましょう。
<div style="border-style: solid ; border-width: 1px; border-color: #ff0000; ">★赤線</div>
上記のコードで「border-color: #ff0000」という記述があります。これが線の色を指定している部分です。最初の基本パターンでは省略していましたが、省略すると黒色の線になります。
「#ff0000」で具体的な色を指定するのですが、色の見本はこちらのサイトなどをご参考ください。
■線の種類を変えてみる①
先ほどのサンプルコード中では「border-style:」のあとに「solid」と書かれています。これが、枠囲みの線の種類を示しています。バリエーションとしては次のようものがあります。
実線 : solid
点線 : dotted
破線 : dashed
二重線 : double
線なし : none
では、点線・破線・二重線それぞれのサンプルを見てみましょう。
<div style="border-style: dotted ; border-width: 1px;">★点線</div>
<div style="border-style: dashed ; border-width: 1px;">★破線</div>
<div style="border-style: double ; border-width: 3px;">★二重線</div>
二重線の場合は、線の太さを3px以上にしておかないと、ただの実線になってしまいますので、このあたりは調整しながらですね。
■線の種類を変えてみる②
ほかにも、このような線の種類があります。これらは色付き&太めの線のサンプルで見た方が分かりやすいと思います。
谷型 : groove
山型 : ridge
凹型 : inset
凸型 : outset
では、実際にサンプルを見てみましょう。
<div style="border-style: groove ; border-width: 10px; border-color: #ff0000; ">★谷型</div>
<div style="border-style: ridge ; border-width: 10px; border-color: #ff0000; ">★山型</div>
<div style="border-style: inset ; border-width: 10px; border-color: #ff0000; ">★凹型</div>
<div style="border-style: outset ; border-width: 10px; border-color: #ff0000; ">★凸型</div>
どちらが谷でどちらが山か、どちらが凹でどちらが凸か、見ているうちに良く分からなくなってきそうですが…とりあえず、基本はコピペで大丈夫です。
■さいごに
いかがでしたか? 枠線の色や線種、太さをいろいろ組み合わせて、お気に入りのパターンを作ってみてはいかがでしょう。
少し長くなってしまいましたので、今回の記事は「前編」ということにして、ひとまずここまでにしておきたいと思います。しかし、枠囲みにはもう少しバリエーションがありますので、続きは次回の「後編」で紹介いたします。