LION MEDIA 目次のテキスト位置をCSSで揃える

LION MEDIA 目次のテキスト位置をCSSで揃える

LION MEDIAのテーマを使用してブログ運営をしているのですが、目次のテキスト位置が気になったので見やすいようにCSSで揃えてみました。

目次のテキスト位置を揃えないとLION MEDIAのデザインに悪影響が出るということもない問題なのですが、個人的にどうにも気になったので試してみました。

ちょっとしたLION MEDIAのカスタマイズになるのですかね。

 

LION MEDIAの目次テキスト位置が気になる

 

LION MEDIAの目次はカスタマイズ設定することにより、投稿ページ内で表示と非表示を選べたり、ショートコードで目次自体の表示位置を決めることができるプラグインいらずの機能があります。

そして設定した目次はLION MEDIAの投稿ページの見出しで、それぞれのh2からh5までを使用した順番で目次になります。

このとき私たちが見出しにしたテキストが長い場合には、目次のテキストも長くなります。長くなる場合はLION MEDIAの目次の中でテキストは改行されることになり、2行目のテキストは目次番号の下から始まります。

 

目次テキストが長いときの改行位置が目次番号の下から始まるのが気になったのです。特にスマホ画面のときです。

 

CSSで目次をカスタマイズした場合

 

以前にLION MEDIAの目次をカスタマイズしたことがあります。そのときにカスタマイズしたCSSが目次テキストの位置を目次番号の下に改行させてしまっているのかと気になりました。

CSSを確認すると目次のテキストの位置に関係するCSSの記述をしていなかったので、以前カスタマイズしたCSS記述の目次の場合は関係なく、LION MEDIAのもともとの仕様なのだと範囲が絞れそうです。

 

目次がLION MEDIAのデフォルトの場合

 

LION MEDIAの目次がデフォルトの場合でも、私が気になる目次のテキスト位置は目次番号の下で改行してしまうのか。

LION MEDIAの目次をデフォルトに戻してから、わざと見出しテキストを長く作成して表示確認してみました。

 

 

やはりデフォルトの場合でも目次のテキストが長くなって改行した2行目からは、目次番号の下から開始されます。

 

Advertisement

 

自分で目次をCSSでカスタマイズしたことが原因ではなく、LION MEDIAの目次のデフォルトの仕様だということが分かったので、あとはCSSで目次のテキスト位置を揃えればいいだけになります。

 

LION MEDIAの目次テキスト位置を揃える

 

LION MEDIAの目次のテキスト位置を揃えるためには、目次の要素と目次テキストの要素を探し出してCSSを指定していくだけです。

先に目次のテキストが改行される位置を揃えるために記述したCSSを紹介します。

 

/*目次行揃え*/
.content .outline__link {
	display: inline-block;
	color: #191919 !important;
	text-indent: -1.3em;
	padding-left: 2em;
}
.content .outline__number{
	margin-right: 1px;
}

 

上記のCSSを書いてみました。このようにCSSを指定したLION MEDIAの目次の要素と、要素に適用するプロパティについての詳細も順番に説明していきます。

 

LION MEDIAの目次をマークアップしてる要素

 

LION MEDIAの目次のどの要素にCSSをあてているのか。

LION MEDIAの投稿ページのsectionタグにcontentクラスを付けた要素がメイン部分になっていて、メインの中で目次のリスト番号をspan要素がoutline__numberというクラスにしてマークアップしてあり、目次内で表示するテキストはa要素をoutline__linkというクラスでマークアップしてあります。

 

 

なんだかんだ要素をみていたら、どの要素のクラス名でCSSのセレクタにあてればいいのか複雑になってしまったのですが、けっきょくoutline__linkとoutline__numberの二つのクラス名あたりにCSSを記述することで目次のテキスト位置を揃えられそうです。

 

目次の要素に適用するCSS

 

先ほど調べたLION MEDIAの目次の要素に適用したCSSのセレクタやプロパティの記述を説明します。

 

/*目次行揃え*/
.content .outline__link {
	display: inline-block;
	color: #191919 !important;
	text-indent: -1.3em;
	padding-left: 2em;
}
.content .outline__number{
	margin-right: 1px;
}

 

CSSでoutline__linkをセレクタにして、LION MEDIAの目次のテキストの改行位置を揃えます。

 

Advertisement

 

目次のテキスト改行位置の調整に使用するプロパティはtext-indentです。text-indentを指定すると、目次のテキストが改行する2行目は目次番号の下からではなく、1行目のテキストが開始している下からスタートします。

このときCSSのtext-indentを指定したことによって、目次の番号とテキストが左に移動してしまいます。その場合はpadding-leftで目次の番号とテキストを右にずらすようにしました。

outline__numberは目次の番号をマークアップしてる要素ですが、番号の要素でmargin-right:1pxと微妙なテキスト位置調整をして揃えています。

このようなCSSの記述が私には精一杯でした。なんだか微妙に納得できてないんですけどね…

 

LION MEDIAの目次テキスト位置を揃えた表示

 

LION MEDIAの目次のテキスト位置を揃える要素を特定してCSSを記述し、適用した表示を特にテキストの改行されることが多いスマホで確認したところ以下の画像のように仕上がります。

 

 

以前にLION MEDIAの目次を少しだけデザインし直した状態のままでテキスト位置を揃えています。目次のテキストを揃えることで目次がみやすくなりました。

今回はCSSで目次のテキストを揃えるための微調整が難しいというか、目次のテキストになる文字によって微妙な位置ズレがあったり、h2とh3の目次では若干のズレが生じたりすることがあったので、それぞれで微調整するなりLION MEDIAの目次の違う要素にCSSを指定したりなどを試しながらベストな配置にするのが良いかと思います。

WordPressテーマカテゴリの最新記事