人気ブログランキング |
TOTAL YESTERDAY TODAY
名刺交換ブログトップ
タイトル: 2005年 11月 14日 ( 1 )
2005年 11月 14日
タイトル: 記事の日付とタイトルを中央寄せ。
今回、彼女さんのブログのスキンをいじっていて、記事の日付とタイトルを中央に寄せるということが出来ましたので、皆さんにもお知らせしたいと思います。
それでは早速説明に入りたいと思います。

今回、記事が長くなりましたので、記事内にリンクを貼っています。ご活用ください。

記事のタイトル部分を中央寄せ。
記事の日付部分を中央寄せ。

タイトル部分。
まず、HTML編集の領域を本文に合わせてください。
そして、次に↓の部分が見つけられるかと思います。(もしかしたら若干違うかもしれません)

<tr><td width="80%"><$postsubject$></td>
<td width="20%" align="right"><$postadmin type=1$></td></tr>


たぶん、初期の状態だとタイトルの日付の色とかは自分でいじれないようになっているかと思います。記事の日付の設定はは<$postsubject$>というタグに入っています。そこでこれにこのように付け加えてください。

<DIV CLASS=POST_TTL><$postsubject$></DIV>


すると、これで自分で記事の日付などをいじれるようになります。
CSSにも同じ用に↓がありますので、この中身を変えると記事の日付部分を自由に変更することが出来ます。

DIV.MNTTL
{
TEXT-ALIGN : CENTER;
WIDTH : 150PX;
BORDER-BOTTOM : 1PX #AAA SOLID;
PADDING : 2PX 0PX 0PX;
MARGIN : 25PX 0PX 10PX;
}


中央寄せにしたいので、TEXT-ALIGN : CENTER;を追加しました。

これでOK!!と思った人がいるかもしませんが、実際に保存してみて見てみるとおかしくなっているのに気づくと思います。そうです、ちゃんと中央に寄っていないのです。それはなぜかというと、HTMLがわかる方は気づくかもしれませんが、ここではそれには詳しく入りません^^;;それを語っていると記事が長くなりまくりなので(すでに長すぎというのは禁句です。)

<tr><td width="80%"><$postsubject$></td>
<td width="20%" align="right"><$postadmin type=1$></td></tr>


さっき見つけた↑のタグを↓の様に変更してみてください。するとうまくいくはずです。

<DIV CLASS=POST_TTL><$postsubject$></DIV>
<div align="right">$postadmin type=1$></div>
</tr>


日付部分。
次に、記事の日付部分を中央寄せにしたいと思います。
やはり、タイトルの時と同じようにHTMLの変更領域を本文に設定してください。
すると↓の様な所が見つかると思います。

<DIV CLASS=POST_TOP><$postdate$></DIV>


記事の日付は<$postdate$>の部分ってのがわかりますね。
そして、その設定は、<DIV CLASS=POST_TOP>~</DIV>で行われているのがわかるかと思います。CSSに同じく↓のがあると思います。

DIV.POST_TOP
{
TEXT-ALIGN : CENTER;
BORDER : 1PX SOLID #D0D0CC;
PADDING : 2PX 15PX 1PX;
MARGIN-BOTTOM : 5PX;
FONT-FAMILY : VERDANA;
LETTER-SPACING : 2PX;
COLOR : #727272;
}


中央寄せにしたいので、TEXT-ALIGN : CENTER;を追加しました。

かなり長くなってしまいましたが、またわかりにくいところがありましたらコメントにお書きください^^;;

※HTMLやCSSを大きく変更する場合はテキストファイルなどにバックアップを取っておいたほうが後々良いかと思います。
by butyo_1280 | 2005-11-14 14:13 | 記事関係


        
Banner
チカさん作
↓画像提供↓
HEAVEN'S GARDENさん         
by butyo_1280