先日、引用（blockquote）のデザインを変えたのですが、考えてみたら、引用として囲んで表示する以外にも囲んで表示したい場合もあるわけで。 引用ではないものも引用の囲みデザインと同じになってしまっていました。
ということで、ボックスデザインを二つほどCSSに書き加えました。
参考にさせて頂いたサイトさん
https://0edition.net/archives/510
サルワカさんのサイトは言わずと知れたサイトさんですね。 色々なデザインを提供されている他に、わかりやすい説明でいつも助けられています。
もう二つのサイトさんは、かわいらしいおしゃれなデザインが揃っています。 ライン、背景、文字の色を変えて自分のブログデザインに合ったボックスデザインにしてもいいかも。
設定の手順
１）ボックスデザインを決めたら、コードをCSSに貼り付けます。
コード内にあるclass名を自分のわかりやすいものに変える。 特に2種類以上のボックスデザインを使用する場合はbox1, box2など区別できるようにする。
管理画面 → デザイン → カスタマイズ → デザインCSSと進み、コードを貼り付けた後、「変更を保存」をクリックして完了。
２）実際に記事を書く際、HTMLに以下を書き込む：
タイトルなしの場合：
<div class="box1">
<p>テキストをここに書き込む</p>
</div>
タイトルがある場合：
<div class="box2">
<span class="box-title">タイトル</span>
<p>囲むテキストはここ</p>
</div>
一つ目のデザイン：実線で囲む
ピンク色の太目の線で囲むデザイン
border: 10px solid #fcf0f1; / 内側の線の太さ・種類・色 /
margin: 10px; / 外側の余白 /
padding: 10px; / 内側の余白 /
position: relative;
z-index: 0;
}
.mybox:before {
border: 1px solid #f5d5da; / 外側の線の太さ・種類・色 /
content: '';
display: block;
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
z-index: -1;
}
このコードはもろコピペさせて頂きましたので、変更した箇所はありません。
二つ目のデザイン：タイトル付きボックス
マステにタイトルを入れるデザイン
position: relative;
background-color: #fff; / 背景色 /
border: 1px solid #ccc; / 線の太さ・種類・色 /
box-shadow:1px 1px 6px 0px #ccc;
-moz-box-shadow:1px 1px 6px 0px #ccc;
-webkit-box-shadow:1px 1px 6px 0px #ccc;
-o-box-shadow:1px 1px 6px 0px #ccc;
margin: 20px 5px; / 外側の余白 上下・左右 /
padding: 30px 20px 20px 20px; / 内側の余白 上・右・下・左 /
position: relative;
z-index: 0;
}
.box2 .box-title{
background-color: #d9ccb3; / マステ部分の色1 /
background-image: linear-gradient(45deg, #dfd4be 25%, transparent 25%, transparent 75%, #dfd4be 75%, #dfd4be), linear-gradient(45deg, #dfd4be 25%, transparent 25%, transparent 75%, #dfd4be 75%, #dfd4be); / マステ部分の色2 /
background-position: 0 0, 12px 12px;
background-size: 24px 24px;
border-left: 2px dotted rgba(255,255,255,0.9);
border-right: 2px dotted rgba(255,255,255,0.9);
box-shadow: 0 0 5px rgba(255,255,255,0.5);
display: block;
margin: 0 0 10px 0;
padding: 5px 20px;
color: #fff; / マステ部分文字色 /
text-align: center;
position: absolute;
top: -10px;
left: 20px;
transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
}
.box2 p {
color: #65513f;
padding: 10px;
}
タイトルありのデザインの場合、タイトルをCSSに書き込むパターンと記事を書く際にHTMLに書くパターンがあります。 今回はHTMLに書くパターンを選びました。
こちらのコードは、元のコード内容を変えて使っています。 これはは主にレシピなどに使おうかなと思っています。
ボックス幅が内容によって変わる
記事内の特定箇所をボックスを使って囲む際、ボックス内に書いたテキストが短い場合でもボックス幅はサイトの本体幅と同じになります。
これが、妙に間延びしたような感じがして気になります。 そこで、ボックス幅が自動で変わるタイプのものも作成しておきました（↓）。
border: 10px solid #fcf0f1;
padding: 0.5em 1em;
margin: 10px;
display: inline-block;
}
.box3 p {
margin: 0;
padding: 0;
}
実際に使ってみると以下のようになります。
<div style><div class="box3">あいうえお</div>Markdownで編集している場合
最近はもっぱらMarkdown記法を使っているのですが、記事を書く際に使う上記HTMLでちょっと手こずりました。
HTML内に<p></p>を書き込むと･･･
<div class="box1"><p>テキストはここ</p></div>上記のように書くと、ボックス内の一番最後のテキストとボックスの下のラインの間に妙に大きめの空白ができてしまう。
↓
<p></p>を用いないと、変な空白もなく、デザインも崩れることもないので、<p></p>は書かずに
<div class="box1">テキストはここ
</div>divタグで囲うと無効化されてしまう
<div class="box1">テキストはここ</div>内では、「スペース2つで改行」が無効となり、テキストがずらずらと繋がった状態になります。
上記のようなコードを記事中に書き、ボックスで囲ってみて初めて知りました。 これでは、ボックスで囲みたくてもボックスが使えません。
さてどうしたものかと、検索してみたり、書き方を変えてみたりしたのですが、とりあえず一番シンプルな方法。
１．divタグの前にスペースを一つ入れる。
何もしない場合：
【記述】
<div class="box1">
テキストはここ
テキストはここ
</div>
【結果】
divタグの前にスペースを一つ入れた場合：
【記述】
<div class="box1">テキストはここ
テキストはここ
</div>
【結果】
テキストはここ
２．divタグの直前までテキストを書き込む。
【記述】
書き方は以下の通り<div class="box1">
テキストはここ
テキストはここ
</div>
【結果】
書き方は以下の通り
テキストはここ
こうすると、divタグで囲った箇所もMarkdown編集の改行が有効となります。
