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

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

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

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

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

カスタマイズ目次

  • グローバルメニュー
  • シェアボタン
  • 囲み枠
  • ガーリーデザイン
  • ヘッダー周り
  • フッター周り

はてなブログテーマ制作

有料カスタマイズサービス

有料にてはてなブログ・アメブロ・WordPressカスタマイズ・制作承っております。

 最新記事