無題で行こう

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

MENU

はてなブログを簡単カスタマイズ!⑪枠囲み編(後編)+おまけ


f:id:kay72234:20160309070542j:plain

■はじめに

ブログを始めてから、ほかの方のブログを参考にしながら様々なカスタマイズ手法を試してみました。実際にやってみたことは、これまでにも記事にしてきましたが、基本はコピペで簡単に使うことができるように紹介しています。

さて、前回はブログの本文中で使える「枠囲み」を紹介しましたが、それなりのボリュームになったため、前後編に分けることにしました。少し時間が空いてしまいましたが、今回は枠囲み編の続きになります。

(「枠囲み編(前編)」はこちらから)


■まずは基本形をおさらい

まずは前回にも紹介した、枠囲みの基本パターンです。

★基本パターン

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

これを基本形として、前回は囲み線の色や太さ・線の種類をいろいろ変えてみました。今回は、さらにバリエーションを増やしてみましょう。


■枠囲み内の背景色を変えてみる

では、枠囲み内の背景色を変えてみます。

★背景色を変更

<div style="border-style: solid ; border-width: 1px; background-color: #CC99CC; ">★背景色を変更</div>

基本パターンのコードに背景色の指定を意味する「background-color: #CC99CC;」を追記しました。カラーコードは、例によってこちらのサイト等をご参考ください。



■角を丸くしてみる

次は枠線の角を丸くしてみましょう。具体的なコードと表示サンプルはこちらです。

★角を丸くする

<div style="border-style: solid ; border-width: 1px; border-radius: 5px;">★角を丸くする</div>



「border-radius」を使って角を丸くする指定を行っています。「○px」の部分の値で、カーブの大きさを変えることができます。10pxを指定して、さらにカーブを大きくしてみました。

★角をもっと丸くする

<div style="border-style: solid ; border-width: 1px; border-radius: 10px;">★角をもっと丸くする</div>



■影を付ける

次は枠に影を付けてみましょう。

★影を付ける

<div style="border-style: solid ; border-width: 1px; box-shadow: 5px 5px 5px #000000; ">★影を付ける</div>

影を付けるために使うのが「box-shadow」です。指定することができる内容が多くあり、かなり奥深いです。筆者は次のサイトを参考にさせていただきました。




■余白の指定

枠囲みの内側に余白を設けたい場合は、「padding」を使って指定することができます。

★余白を指定

<div style="border-style: solid ; border-width: 5px; padding: 30px; background-color: #999999; ">★余白を指定</div>



上記の例では「30px」と、ピクセル数(ドット数)を使って指定しましたが、「em」で文字数による指定も可能です。

★余白を指定(文字数指定)

<div style="border-style: solid ; border-width: 5px; padding: 2em; background-color: #999999; ">★余白を指定(文字数指定)</div>



■組み合わせてみましょう

それでは、ここまでの手法を組み合わせてみましょう。

囲み線を2重線かつ角を丸くして、
さらに影も付けてみました。

<div style="border-style: double; border-width: 5px; border-color: #000080; border-radius: 5px; padding: 1em; background-color: #ffff99; box-shadow :3px 3px 3px #888888;">★囲み内の文章★</div>



もう1つ、おまけのサンプルです。

○月 ○日
黒板風の枠囲み

・カラーリングを工夫して黒板風の枠囲みにしてみました。

<div style="border-style: solid; border-width:10px; border-color: #996600; padding: 1em; color: #ffffff; background-color: #006600; box-shadow: 2px 2px 2px #000000, 2px 2px 2px #000000 inset;">★囲み内の文章★</div>



■さいごに

足掛け2回になりましたが、枠囲み編もこれで完結です。線の色や種類・影の付け方を組み合わせると、いろいろな表現ができます。使いどころと使い方しだいで、記事にアクセントが付くと思います。サンプルをコピペして、記事の内容を参考に手直ししながら試していただければ幸いです。


スポンサーリンク