Simplicityの特徴 › フォーラム › Simplicityについての質問 › ブログ本文部分の幅を変えるにはどうしたよいでしょうか?
- このトピックには16件の返信、2人の参加者があり、最後に
スベンにより9年、 11ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年10月13日 6:04 PM #46100
スベン
ゲストデフォルトの状態だとamazonアフィリエイトの横長の広告の端がわずかに切れてしまうので、幅を大きくしたいと思いました。まずテーマの編集の子テーマのスタイルシート(style.css)というところに書き込むというので合っているでしょうか?
一応ググってみて、元々書いてあるものの下に、.article { width:105%; margin: 0 auto; }とコピペしてみましたが、更新して確認すると変化がありませんでしたので、方法を教えていただきたいです。よろしくお願いします。
-
2016年10月13日 6:19 PM #46106
みき
ゲスト本文のサイズは
#main { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 940px;//横幅 ※調整はこの値を変える padding: 20px 29px; border:1px solid #ddd; background-color:#fff; border-radius: 4px; margin-bottom: 30px; }で変更できます
-
2016年10月13日 6:20 PM #46107
みき
ゲストデフォルトのサイズは740pxです
-
2016年10月13日 6:23 PM #46108
みき
ゲストただ本文幅を変更すると
サイドバーがずれたり
他のカスタマイズをしたときなど
表示が崩れる場合があります -
2016年10月13日 6:25 PM #46109
みき
ゲスト今回はアフェリエイトが切れるとのことですので
そこまで大きくしなくていいと思います
740px→760pxなど -
2016年10月13日 6:28 PM #46110
みき
ゲスト修正
#main { width: 940px; }これでできます
-
2016年10月13日 7:02 PM #46111
スベン
ゲストありがとうございます。
初めのレスの#46106のようなのがどこに書いてあるかがわからないのですが、どうしたらよいでしょうか。
下のようなページに
テーマの編集
Simplicity2 child: スタイルシート (style.css)@charset "UTF-8"; /*! Theme Name: Simplicity2 child Template: simplicity2 Version: 20151225 */ /* Simplicity子テーマ用のスタイルを書く */ } #main { width: 750px; }こう書き足してみたのですが変わりませんでした。
このページでなく、どこかのファイルを書き換えなければいけないのでしょうか? -
2016年10月13日 7:11 PM #46112
みき
ゲスト子テーマのstyle.cssに以下を追加してください
#main { width: 750px; }記入された内容をみると
} #main { width: 750px; }こうなっていましたので#mainの上の}を消してみてください
-
2016年10月13日 7:12 PM #46114
みき
ゲストこんな感じです
/* Simplicity子テーマ用のスタイルを書く */ #main { width: 750px; } -
2016年10月13日 10:54 PM #46168
hidekichi
ゲストみきさんの方法で幅自体を変えるのも良いですが、広すぎるとサイドバーが落ちる原因にもなるので、ちょっと手間ですがpaddingを無くすと言うのが僕は良いのではなかろうかと思ったりしてます。
例えば、これで影響が出るのは、#mainの中身ですが特に影響されるのがh2です。それ以外は自由にレイアウトできるので便利です。
#main { padding: 0; }こうしてしまえば、widthはそのまま740px使えるわけです。paddingがあるから680pxとかそのあたりをうろちょろと微調整しなければいけないわけで、無くしてしまえば例えばアイキャッチも幅いっぱいに表示できるようになります。
h2の場合、ネガティブマージンが入っているため、想定される記事幅によって変えないといけないわけですが、例えば
#main { padding: 0; } #the-content { width: 680px; margin: 0 auto; } #the-content h2 { width: 100%; margin: 0 auto 30px; }こうすれば、paddingがなくても記事幅はデフォルトと同じになります。本来widthとpaddingを一緒に書くと「はみ出す可能性があるぜ」と警告されます。box-size: border-boxを指定しておけばそれはありませんが、paddingとは本来スペースを取るためと言うよりは文字の如く、指定サイズでスペースを埋めると言う使い方をします。
要素のサイズを正しく配置させるためには、width + marginが本来は正しい形です。またサンプルでは見た目はわからないと思いますが、上下のマージンを取らず、全部margin-bottomでスペースをとっています。
上下マージンを取ると言うことは、itemA itemBこうある時に、margin: 5px 0;の場合、
5px itemA 5px 5px itemB 5pxこうなります。itemの間隔として5pxが欲しい場合は、2.5pxで設定しないと間が10pxになりますよね?しかし最初のアイテムと最後のアイテムの上下には2.5pxしか開かず、わかりやすい数値でのデザインがしにくくなります。なので、margin-bottomに10pxとしておけば、
itemA 10px itemB 10pxとなります。この時に、最後のmargin-bottom: 10pxをとってしまえば尚良しです(セレクタ:last-child{…}等)。これに続く要素の先頭に10px開くと考えればそれはそれで良いですし。本来は、
<div class="test"> <p>itemA</p> <p>itemB</p> </div>このようなhtmlで使います。.testにはmargin-bottomで任意の間隔をした方向に作る事で調整できます。
.test { margin-bottom: 20px; } .test p { margin-bottom: 10px; } .test p:last-child { margin-bottom: 0; }こうすれば、
itemA 10px itemB 20px //.testのmargin-bottomこうなって、間隔が正しくかつした方向だけのスペースでアイテム間の調整をすることができます。
サンプル: #mainからpaddingを無くしてwidthとmarginで調整するサンプル | codepen
各部位はサンプルのとおりですが、あくまでサンプルはデフォルトのように見せているだけで、#mainの中身の要素は740pxまで自由にレイアウトできます。
サンプルでもアイキャッチとpost-meta部が幅いっぱいになっているのがご理解いただけるかと。
問題はバナーがどこに入っているかで書き方が変わると言うことです。そのために、#the-contentの中にバナーがある場合は、#the-contentを100%でその中身、pタグであったり、.blog-cardの調整等別途書いておきました。 -
2016年10月13日 11:01 PM #46169
hidekichi
ゲスト☓ box-size: border-box;
○ box-sizing: border-box;cssのデフォルトでは、box-sizing:border-contentと言うのが設定されており、paddingを入れると、中身をwidthのサイズにしようとするので、本来のwidthよりも広くなってしまうと言う問題があります。
そのためpaddingとwidthを設定すると警告されると言うわけです。box-sizing: border-box;では、要素のサイズをwidthのサイズにしようとします。そのために中身のサイズがwidthとはなりません。
これらの問題があるため、できるだけpaddingでデザインせずに、marginでデザインしようぜと言うことですね。意味を理解した上で使う分にはpaddingを利用しても構いません。
その要素のサイズは○○pxと限定したい場合はpaddingの利用はできるだけ最終手段として考えるようにします。 -
2016年10月17日 3:26 PM #46293
スベン
ゲストすみません。少しの間ブログから手が離れておりました。
お二人のご指南を参考させていただき、変更できるように頑張ってみます。
またわからないところがあったら質問させていただきたいです。
どうもありがとうございます。 -
2016年10月17日 3:59 PM #46295
スベン
ゲストすみません。
お二人のおっしゃった方法をそれぞれ、試してみましたが(理論がわからないので、そのまま/* Simplicity子テーマ用のスタイルを書く */
の下にコピペしてみましたが)サイトを表示すると何も変わっていない状態です。
以前に書いた記事には反映されないのでしょうか?
それとも、編集できない設定になっている。とか何か根本的な問題でしょうか? -
2016年10月17日 4:32 PM #46296
スベン
ゲストすみません。
スタイルシートに書き足しても何も反映されなかったのは、検索したところ、キャッシュが残っていて確認しても反映されていなかったようです。
何度もご迷惑をおかけいたしました。 -
2016年10月17日 5:01 PM #46301
わいひらキーマスター子テーマにCSSを貼り付けても変わらない場合は、いろいろな原因が考えられます。
よくある原因としては、以下に書かれている原因が多いです。
動作不良時のガイドラインただ、他にも原因は考えられるため、サイトのURLを掲載していただけると、ソースコードを見ることができるので一番手っ取り早いかもしれません。
-
2016年10月17日 5:30 PM #46303
hidekichi
ゲスト僕のサンプルはcssがscssで書かれているので、css欄の下向き三角からview compiledを押してcssに変換れたものを子テーマstyle.cssに追記します。
-
2016年10月18日 9:45 AM #46335
スベン
ゲストありがとうございました。
皆さんのおかげでなんとか治まりがつきました。
-
-
投稿者投稿
- フォーラム「Simplicityについての質問」には新規投稿および返信を追加できません。