Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

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

記事本文にアクセントを付けたい時に便利な枠付きボックスのCSSです。
f:id:syofuso:20160815004848j:plain
それぞれclassにtext-box1~5を適応し以下のようにdivでくくってお使い下さい。
HTML編集(見たままモード、はてな記法、MarkDownモードでも使えます)

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

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

CSSの貼り付ける場所

以下に紹介するCSSコードは、「管理画面→デザイン→カスタマイズ(スパナマーク)→デザインCSS」の最後の行に追記します。
管理画面→デザイン→カスタマイズ
f:id:syofuso:20170102103707j:plain
→デザインCSS
f:id:syofuso:20170102103741j:plain

デザイン枠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
こちらもどうぞ:
design.syofuso.com
design.syofuso.com