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

<< テンプレ著作権の問題 + main + メニュー画面を作りたい >>

よくある質問集

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


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


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


■具体的カスタマイズ

スポンサーサイト

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

| | Comment 0 | - |

真ん中寄せ

cssでの真ん中寄せは主に二つの記述で行います。
1つはtext-align:center;
もう1つはmargin:0 auto;
この二つで多分メジャーなブラウザは全て
中央寄せになるはずです。あんまり古いのは知らない。


1.まず真ん中寄せにしたいブロックを判断します。
 多くのテンプレは#layoutが
 全体を囲んでいるんじゃないでしょうか。


2.body に
 text-align:center;の行を追加します。


3.真ん中寄せにしたいブロックに
 margin:0 auto;とtext-align:left;を追加します。


完了!


仕組みを説明すると
普通のブラウザはmargin:0 auto;
で真ん中によります。autoが左右を同じだけあけてね
ってことです。0は上下。
でもこれだけだとIE6とかが中央寄せにしてくれないので
その親ブロックにtext-align:center;を書き
何故かこれで中身のブロックが中央寄せになる現象を
利用します。ただこれだと#layout内の文章も
中央寄せになっちゃうのでtext-align:left;
も書くわけです。簡単ですね。

| 18:02 | Comment 18 | - |

スポンサーサイト

| 18:02 | Comment 0 | - |

Comment

再び質問させていただきますッ@

今気がついたら微妙にタイトル画像や記事部分のラインとか
いろいろ左によってますよね...?
真ん中よせ(レイアウト)してるんですけど....。

どうしたら改善できますか?

| | 2009/04/28 4:06 PM |

wrapperのwidthが大きすぎる。
ちゃんと左と右と真ん中の数字を足したくらいにしてください。

以下の記事を参考にすること。
http://nous.jugem.jp/?eid=77

| tk | 2009/04/28 4:40 PM |

今、記事を タイトルを消して日付だけ表示するようにしています。
日付を中央に表示させたいのですが、
どこにmargin:0 auto;やtext-align:center;をいれたらいいのか
わかりません;;
flatです

| mai// | 2009/06/01 9:49 PM |

日付はhtmlで
<div class="entry_date">{entry_date}</div>
ってなってるところです。だからcssの.entry_dateにtext-align:center;

| tk | 2009/06/01 9:55 PM |

っと、マルチポストはお行儀悪いですよ。
向こうで回答がついてるんですから、ちゃんとお礼なり断りなり言うように。掲示板のマナーの一つです。

| tk | 2009/06/01 9:56 PM |

ありがとうございます!早速やってみたのですが、
なりませんでした;;
どこか変なところがあるのでしょうか??
http://x-pixy.jugem.jp/?tid=23

| mai// | 2009/06/01 10:00 PM |

どっから突っ込めばいいんだ。
これはflatじゃないです。plain。見た目は同じでも作りが全然違います。

htmlの
<span class="entry_date">2009.05.31 Sunday</span> <!--エントリ日時-->


<h3 class="entry_date">2009.05.31 Sunday</h3> <!--エントリ日時-->
に書き換え。
spanはインライン要素だからtext-alignの意味がありません。

あと、1つ前のレスを読みましたか?
このブログは複数の掲示板に同じ質問を投稿する行為(マルチポスト)を禁止しています。
phenom2さんに大変失礼な行為ですよ。
礼儀を守れないなら次は答えないのでそのつもりで。

| tk | 2009/06/01 10:10 PM |

質問です。

私のブログを見てもらえばわかると思いますが、
カテゴリ…?
PROFILE とか描いてあるところなんですが…。
ちょっと上寄りなんです(ノ`)
それを真ん中にしたくて!

けれどどこを直せばいいかわかりません…。
よかったら教えていただいてもよろしいでしょうか?

お願いします。

| 莉空 | 2009/07/24 10:16 PM |

cssの

td#cd_contents div#cd_sidebar dt {
width:200px;
padding-bottom:14px;
background:transparent url(http://pinkbunny-chu.img.jugem.jp/20090712_877919.png) no-repeat center bottom;
color: #ff99cc;
font-weight: bolder;
}

を変えます。
まずこれを

td#cd_contents div#cd_sidebar dt {
width:200px;
padding-bottom:14px;
background:transparent url(http://pinkbunny-chu.img.jugem.jp/20090712_877919.png) no-repeat center top;
color: #ff99cc;
font-weight: bolder;
}

とbottomをtopに変えてみてください。
それでも直らなかったら
padding-bottom:14px;を削除、
font-weight: bolder;の下に
padding-top:3px;
というように上からの余白を入れる行を挿入します。

| tk | 2009/07/24 10:34 PM |

BLOGのトップ画を真ん中にもってきたいののですが、
どこにmargin:0 auto;とtext-align:leftをもってきたらよいですか??

<imgsrc="http://data1.xiz.cx/img/gamegamega1/2009100523429.jpg?t=1254726755">だけでは左にしか表示されません。
よろしくお願いします★

| まま | 2009/10/06 1:21 PM |

<p style="text-align:center;">
<img src="http://data1.xiz.cx/img/gamegamega1/2009100523429.jpg?t=1254726755" />
</p>

でどうでしょう。
あ、ちなみに画像はJUGEMの方にアップしなおした方がいいですよ。
サーバによっては規約違反になってしまいます。

| tk | 2009/10/06 2:08 PM |

そうなんですね!!分かりましたやってみます★
助かりました。ありがとうございます★

| まま | 2009/10/06 5:57 PM |

すみませんやってみたのですがやはり中央寄せになりませんでした。
<p style="text-align:center;">
<img src="http://data1.xiz.cx/img/gamegamega1/2009100523429.jpg?t=1254726755" />
</p>
と繋げずにやってみてダメだったので今度は
<p style="text-align:center;"><img src="http://data1.xiz.cx/img/gamegamega1/2009100523429.jpg?t=1254726755" /></p>と言う風に全てつなげてやってみました。
でもやはり左にしか表示されません。
お手数お掛けしますがもう一度教えて下さい★

| まま | 2009/10/07 10:57 AM |

うーん、他の要素が関係しちゃってるのかもしれません。
ちょっと実際のURLを見せていただけますか?

あ、今日は昼から夕方すぎまで出かけてしまうので
返答は夜になってしまうとは思うのですが。

| tk | 2009/10/07 11:21 AM |

お忙しいのにすみません!!!
URLです→http://d7.decoo.jp/diary/abe312fam/?guid=on

たぶんPCからでもアクセスできると思います。
急がないので夜でも大丈夫です。
よろしくお願いします★

| まま | 2009/10/07 11:33 AM |

すみません!!!
PCからアクセスしてみたら中央よりになってました。
申し訳ないです。ありがとうございます★
携帯の方はなっていないのですが...
何度の申し訳ないです。

| まま | 2009/10/07 11:38 AM |

ああ、携帯はテンプレート自体が違うんです。
で、機種によっても表示が違うので、申し訳ないですがサポートはしてません。docomoなんかは特に表示が酷いですね。

| tk | 2009/10/07 5:20 PM |

そうなんですね★
色々ありがとうございました★

| まま | 2009/10/08 8:13 AM |

Submit Comment