次は見出しを作ってみる。ちなみに小説家になろうで見出しを作る場合は見出しタグでは装飾をいちいち打ち消さないといけないでdivを使います。

さて、次は見出しです。

見出しは本来h1, h2, h3を使うのですが、小説家になろうでは制限が多いためdivを使って見出しを作ります。

え？　さんざんHTMLは文書構造を表すためだと行っておきながら無視するのか。と思えるかも知れません。

まぁ、普通のHTML/CSSではそうなのですが、なろうの装飾で考えるとhは使わない方がいろんな意味で楽です。

hタグを使ったら幅が広がらないと行った方が正しいかも。まぁ使ってもいいんだけど、文書構造的にややこしいのでやらないです。思考放棄。タグの使い分けをすると混乱しがちなので。（自分が）

楽するために使います。（これ大事）

どう面倒なのかというと、なろうのhタグはPCとスマホで適用されるCSSが異なります。デフォルト設定で使用すると、使い勝手が非常に悪いのです。

使うためには打ち消したり、変更しないといけないので。デフォルトではこんな感じです。

・スマホ版の初期CSS

h2 {

clear: both;

padding: 5px 5px 5px 15px;

font-size: 85%;

font-weight: bold;

color: #ffffff;

background: #333333;

border-bottom: 1px solid #aabbbb;

line-height: 170%;

}

h3 {

margin: 0px 0px 5px 0px;

padding: 5px 5px 5px 10px;

font-size: 85%;

font-weight: bold;

color: #666666;

background: #e6f0f6;

clear: both;

border-bottom: 1px solid #aabfbb;

}

みての通り、大量にCSSが設定されてますね。h2とh3で分けないにしても、margin、padding、border、font-size、background全部打ち消さないといけないのです……特にborderがうざいです。

・PC版はこんな感じ

h2 {

margin: 0px 0px 5px 0px;

padding: 5px;

font-size: 115%;

color: #333333;

border-top: 1px dotted #003366;

border-bottom: 1px dotted #003366;

background: #eef3f6;

}

h3 {

margin: 0px 0px 5px 0px;

padding: 5px;

color: #555555;

background: #f3f3f3;

}

スマホよりかかっている装飾は少ないですが、スマホ版とも合わせないといけないので打消しは必須ですね。

- - - ✂切り取り✂ - - -

さて、hタグの代わりにdivタグを使う言い訳が終わったので早速作っていきます。

今回作るのは

・シンプル

・下線

・マーカー

・上下線

・枠線

・左線

・付箋

・刺繍

・グラデーション

こんな感じになります。

今回はこれらの作り方と改造の仕方を説明していきます。

気に入ったものがあれば是非改造してみてくださいませ。

- - - ✂切り取り✂ - - -

・共通設定

まず共通で使う部分の説明ですね。

見出しは他の文章と区別するために、文字を大きくしたり、線を引いたり、太字にしたり、色を変えたり、背景色を変えたりします。

それは見出し全般に言えることです。そこで設定するのは

color: -文字色の変更

background:　-背景色の変更

font-size:　-文字サイズの変更

font-weight:bold;　　-太字に変更　※なくても可

text-align:　-位置ぞろえを指定　※左揃えの場合はなくても可

この中でも文字サイズと太字は付けておくといいでしょう。

文字サイズは通常の文書よりも大きめに設定するといいと思います。通常1.2～2倍程度にすると目立つかと思います。

相対的に設定すると

font-size:1.5em; ※基準より1.5倍の大きさ

絶対値で設定すると

font-size:20px; ※基準が14pxくらいなので1.5倍だとこれくらい

サイズは画面を見ながらでいいと思います。

大見出し、小見出しと分けるのもOKです。その場合はサイズを3段階にするといいかと思います。

なお、全体にスキンを適用しない場合は、

line-heightを指定してください。指定しないと2段になった時、PC版読者ページで行間が詰め詰めになります。

まぁ、短文見出しだけなら困ることはないのでなくても大丈夫なことが多いです。長文見出しを作るときは注意してください。

- - - ✂切り取り✂ - - -

それではそれぞれ説明です。

・シンプル

文字サイズ、文字太さ、文字色、背景色、位置ぞろえ等を指定します。

例：

<div style="font-size:20px;font-weight:bold;">シンプル見出し</div>

色を付けたい場合+中央寄せ

<div style="color:#ffffff;background:#18b7cd;font-size:20px;font-weight:bold;text-align:center;padding:5px;">シンプル見出し</div>

背景色を使う場合はpaddingを入れます。余白がないとあまりきれいにならないので、文字サイズの1/4~1/2程度の余白を入れるといいでしょう。

ホントにシンプルにする場合は文字サイズだけの変更でいいと思います。

- - - ✂切り取り✂ - - -

・下線

border-bottom:を指定します。

<div style="font-size:20px;padding:5px;font-weight:bold;border-bottom:1px solid #000000;">下線見出し</div>

border-の種類や太さ、大きさを変えると差別化できます。paddingはなくてもいいですが、余白を入れておく方がキレイに見えます。

- - - ✂切り取り✂ - - -

・マーカー

背景を下半分くらい色を変える用にするとマーカーっぽい感じになります。

普通のCSSだと linear-gradientでマーカー風にするのですが、活動報告ではこのプロパティは使えません。

またborderを使ってもpaddingは正の値しか受け付けてくれないので、必ず文字の外側に入ります。

なので、ボックスを二つ並べて片方のボックスのmarginを-にすることで実現します。

<div style="font-size:20px;line-height:1;font-weight:bold;">マーカー見出し<div style="margin-top:-10px;background:#ffff00;font-size:10px;">　</div></div>

ここでのポイントは2つ目のボックスに全角スペースを入れることです。そうでないと背景色が反映されません。

margin-top:-10px;

font-size:10px;

でマーカーの位置とマーカーの幅を設定しています。この場合は文字の半分が埋まるように指定しています。

2つ目のbackgroundでマーカー色を変えています。マーカーっぽい色を選ぶとよいでしょう。

ただし、これは無理やりマーカーっぽい感じに見せているだけで、制限があります。

２段に分かれる場合は、一番下の行しかマーカーっぽい感じになりません。

なるべく短文で使用することをお勧めします。

なお、1つ目のボックスの背景色を指定すると2つのカラーにすることもできます。

<div style="font-size:20px;line-height:1;background:#ff0000;font-weight:bold;">マーカー見出し<div style="margin-top:-10px;background:#ffff00;font-size:10px;">　</div></div>

計算が面倒ですが、margin次第でグラデーションも実現可能ですね。（超絶面倒ですが）

- - - ✂切り取り✂ - - -

・上下線

border-bottom

border-top

を指定して上下に線を付けています。

<div style="font-size:20px;padding:5px;text-align:center;font-weight:bold;border-bottom:1px solid #000000;border-top:1px solid #000000;">上下見出し</div>

paddingを指定するとキレイに見えます。text-align:center;を指定して中央寄せにしておくと見出しっぽく見えます。

border-bottom、border-topの線幅、線種類、線色を変えるとオリジナル感が出ます。

背景色を変えてもいいかもです。

- - - ✂切り取り✂ - - -

・枠線

boldを全体に指定しています。

<div style="font-size:20px;padding:5px;text-align:center;font-weight:bold;border:1px solid #000000;">枠線見出し</div>

上下左右で違うborderスタイルを設定するのもいいでしょう。

- - - ✂切り取り✂ - - -

・左線

<div style="font-size:20px;padding:5px;font-weight:bold;border-left:5px solid #000000;">左線見出し</div>

border-left:で左側だけ線を付けています。

なお、通常の線より太くしておくとより目立ちます。5px~10pxにしておくのもいいかと。

- - - ✂切り取り✂ - - -

・付箋

<div style="font-size:20px;padding:5px;font-weight:bold;border:1px solid #000000;border-left:5px solid #000000;width:75%;">付箋見出し</div>

左線の応用です。

全体を細線で囲い、あとからborder-leftだけ再設定しています。

width:75%;で全体幅の3/4の幅になるように指定しています。

ここの幅を変えてもいいかと思います。

<div style="font-size:20px;padding:5px;font-weight:bold;border:1px solid #000000;border-left:10px solid #000000;width:50%;">付箋見出し</div>

<div style="font-size:20px;padding:5px;font-weight:bold;border:1px solid #000000;border-left:10px solid #000000;width:75%;">付箋見出し</div>

<div style="font-size:20px;padding:5px;font-weight:bold;border:1px solid #000000;border-left:10px solid #000000;width:90%;">付箋見出し</div>

それぞれ50%, 75%, 90%にしています。

枠線色を変えることで色とりどりの付箋になります。

- - - ✂切り取り✂ - - -

・刺繍

<div style="padding:5px;background:#ff9999;"><div style="color:#ffffff;padding:5px;background:#ff9999;border:2px dashed #ffffff;font-size:20px;font-weight:bold;text-align:center;">刺繍風見出し</div></div>

結構人気なのが刺繍風の見出しです。

通常は、box-shadow: プロパティを使って、外側の塗りつぶしを行うのですが、活動報告では使えないので、二重ブロックにして実現しています。

外側のブロックと、内側のブロックの背景色を合わせることがコツです。外側のブロックのpaddingで外幅を決定しています。

内側ブロックの;border:はdashedにして破線を引いています。

文字サイズと背景色、枠線色を色々と変えることで自分なりの見出しができると思います。

淡い色合いにすると可愛く仕上がります。

- - - ✂切り取り✂ - - -

・グラデーション

最後にグラデーションです。

通常はグラデーションもlinear-gradientプロパティを使って実現するのですが、活動報告では使えません。

ではどうするか。

力技です（力こそパワー）

一文字ずつ色をspanで指定します（白目）

<div style="font-size:20px;font-weight:bold;"><span style="color:#e2eaf1;">グ</span><span style="color:#c7d5e2;">ラ</span><span style="color:#aabfd5;">デ</span><span style="color:#8daac7;">ー</span><span style="color:#7295b8;">シ</span><span style="color:#5580aa;">ョ</span><span style="color:#476a8d;">ン</span><span style="color:#385572;">見</span><span style="color:#2b4055;">出</span><span style="color:#1d2b38;">し</span></div>

<div style="font-size:20px;font-weight:bold;"><span style="color:#6a1515;">グ</span><span style="color:#8d1d1d;">ラ</span><span style="color:#b12323;">デ</span><span style="color:#d52b2b;">ー</span><span style="color:#dc4e4e;">シ</span><span style="color:#e27272;">ョ</span><span style="color:#ea9595;">ン</span><span style="color:#f1b8b8;">見</span><span style="color:#f8dcdc;">出</span><span style="color:#fceded;">し</span></div>

<div style="font-size:20px;font-weight:bold;"><span style="color:#edfced;">グ</span><span style="color:#dcf8dc;">ラ</span><span style="color:#b8f1b8;">デ</span><span style="color:#95ea95;">ー</span><span style="color:#72e272;">シ</span><span style="color:#4edc4e;">ョ</span><span style="color:#2bd52b;">ン</span><span style="color:#23b123;">見</span><span style="color:#1d8d1d;">出</span><span style="color:#156a15;">し</span></div>

こんな感じですね。

<span style="color:;">

で色を変えています。ちなみにborder-bottomとか使えば下線のグラデーションも可能です。

ちょっとずつ色を変えていくのが面倒なのであまりやりたくはないですが……

まぁプログラムを作れば楽になりそうですけど。

それよりも文字数を大量消費してしまうのが厄介なところです……。

ご利用は計画的に

- - - ✂切り取り✂ - - -

なお、スキンの時と同じで背景画像を使うこともできます。

<div style="font-size:20px;padding:5px;font-weight:bold;border-bottom:1px solid #000000;background-image:url(https://22980.mitemin.net/userpageimage/viewimage/icode/i480876/);background-repeat:">背景画像見出し</div>

background-image:url

で好きな背景を指定してください。

テクスチャみたいなものを作れば、オリジナル感がでますね。

- - - ✂切り取り✂ - - -

ということで見出しでした。

色々と試してみてください。