見出しが複数行になった場合の見栄え改良 - 3rd(2) - Bloggerの記事に目次をJavaScriptで自動的に付与する

3rd シリーズによって実現される目次

イントロダクション

この記事は「そうだ！Bloggerの記事に目次を付けよう！」から始まる一連の「Bloggerの記事に目次をJavaScriptで自動的に付与する」シリーズの構成記事です。
（3rd シリーズ）

記事一覧は「Bloggerの記事に目次をJavaScriptで自動的に付与する - サポートページ」よりどうぞ。

3nd シリーズでは、2nd シリーズで作成した目次機能に対して、実際に使ってみて改善した方がよい点を改善していきます。

3rd シリーズの前回の記事は「全体的なフィードバック - 3rd(1) - Bloggerの記事に目次をJavaScriptで自動的に付与する」です。

今回の目的

2nd シリーズの成果物のスタイルシート(CSS)に対して、今まで使ってきた中でのフィードバックを適用します。

CSS の改善

見出しが長文の場合の、折り返しの見栄えを良くする

2nd シリーズのスタイルシートでは、見出しが長文の場合に折り返しされて複数行になった場合には、折り返し行が見出しの頭よりも前に来てしまいました。

見出しのテキストが長文の場合

見出しが折り返されるが、目次の先頭から折り返しが行われるため、
見づらい

そのため、とても見づらくなっていました。
そこで、スタイルシートを改良し、見出しが長文のため複数行に折り返された場合、2行目の先頭は1行目よりも一文字分右側へインデントした部分から始まるようにしました。

見出しのテキストが長文の場合(改良後)

見出しの折り返しが、最初の行よりも字下げされているため、
見やすい

改良後のスタイルシート

改良後のスタイルシートを以下に示します。
（なお、今回のシリーズのすべての修正・改良を行った配布用のコードは、3rd シリーズの最後のページにて、公開します。）

#auto-generated-index_title 
{
    border-style:solid;
    border-width:1px;
    border-color:#999999;
    background-color:#eeeeee;
    font-weight:bold;
    margin:10px 20px 0px 20px;
    padding: 0px 0px 0px 8px;
}
#auto-generated-index_content
{
    border-style:solid;
    border-width:1px;
    border-color:#999999;
    background-color:#ffffff;
    font-weight:normal;
    margin:0px 20px 20px 20px;
}
#auto-generated-index_content_h1
{
    text-indent:-1em;
    padding-left:1em;
    margin-left:1em;
}
#auto-generated-index_content_h2
{
    text-indent:-1em;
    padding-left:1em;
    margin-left:2em;
}
#auto-generated-index_content_h3
{
    text-indent:-1em;
    padding-left:1em;
    margin-left:3em;
}
#auto-generated-index_content_h4
{
    text-indent:-1em;
    padding-left:1em;
    margin-left:4em;
}
#auto-generated-index_content_h5
{
    text-indent:-1em;
    padding-left:1em;
    margin-left:5em;
}
#auto-generated-index_content_h6
{
    text-indent:-1em;
    padding-left:1em;
    margin-left:6em;
}
#auto-generated-index_help
{
    float:right;
    font-weight:bold;
    border-width:1px;
    border-style:solid;
    width:1em;
    text-align:center;
}

改良後のスタイルシートのポイント

text-indent, padding-left, margin-left の設定値によって、この「見出しが長文のため複数行に折り返された場合、2行目の先頭は1行目よりも一文字分右側へインデントした部分から始まる」動作を実現しています。

text-indent にマイナスの値(-1em)を指定することで、1文字分先頭行の開始を左側にずらしています。

そして、1行目の開始が1文字分左側にずれているために、padding-left に 1em を指定することで、見出しの行全体を 1 文字分右にずらしています。

そして、見出しのレベルに応じて、そのレベル分文字を右にずらすことで、目次の階層的な表現を実現しています。

まとめ

以上で、前回の2nd シリーズのスタイルシートをいままで使ってきた中で見えてきた点の、スタイルシートへの反映は終了です。

以上で、3rd シリーズの改良は以上です。

次回では、3rd シリーズで行った改良点をまとめた「完成コード配布」を行います。

「Bloggerの記事に目次をJavaScriptで自動的に付与する」シリーズ　記事一覧へ

Dr.ウーパのコンピュータ備忘録

2015年2月21日土曜日