今回は見出し用のデザインを使ってみたいと思います。
参考にした記事はこちら！
はてなブログの見出しは
大見出し、中見出し、小見出しの3つですね。
見出しに設定できるデザインはそれぞれ1個ずつ。
「カスタマイズ」画面のデザインCSSに貼り付けると左上の見出しボタンから簡単に使えるようになります。
最初からあるCSSのコードの下に、まずリセットのコードを貼り付けます。
.entry-content h3 {
border: none;
background: none;
}
次に使いたいデザインのコードを貼り付けます。
大見出しがh3、中見出しがh4、小見出しがh5に対応しているので、
h3の部分を変更することでそれぞれのデザインを適応させることができます。
・下線
下のコードをデザインCSSに貼り付けると、大見出しにこのデザインが適用されます。
.entry-content h3 {
border-bottom: 2px solid #333;
padding: 0.5em 0;
}
HTML画面に貼り付けて使うなら、こちら↓
<div style="border-bottom: 2px solid #333;
padding: 0.5em 0;">タイトル</div>
もうちょっと線を太くしてみます。
2pxを5pxに変更するとこんな感じになります。
HTML編集画面に貼り付けるコードはこちら↓
<div style="border-bottom: 5px solid #333;
padding: 0.5em 0;">タイトル</div>
・上下線
デザインCSSに貼り付けるコードはこちら↓
.entry-content h3 {
border-top: 2px solid #333;
border-bottom: 2px solid #333;
padding: 0.5em 0;
}
HTML編集画面に貼り付けて使うならこちら↓
<div style="border-top: 2px solid #333; border-bottom: 2px solid #333;
padding: 0.5em 0;">タイトル</div>
・上下破線
.entry-content h3 {
border-top: 2px dashed #333;
border-bottom: 2px dashed #333;
padding: 0.5em 0;
}
HTML編集画面に貼り付けて使うならこちら↓
<div style="border-top: 2px dashed #333; border-bottom: 2px dashed #333;
padding: 0.5em 0;">タイトル</div>
次に２重線を作ろうとしたけどなぜか２重線ではなく1本の線になってしまいました。
うーむ？
色の指定が3桁だからかな？
と思ったけど違いました。
じゃあ線の太さを変えてみる？
と思って2pxから5pxに変更したら２重線になりました。
細すぎて1本にみえちゃってたのかな？
・上下２重線
たぶんこれでいけるはず・・・
.entry-content h3 {
border-top: 5px double #323443;
border-bottom: 5px double #323443;
padding: 0.5em 0;
}
HTML編集画面に貼り付けて使うならこちら↓
<div style="border-top: 5px double #333; border-bottom: 5px double #333; padding: 0.5em 0;">ここに文章</div>
色を変えてアレンジしてみます。
・２重線背景色つき
モノトーン
<div style="background: #dddddd; border-top: 5px double #888888; border-bottom: 5px double #888888; padding: 0.5em 0;">ここに文章</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
ピンク系
<div style="background: #fef4f4; border-top: 5px double #e3adc1; border-bottom: 5px double #e3adc1; padding: 0.5em 0;">ここに文章</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
黄色系
<div style="background: #ffffef; border-top: 5px double #ffd700; border-bottom: 5px double #ffd700; padding: 0.5em 0;">ここに文章</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
オレンジ系
<div style="background: #fff7ef; border-top: 5px double #ffa500; border-bottom: 5px double #ffa500; padding: 0.5em 0;">ここに文章</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
緑系
<div style="background: #efffef; border-top: 5px double #a5c9c1; border-bottom: 5px double #a5c9c1; padding: 0.5em 0;">ここに文章</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
紫系
<div style="background: #f7efff; border-top: 5px double #d1bada; border-bottom: 5px double #d1bada; padding: 0.5em 0;">ここに文章</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
ちなみに文字をタイトルっぽく真ん中に持ってきたい場合は、
text-align: center;
を追加します。
<div style="text-align: center; background: #dddddd; border-top: 5px double #888888; border-bottom: 5px double #888888; padding: 0.5em 0;">ここに文章</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
文章の長さに合わせたい場合は、
display:inline-block;
を追加します。
<div style="display: inline-block; background: #dddddd; border-top: 5px double #888888; border-bottom: 5px double #888888; padding: 5px;">ここに文章</div>
デザインCSSに貼り付けてカスタマイズすれば見出しとして使えるし、定型文として登録しておけば見出しっぽい枠として使えそうですね！
アレンジバージョンをデザインCSSに貼り付けて使いたい場合は、
.entry-content h3 {
border-top: 5px double #323443;
border-bottom: 5px double #323443;
padding: 0.5em 0;
}
上のコードの赤い部分を
<div style="background: #fef4f4; border-top: 5px double #e3adc1; border-bottom: 5px double #e3adc1; padding: 0.5em 0;">ここに文章</div>
下のコードの青い部分に入れ替えればいけるはず。
ためしにやってみました。
中見出し！
ばっちり成功です。
