黒板風囲み枠CSSでブログの解説記事をまとめよう

色白おばけ (id:lightgauge) さんのブログ記事で使われていた”黒板風囲み枠”にインスパイア（笑）され、私も黒板風囲み枠のCSSを作ってみました。
はてなブログで独自のWEBフォントを利用する方法 - 攻めは飛車角銀桂守りは金銀三枚
CSSは参考せず自分で組みました。borderで太枠囲んでるだけですけど。

HTML&CSS

ポイント
黒板風囲み枠CSSです。

はてなブログで使うには、ダッシュボード→デザイン→カスタマイズ→デザインCSSに以下のコードを貼り付けて下さい。

@font-face {
    font-family: 'HuiFontP109';
    src:url('http://hatenablog.com/fonts/public/HuiFont/HuiFontP109.eot');
    src:url('http://hatenablog.com/fonts/public/HuiFont/HuiFontP109.eot?#iefix') format('embedded-opentype'), url('http://hatenablog.com/fonts/public/HuiFont/HuiFontP109.woff')format('woff'), url('http://hatenablog.com/fonts/public/HuiFont/HuiFontP109.ttf')format('truetype'), url('http://hatenablog.com/fonts/public/HuiFont/HuiFontP109.svg#HuiFontP109') format('svg');
    font-weight: normal;
    font-style: normal;
}
.kokuban {
    font-family: HuiFontP109;
    color: #fff;
    background-color: #114400;
    margin: 10px 0 10px 0;
    padding: 15px;
    border: 9px solid #a60;
    border-radius: 3px;
    box-shadow: 2px 2px 4px #666, 2px 2px 2px #111 inset;
    text-shadow: 0px 0px 2px #000;
    line-height: 1.9;
}
.point {
    color: #ffb1b3;
    font-weight: bold;
    border: 3px solid #ffb1b3;
}

HTMLはこちら。見たままモードではHTML編集画面にご記入下さい。

<div class="kokuban"><span class="point">ポイント</span>
黒板風囲み枠CSSです。</div>

ほんとは、色白おばけさんのように『たぬき油性マジック』をwebフォント化すれば、もっと黒板に書いたチョークっぽくなるんですが、面倒だったので(^_^;)はてなブログに組み込まれている手書き風フォント『ふい字』を指定しています。

解説系の記事のまとめに使えるんじゃないかな。

囲み枠はいろいろご紹介してるので、よろしければこちらの記事もご参照下さい。
関連記事：
マスキングテープ風デザインCSS ガーリーデザインのサイトやブログに - Minimal Green
記事のアクセントに デザイン枠ボックスCSS - Minimal Green