はじめに // 配布テンプレ&利用規約

<< タイトル下にリンク文字列を書く。 + main + トップページでもこもこから中身がはみ出る。 >>

よくある質問集

えーコメントをつける方は最低でもよくある質問集はチェックしてください。この記事にコメントつけてるのに、ここに書いてある項目を見ていないとか???ってなってしまいます。 今後はここに書いてあるのに、っていうコメントを頂いた時はコメント数の氾濫を防ぐためにも解答後そのコメントを削除させて頂きます。


ユーザー助け合い掲示板にもあるんですが
目次の意味も兼ねて。随時追加予定。
自分のスキルを上げたい、1から身につけたいって人は
まずcss講座xhtml講座を見てください。


■基本的なことである色換えや背景、文字装飾などは下のcss。
アイコン追加、不要項目削除などはhtmlと独自タグを見てください。


■具体的カスタマイズ

スポンサーサイト

一定期間更新がないため広告を表示しています

| | Comment 0 | - |

記事タイトルと日付を横並びに

2/21追記。プロフページに弊害がでちゃうので
cssの.entry_bodyにも


clear:both;

を追加してください。


同じ行でタイトルは左に、日付は右に寄せるカスタマイズです。
実はこの手の同じ行内で違う要素を左右に分けるのって
結構面倒なんですよね。でも折角回答を作ったので
こちらにも書いてみます。
基本はflatを元にしています。
他のテンプレはご自分で調節してください。


1.htmlの書き換え


<div class="entry_date">{entry_date}</div>
<div class="entry_title">{entry_title}</div>


<div class="etitle">
<span class="entry_date">{entry_date}</span>
<div class="entry_title">{entry_title}</div>
<br class="clear" />
</div>

に書き換えます。


2.cssの書き換え
.entry_dateは


.entry_date {
font-family: "Verdana";
font-size: px;
font-weight: normal;
color: #;
margin: 15px 5px 0px 0px;
float:right;
text-align:right;
}

に。ポイントはfloatとmarginです。
marginは自分で調節してくださいね。
.entry_titleは


.entry_title {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-size: px;
font-weight: bolder;
color: #;
margin: 15px 0px 5px 0px;
float:left;
}

に。ポイントはやはりfloatとmarginです。
これらの下に下線を引きたい場合は、発想を逆転して
authorの上に線を引きます(flatの場合)


.entry_author {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-size: 10px;
font-weight: normal;
color: #;
margin: 5px 0px 15px 0px;
padding-top:5px;
border-top: 1px dotted #;
}

こんな感じですね。
marginの最初の数字は少なくしておくこと。
padding-topは線とauthorの間です。


cssに


.clear {
clear:both;
}

がない場合はこれも追加してください。
brでclearするのはスマートじゃないんですが
小学生も見るようなサイトでclearfixすすめるのは
さすがにやりすぎかなと思うので。
floatを安定させるには最初のうちは
leftとright両方指定と、clearを忘れないということを
気をつけていれば言いかと思います。


| 15:13 | Comment 11 | - |

スポンサーサイト

| 15:13 | Comment 0 | - |

Comment

あの…記事のことなのですが…
記事本文の文字を真中に寄せるのってどうやるんですか?
初歩的な質問本当にすみません。。。

| 明日香 | 2008/04/02 11:56 AM |

text-align:center;を
cssの中央寄せにしたい部分にいれてください。

| tk | 2008/04/02 12:02 PM |

できました!
ありがとうございました。

| 明日香 | 2008/04/02 12:16 PM |


私のブログはカスタマイズ用4を使っているのですが、
カスタマイズ用4でも上の方法で、日付などを
横並べにできるのでしょうか?
ぜひご解答お願いします(^ω^)

| りか | 2008/04/20 10:30 PM |

基本は同じです。
divじゃなくhタグを使っていたりしますが。
.etitleで囲んでそれぞれにfloatをかける、これだけです。

ただカスタマイズ用4は日付とauthorを一まとめにしてあるので
下に点線を引くのは大変ですね。

| tk | 2008/04/20 10:49 PM |

こんにちは
質問なのですが、
http://xxhxkxx.jugem.jp/
↑のブログだと日付とタイトルが離れています
それをなおすにはどうしたらいいですか??

| ちさと | 2008/12/07 3:41 PM |

<div class="entry_author" style="text-align:right"></div>
を削除してみたり
.entry_bodyのmarginの10pxを0pxに変更すると若干縮まるかもしれませんが
横並びの関係で完全にくっつけることはできません。

| tk | 2008/12/07 8:07 PM |

.entry_bodyってどこにあるんですか??

| ちさと | 2008/12/08 3:55 PM |

htmlとcssは最低全部見てからカスタマイズしてください。
cssにあるはずです。

| tk | 2008/12/08 4:10 PM |

日付をのけることってできますか?

| ゆあ | 2009/03/31 10:46 AM |

htmlから{entry_date}を消せばいいのでは。

| tk | 2009/03/31 11:29 AM |

Submit Comment