またまたサイト改造記録を。そうそう、前回忘れていたけれど、リンク部分の色もも変更しておこう。既に訪れたリンクは色を変えておいた方がわかりやすい。
リンク部分の色を変更
a:visited { color: #cc0099; font-style: italic; }
a:active { color: #007b43; }
さて、ここからが難関。前回失敗したページのセンタリングだ。前回の失敗は私の知識不足で、ボックスの概念や、パディング、マージンなどがどこの余白を指すのかしっかり理解できていなかったことに起因する。そのせいで、ページそのものではなく、テキストがセンタリングするという情けない事態に陥ったのだった。
さてさて、さっそくページのスタイルが書かれている場所を探そうとしたんだけど･･･肝心のposts／pagesという部分には記述がない！ よくよく頭から見ていくと、冒頭付近にstructureという項目があって、ここでテーマの全体的な基本設定を指定している。パディングやマージン、フォントやフォントサイズはここで一括指定されているっぽい。足らぬ頭を駆使して読み解いていくと、containerにwidth：980pxという表記を発見。その近辺を見ていくとcontentが620px、sidebarが300px、それぞれの余白（パディング）が20pxということが分かった。つまりコンテンツ部分、作品をアップして表示するための部分は現状のままだと620pxということになる。もう少し横幅を広げてもいいと思うけれど、さてどれぐらいにしよう？
迷った末に、コンテンツ部分をきりのいい700、左右の余白を140とすることにした。「ことにした」のはいいんだけど･･･この場合、小説表示用固定ページ限定でcontainerが980px（デフォルト）、wrapperのpaddingが左右140px（デフォルトだと上下左右ともに20px）、contentが700pxという指定ってできるんだろうか？ さらに作品部分をborderで囲んで表示したいから、contentを680px、paddingを10pxと指定したいんだけど･･･。
まず何よりもこのページにnovelというクラス名を賦与するなりして、通常のpageとは違うものだと認識させなければならないんだけど、どうすればいいんだろう？ body class関数はもともとheader.phpに記述されているんだけど、新たなクラスをつけることはできるんだろうか？ よくよくcssを見ていくと、既にwrapperやcontainerというクラス名が存在していて、それで幅や余白が一括指定されているので、新しくnovelっていうテンプレートを作ってもそれらに改造を及ぼすことは難しそうに見受けられる。う～む。
page-novel専用スタイル
.container { width: 980px; margin: 20px auto 0; position: relative; -webkit-box-shadow: 0 0 5px 1px #a8a8a8; -moz-box-shadow: 0 0 5px 1px #a8a8a8; box-shadow: 0 0 5px 1px #a8a8a8; }
.wrapper { padding: 20px 140px; background: #fff; }
.content { width: 680px; overflow: hidden; padding: 10px; border: 2px groove #666; }
.page-title-top, .subheading-top { border: none; }
.page-title { font-size: 24px; font-size: 1.5rem; color: #000; padding: 10px ; padding:0.625rem ; margin-bottom: 20px; margin-bottom: 1.25rem; background: #fff; display: inline-block; text-align: center; }
試しに上記をcss編集に書き込んでみたら、（当然だけど）全ページに適用されてしまった。とほほほほ･･･。前回と全く同じ所でつまづいてる。ダメじゃん私orz
（残念ながら）次回に続く･･･（いや、続きたくないんだけど。いいかげんパシッと改造を終了したい）。
了子