Minimal Green

はてなブログテーマ『Minimal Green』のデモブログ。はてなブログカスタマイズや、HTML、CSSなどについて書いています。

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

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

 

HTML&CSS

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

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

@font-face {
    font-family: 'HuiFontP109';
    src:url('/fonts/public/HuiFont/HuiFontP109.eot');
    src:url('/fonts/public/HuiFont/HuiFontP109.eot?#iefix') format('embedded-opentype'), 
url('/fonts/public/HuiFont/HuiFontP109.woff')format('woff'),
url('/fonts/public/HuiFont/HuiFontP109.ttf')format('truetype'),
url('/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>

※spanの後はbr(改行)が必要なんですが、はてなブログだと自動挿入されるので↑では書いていません。

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

解説系の記事のまとめに使うとお勉強モードになるかも。

orefolder (id:c-miya)さんがふい字フォントの導入方法とメモ風のフレーム枠のCSSをご紹介されています。ブログデザインもすごくオシャレで素敵です。
www.foxism.jp
囲み枠は過去記事でいろいろご紹介してるので、よろしければこちらの記事もご参照下さい。
関連記事:
マスキングテープ風デザインCSS ガーリーデザインのサイトやブログに - Minimal Green
囲み枠・デザインボックスCSSでブログ記事にアクセントを - Minimal Green