記事レイアウトの話 - 見出しと強調

この記事はarikaが書いています。
とりあえず私の記事で使っているレイアウトをソースコード付きで解説します。

今後もここで筆者を明記した方が良いんでしょうか。
そういう事しなくてもわかるようにした方が良い気もするんですけどね。

ドロップキャップ

個人的にドロップキャップが好きなので、プロフィール画面や音楽用ブログの方で使っていたりします。
この段落で使ってるやつ。1文字目が大きくなるレイアウト。
特に英語の文章で見る事が多い印象。
段落の区切りがとても分かりやすくなる点がメリット。
反面、見出しが作りにくいデメリットがあります。

基本的にCSSでfirst-letterを大きくして、ちょっと調整するだけ。
CSSは以下の通り。

.dropcap {
	margin-top: 1.5em;
}
.dropcap:first-letter {
	font-size: 2.9em;
	line-height: 0.9;
	float: left;
	margin: 1 .2em;
	padding: .1em 0;
}

色のせいで;が見えない
この記事では.dropcapにmargin-leftを追加しています。
これで大きさを変えて、HTMLではclass="dropcap"で段落ごとに囲む。

<div class="dropcap"></div>

cssの margin-topを変えると段落の間隔が変わる。
first-letterを変えて文字の大きさ等を変えます。

このように入力すると

>|html|
	<div class="dropcap">ドロップキャップを<br>
	確認するための文章です。
||<

このように表示されます。

<div class="text-paragraph">ドロップキャップを<br>
確認するための文章です。</div>

色のせいで文章が読めない

下線等による強調

この記事全体の見出しに使ってるようなやつ。
こことは別のページを作る時に好んで使ってます。kuro君のプロフィールページはこれを元に少し改変した物らしい。
メリットは見出しの作りやすさ。デメリットは、文章の区切り感が強すぎるので1つの見出し内だと少し使いにくい事。

CSSで、h3,h4などのHTMLの見出し要素に装飾する形です。
HTML側では見出し要素を作るだけなのでとても単純。
私は以下のような形で使っています。

h3 {
	padding: 0.25em 0.4em;
	background: transparent;
	border-left: solid 6px #333333;
	border-bottom: solid 2px #222222;
}
h4 {
	padding: 0.25em 0.4em;
	background: transparent;
	border-left: solid 3px #e6e6e6;
	border-bottom: solid 1px #e6e6e6;
}
h5 {
	padding: 0.25em 0.4em;;
	border-bottom: solid 1px #e6e6e6;
	}

適当な位置にこのコードを挿入すれば、あとは見出し要素に勝手に付くようになります。
こうすると見出しになって読みにくくなっちゃうんですけど、このコードの場合

h3のほかに

h4のバージョンと

h5のバージョン

があります。
h5はほとんど使う事がありませんが。

他に見易い表示方法があればどんどん取り入れるつもりですが、いまのところ記事のレイアウトはこの二つを使って作っています。
あとブログトップにカテゴリメニューを入れたいなと思ってたり。もうコード作ってるんですけど。
まだカテゴリが少なすぎて使えなかったんですよね