さてさてこれでようやく最終回（のはず）。問題は小説掲載ページのタイトル表示。たとえば、「本館閲覧室」なんかを御覧いただければ分かるとおり、ページタイトルは左寄せなんですよ。本来は黒に近いグレーの背景色に白抜き文字で表示されていたんです。なおかつタイトルの上に表示されるラインがけっこう派手な赤色でしたので、なんとなく「キツい」印象を与える色使いでした。
そういう色使いって動画や画像をメインに据えるならすごくスタイリッシュに見えそうなんですが、私はテキストがメインなのでもう少し目に優しい色使いをしたかったんです。まあ余計な話はさておき、このタイトル部分、小説ページ限定でもう少しフォントを小さくしてセンタリングしたいと思いました。結構長いタイトルつけちゃったりするんですよ。そんなわけで、デフォルトのCSSをまねしつつ変更を加えました。
.page-template-novel-php .page-title {
font-size: 20px;
font-size: 1.25rem;
color: #000;
padding: 10px;
padding: 0.625rem;
margin-bottom: 20px;
margin-bottom: 1.25rem;
background: #fff;
text-align: center;
display: inline-block;
}
こんな感じで、「text-align: center」と指定してタイトルだけセンタリングさせようとしたんです。ところが･･･なぜか何をやってもセンターにならない！ 試しに「margin-left:auto;」と「margin-right:auto;」と入れてみたけれど、さっぱりセンタリングできない。
どうやら「inline-block」というものが通常の方法でセンタリングできない原因のようなんですが、難しいことは分からないorz このタイトル部分全体がひとつのブロックのような扱いになるので、横幅を指定してやらないとセンタリングしないようなんですよ。とはいえ、この疑似ブロックはタイトルの長さに応じて変化してくれるわけで、上の指示でもブロック内のテキストはブロック内でセンター表示はされている。
これは、わざと背景色を#666にして、paddingやmarginを変えて確かめてみた。つまり、ブロック内部でセンタリングはできるが、ブロックそのものの幅を指定しない限り、上記の方法でブロック自体はセンタリングできない。ブロックの幅を変更可能な状態にしておいて、かつページ内でセンタリングさせるって方法を模索しなければならないってことです。う～ん難しいぞ。
で、結局どうしたかというと･･･タイトル部分のテキストは黒、背景は白にするつもりなんです。だから、ブロックがどんな姿をしていようと、テキスト部分がページの中央に配置されているように見えればOKなんです。これはドシロート的な応急処置なので、たぶん本来なら選ぶべきではない方法だと思います。苦肉の策で、ブロックの領域をコンテンツ幅いっぱいに広げてしまいました！ ハハハハハハ。
あ、でもwidthを100%にしてしまったら、枠線が侵食されてしまったので、97%にとどめました。コンテンツ幅いっぱいにブロック要素を広げてしまったので、その中でセンタリングするテキストは、当然ページ内でセンタリングしてくれています。手段はともかく、結果は希望どおりなので結果オーライということにしてしまいます。と、いうわけで、最終的にタイトル周りの指定は以下のようになりました。
.page-template-novel-php .page-title {
font-size: 20px;
font-size: 1.25rem;
color: #000;
padding: 10px;
padding: 0.625rem;
margin-bottom: 20px;
margin-bottom: 1.25rem;
background: #fff;
text-align: center;
display: inline-block;
width: 97%;
}
とりあえず、CSS編集に書いてページレイアウトが希望どおりに変化してくれたので問題ないんでしょう。後ほどCSS編集に書いたものは消去して、子テーマのCSSの方にコピペをしておきましょう。やった～！ とうとう完成した！！！