無題で行こう

気の向くままに書きたいことを書いていきます。とりあえず無題でいきましょう。毎日いろいろありますよね♪

MENU

はてなブログを簡単カスタマイズ!⑩枠囲み編(前編)

f:id:kay72234:20160308232535j:plain

■はじめに

前回の「マーカー風の装飾編」からしばらく間が空きましたので、久しぶりのカスタマイズ記事になります。と言いながら、今回もカスタマイズというよりは、ブログの本文中で使うことができる、ちょっとした表現方法と思っていただければ良いかと思います。そんなわけで、今回のテーマは「枠囲み」編です。


■こんなことができます

記事の本文中で特に強調したい箇所は、太字にしたり、前回に取り上げたマーカー風の装飾を施すというやり方があります。しかし、ある程度まとまった行数の文章は、次のように枠囲みすると良い感じになります。

どうでしょう? こうして枠囲みすると、印象がぐっと変わりますよね?
囲みの中で太字を使うこともできます。
では、今回も基本はコピペで簡単に使うことができるよう、いくつかサンプルを例示しながら紹介したいと思います。


■基本パターン

まずは、コピペ用のコードの紹介です。次のコードを本文に貼り付けてみてください。

<div style="border-style: solid ; border-width: 1px;">★基本パターン</div>

次のように表示されたでしょうか?

★基本パターン



■線の太さを変えてみる

まずは線の太さを変えてみます。基本パターンのコードの中に「border-width」という記述がありますが、その次の「○px」が線の太さを示しています。

★5px

<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>

どちらが谷でどちらが山か、どちらが凹でどちらが凸か、見ているうちに良く分からなくなってきそうですが…とりあえず、基本はコピペで大丈夫です。


■さいごに

いかがでしたか? 枠線の色や線種、太さをいろいろ組み合わせて、お気に入りのパターンを作ってみてはいかがでしょう。

少し長くなってしまいましたので、今回の記事は「前編」ということにして、ひとまずここまでにしておきたいと思います。しかし、枠囲みにはもう少しバリエーションがありますので、続きは次回の「後編」で紹介いたします。


スポンサーリンク