囲み枠・デザインボックスCSSでブログ記事にアクセントを

記事本文にアクセントを付けたい時に便利な枠付きボックスのCSSです。

それぞれclassにtext-box1～5を適応し以下のようにdivでくくってお使い下さい。
HTML編集（見たままモード、はてな記法、MarkDownモードでも使えます）

<div class="text-box1">この中に記述</div>

記事中だけでなく、サイドバーのバナー、ボタンなどにも使えます。
また見出しのデザインにも応用できますね。

CSSの貼り付ける場所

以下に紹介するCSSコードは、「管理画面→デザイン→カスタマイズ（スパナマーク）→デザインCSS」の最後の行に追記します。
管理画面→デザイン→カスタマイズ

→デザインCSS

デザイン枠1 アイコン付きボックス

デザイン枠1 アイコン付き

.text-box1 {
  background-color: #EFEFEF;
  border: 1px solid #ddd;
  position: relative;
  padding: 1em 1em 1em 3.5em;
}
.text-box1::before {
  position: absolute;
  top: -10px;
  left: 10px;
  font-family: "blogicon";
  content: '\f010';
  color: #454545;
  font-size: 230%;
}

デザイン枠2 二重線ボーダー囲い

デザイン枠2 二重線ボーダー囲い

.text-box2 {
  padding: .5em .75em;
  background: #fff;
  border: 3px double #66cdaa;
}

デザイン枠3　単線ボーダー囲い

デザイン枠3　単線ボーダー囲い

.text-box3 {
  padding: .5em .75em;
  border: 1px solid #47a89c;
  border-radius: 4px;
}

デザイン枠4　吹き出し

デザイン枠4　吹き出し

.text-box4 {
  position: relative;
  padding: .5em .75em;
  background-color: #fff;
  border: 1px solid #454545;
  border-radius: 6px;
}
.text-box4::before,
.text-box4::after {
  position: absolute;
  top: 100%;
  left: 30px;
  content: '';
  height: 0;
  width: 0;
  border: 10px solid transparent;
}
.text-box4::before {
  border-top: 15px solid #454545;
}
.text-box4::after {
  margin-top: -2px;
  border-top: 15px solid #fff;
}

デザイン枠5　縫い目風

デザイン枠5　縫い目風

.text-box5 {
  color: #fff;
  background: #47a89c;
  padding: 20px;
  border: 2px dashed rgba(255,255,255,0.5);
  border-radius: 6px;
  box-shadow: 0 0 0 5px #47a89c, 0 2px 3px 5px rgba(0,0,0,0.5);
}

デザイン枠6　タイトル付き囲み枠

おすすめ記事

• カスタマイズの手引
• ヘッダー、タイトル画像の設定について
• グローバルメニューの設置と色変更

記事下になどによく見るおすすめ記事囲み枠のように使えます。

/*recommen-entry*/
.recommend-entry {
    position: relative;
    border: 1px solid #666;
    padding: 15px;
}

.recommend_title {
    position: absolute;
    top: -20px;
    left: 20px;
    font-weight: bold;
    font-size: 120%;
    background: #fff;
    padding: 0 .5em;
}

.recommend_title:before {
    margin-right: 10px;
    font-family: "blogicon";
    content: "\f033";
    display: inline-block;   
}

HTML

<div class="recommend-entry">
<div class="recommend_title"><span>おすすめ記事</span></div>
この中に書く
 </div>

上の例ではリストを使ってます。リストのデザインはまた別エントリで。

参考：
www.nxworld.net
こちらもどうぞ：
blog.minimal-green.com
blog.minimal-green.com