Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › サイト中央揃えのやり方
- このトピックには14件の返信、2人の参加者があり、最後に
みきにより10年前に更新されました。
-
投稿者投稿
-
-
2016年9月26日 3:41 PM #45583
みき
ゲストお世話になります
サイト全体を中央に表示したいです
どのようなコードを追加すればよいですか?
お忙しいところ申し訳ございませんがご回答をお願いいたします -
2016年9月26日 3:47 PM #45585
hidekichi
ゲストSimplicity自体はセンタリングされていると思いますが、縦のセンタリングですかね?
またどういう時にセンタリングされてない状態でしょうか?
-
2016年9月26日 3:52 PM #45586
みき
ゲストご返信ありがとうございます
全体的に左寄せになっています -
2016年9月26日 4:12 PM #45589
hidekichi
ゲスト何か手を加えられてそうなっているのであれば、何をどのようにしたかと言うのを書いてもらわないとなんとも言えないんですが、全体的に左と言うのが、最初の質問の「サイト全体」と言うことなら、それは何かしらの要素に閉じタグがないとかそういうことじゃなかろうかと思うんですけども…。
どこそこから表示がおかしくなっていると言うより、サイト全体なんですよね?
横の中央寄せの場合、
その要素のwidthを決めて、margin: 上下 auto;とすればインライン要素以外ならセンタリングされると思うんですが、サイト全体と言うことになると該当のページのアドレスを公開してもらうか、少なくともスクリーンショットでどうなっているのかを確認したいところです。 -
2016年9月26日 4:26 PM #45591
みき
ゲストご返信ありがとうございます
スクリーンショトです
-
2016年9月26日 4:26 PM #45592
-
2016年9月26日 4:27 PM #45593
みき
ゲスト -
2016年9月26日 4:31 PM #45594
みき
ゲスト字が違いました
スクリーンショットです -
2016年9月26日 4:58 PM #45601
わいひらキーマスター全体ということは、このようにしたいということなのでしょうか?

-
2016年9月26日 5:27 PM #45606
-
2016年9月26日 5:32 PM #45607
hidekichi
ゲストスクリーンショットのやつですが、これはセンタリングされているんですよ。
#body-inは1070pxがデフォルトで、その中に#mainが入っています。
#mainはfloat:leftで左になってますからサイドバーがあれば画面中央にあるわけですが、スクリーンショットで言う#mainをセンタリングしたい場合は、#main { width: 任意; /*740px*/ margin: 任意 auto; float: none; }こんな感じにすれば、#body-inの中身が#mainだけならセンタリングされると思います。
本来は、#mainをwidth: 100%にして、#body-inに上記の設定をするとよいかと思います。marginは設定されてますし、floatはないですが、widthを決めて、margin: 0 auto;などとなっていればセンタリングされると思います。 -
2016年9月26日 5:42 PM #45609
みき
ゲストhidekichi様
ご教示いただいたコードで設定すると
中央に表示されました
ありがとうございました! -
2016年9月26日 6:15 PM #45611
みき
ゲストすみません
記事などは中央に表示されたのですが
メニューがそのままなので
メニューを中央に表示させたいです -
2016年9月26日 11:46 PM #45618
hidekichi
ゲストなんちゃらinと言うのがいくつかありまして、上から
#header-in,
#navi-in,
#body-in,
#footer-inとあります。それぞれを同じように設定すれば全体的に同じ幅でセンタリングできると思います。
が、メニューに関して言うと、メニューの数にもよりますが上手くやらないと折り返しが発生します。メニューのカスタマイズは結構大変なことなので、できるだけメニューの数やメニューの文字数を気にしながら設定する枠内に上手く入るように調整してください。例えば、
#header-in, #navi-in, #body-in, #footer-in { width: 1000px; } #xxx-in { margin: 上下 auto; }こんな感じにして、センタリングしたい要素の親に当たるxxx-inの幅を揃えます。#mainはwidth: 100%みたいなことを書きましたが、それぞれのxxx-inにはまたその中身があるので、それぞれを合うように調整しないといけません。
#body-inの中にある#mainと#sidebarは左右に分かれていますが、#header-inの中には.alignleftと.alignrightがあると言うような具合です。
ここから先は、カスタマイズの目標として、何をどうしたいかによってやり方が変わる可能性があるので、もしやり方がわからなくなったら具体的に何をどういうふうにしたいと質問できるようにしてもらうとよいかと思います。
そのためにはデベロッパーツールで、htmlからその要素のセレクタをみつけて、例えば先の例で言うと.alignleftの中にあるなんちゃらとか、その親に当たる#h-topがどうたらとかというようなセレクタでの要素指定と、最終的にどうなって欲しいかを説明できるようにしてください。質問例) #h-topの中の.alignleftと.alignrightは通常それぞれ左右に並んでますが、逆転させることはできますか?.alignrightを左側、.alignleftを右側にするにはどうすればよいでしょうか?
みたいな感じで質問してもらえると、さっくり答えられると思います。
-
2016年9月27日 6:39 PM #45664
みき
ゲスト返信が遅くなってしまい申し訳ございません
たしかにメニューは字数によっても違いますね
(浮かばなかった)
いろいろ考えてみます
ご返信ありがとうございました!
-
-
投稿者投稿
- フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。