世界の端っこ行き止まり (現在実験中)

久しぶりのシリーズですが、今日は記事の横幅等を変えていきます

XIV.改造７…記事スタイルの変更
前回は画像の横幅を新規のblogの横幅に併せて改造する所までいきました。

このままですと記事の文字が並んでいる部分の左右の余白が大きなまま。
まず、今日はここをどうにかしたいと思います。

まずはblogをブラウザで表示して記事を画面に出します。
そして、好例の「ソースを開く」でhtmlソースを呼び出します。

今回調べるのは記事の表示部分です。
記事を囲んでいるタグはすぐ見つかると思います。
<div class="entry_text">
こいつですね。

使用している宣言の名前はこれでわかったので、
その宣言の本体をスタイルシートの方で探してみましょう。
.entry_text {
width:390px;
/* 他のは省略 */
}
横幅の宣言がされていますね…しかも390ドット。
記事の領域のサイズを以前増やしていますので、ここにも同様に加算を行いましょう。
ついでに同類のほかの部分も。
390px と書かれた部分は全て 570pxに書き換えです。
（都合３箇所あります）

これで記事表示部分に実際に表示される記事の文字列が以前より
きちんと表示される事になります。



では、ついでにもう１箇所なおしましょう。
記事１件だけ表示する際、コメントを書き込む領域が表示されます。
が
入力に使う入力ボックスが、小さいなぁとは思いませんか？
名前、Email、URLの処はまぁいいとしても、
記事を書く所はこれでは小さすぎます。
せっかく表示の横幅を伸張したのにこれではもったいない。

というわけで、この入力ボックスも大きくしちゃいましょう。
ではいつも通り「ソースを開く」で該当部分を探しましょう。
さて、この複数行記入できる入力ボックスですが、<textarea>というタグを
使用して表示しています。
つまり、この"textarea"という文字で検索すれば１発で見つかるわけです。

でそれがこの行。
<textarea name="comment" rows="10" style="width:300px"></textarea><br/>

なんかそのまま横幅が記入されていますね…。
こんなのテンプレート直接弄るの面倒だから、スタイルシートファイルの方で
宣言しておいて貰いたいもんなんですけどねぇ…。

でもまぁ仕方ないので、１記事テンプレートを修正する事にしましょう。
過去の作業で１記事テンプレートは既にファイル化されているはずですので、
この部分の300pxを適当に数増やしてみましょう。
ちなみに私は180足して480にしてみたけど不満だったので600にしてみました。
かなり横に広く入力できるようになりました。


これで、殆ど見た目的に特に目に付く部分でありゃーん？ってのは無くなったかな？
と思います。
殆ど完成。

次回は仕上げです。