投稿のページタイプの１カラムと本文のみ横幅の微調整方法を教えて下さい

すみません。

要望を書き忘れました。

前回のお願いではコードの改造方法についてアドバイスをお願いしたのですが、
ページタイプを決めるとき、１カラムのみ、本文のみの横のサイズを決められるようになればとてもありがたいです。

つくるページの用途によっては760のまま、別の用途によって900,1000,1200と横幅の調整ができたらと思っております。

つまりコードの改造ではなく、機能として追加頂けたらありがたいです。

年の瀬も迫ったこの時にお願いして申し訳けありません。

ナカジン

追記です

いままで下記のようにCCSを書き換えてみましたが
これでトップページの幅が１０００になりますが

１カラム、１本文のみとも（広い）が７００幅になってしまいます。
ここで行き詰まりました

１カラム、１本文の広いの時には

#main {
    width: 100%;
}

となっているのが　width 700　になってしまい２カラムの本文と同じ幅になってしまいます。
どうか、よろしくお願い致します。

いままで買い替えをしてもうまくいかなかった例です

#header-in, #navi-in, #body-in, #footer-in {
    box-sizing: border-box;
    margin: 0 auto;
 /*   width: 1070px; */
    width: 1000px;
}

#main {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    float: left;
    margin-bottom: 30px;
    padding: 20px 29px;
/* width: 740px; */
    width: 700px;
}

#sidebar {
    float: right;
/*    margin-bottom: 30px; */
/*    width: 300px; */
    margin-bottom: 30px;
    width: 270px;
}

1カラムの時とそれ以外の区別をつけないと2カラムにも1カラムにも同じ設定となってしまうので問題が出ます。

.page-type-column1.page-type-wide 1カラム広い
.page-type-column1.page-type-narrow 1カラム狭い

Simplicityでは、1カラムの時上記クラスがbodyタグに付きます。識別するには面倒くさいクラス名ですが、これらと通常の2カラムのデフォルトの設定を併記しておくことで対応はできると思います。

#body-in, その他-in {
  width: 100%;
  max-width: 1070px;
}
#main {
  float: left;
  width: 740px;
}
#sidebar {
  float: right;
  width: 300px;
}

/* 以下 1カラム(広) の時の設定 */
.page-type-column1.page-type-wide #body-in {
  max-width: 1000px;
}
.page-type-column1.page-type-wide #main,
.page-type-column1.page-type-wide #sidebar {
  float: none;
  width: 100%;
}

こんな感じですかね。marginとかpaddingやらは別途設定してください。
デフォルトの2カラムは特別いじる必要はないと思うので子テーマstyle.cssには書かないで良いです。親テーマの設定のまんま使い、1カラムの時の設定を追記するということですが、1カラム時、カスタマイザーで#mainがwidth:100%になるようになってます。なので上記の該当部100%は不要ですが、#sidebarを表示したりする場合は必要になります。1カラム時display: noneで非表示になってます。

.page-type-column1.page-type-wide #body-inをmax-widthで設定してあるのは、1000px以下の端末でサイトが見られた時に、はみ出るのを防ぐためです。小さい画面の時は100%表示と等価になるので、marginが必要ならmarginを、paddingが必要ならpaddingを入れるなりしてください。

Hidekichi 様へ

ありがとうございます。
年末なのにお手数をおかけしました。
私もトップページの横幅を調整すれば、１カラム設定（広い）を選択しても１００％にならないので
どうしていいかわからなかったです。

まず頂いたアドバイスで試してみます
ありがとうございました。

ナカジン

Hidekichi 様へ

只今テストしてみました。
１カラム（広い）で無事１０００になりました。

追加で申し訳ないのですが（本文広い）はどのようにすればいいかアドバイスいただけませんでしょうか。
あつかましいお願いで申し訳ありません。

お時間があいたらで結構です。よろしくお願いいたします。

ナカジン

Hidekichi 様へ
前文お礼を忘れておりました。
失礼致しました
あらためてありがとう御座います。
ナカジン

本文のみ狭い
.page-type-content-only.page-type-narrow

本文のみ広い
.page-type-content-only.page-type-wide

これらに続いて#body-inなどを設定します。

Hidekichi 様へ

ご丁寧にありがとうございます、感謝です。
早速自分なりに手直ししてみました。

一応１カラムの分を残して本文（広）を付け加えたのですが
本文の横幅はたしかに１０００になりましたが、
トップページの本文が１００％になりサイドメニューが本文の下に着てしましました。

ほんとにごめんなさい。
お時間があるときで結構です。

この書き方ではまずいのでしょうか。厚かましくてもうしわけないのですが
教えて頂けると助かります。

ありがとうございます。
ナカジン

——————————私の加筆————————-
#body-in, その他-in {
width: 100%;
max-width: 1070px;
}
#main {
float: left;
width: 740px;
}
#sidebar {
float: right;
width: 300px;
}

/* 以下 1カラム(広) の時の設定 */
.page-type-column1.page-type-wide #body-in {
max-width: 1000px;
}
.page-type-column1.page-type-wide #main,
.page-type-column1.page-type-wide #sidebar {
float: none;
width: 100%;
}

/* 以下 本文(広) の時の設定 */
.page-type-content-only.page-type-wide #body-in {
max-width: 1000px;
}
.page-type-content-only.page-type-wide #main,
.page-type-content-only.page-type-wide #sidebar {
float: none;
width: 100%;
}

検証するためには必ず貼り付けたソースはcodボタンでハイライト表示されるようにしてください。

貼り付けたソースがまんまなら、
#body-in, その他-in
こんな日本語がcssに入ることはありません。ここはその他の部分に例えば#navi-in等を入れる部分です。

またここは直してあるという場合は、サイトのアドレスを公開してもらうのが手っ取り早いです。
何が邪魔をしているかが一目瞭然なので。

理屈としては、

• 通常の2カラムの時はwidth:100%にしておき、max-widthで上限を設定する。(それ以下の画面幅の場合は100%表示になり画面サイズに追従する※1)
• 1カラム(広)の時の設定をかく
• 本文のみ(任意)の時の設定をかく

こういうことです。1カラム(本文のみ)以外の時は、bodyタグにそれ用のクラスが入らないため、ほぼデフォルトで表示される。それぞれのモードの時はそのクラスの設定が適用されると言うだけの話です。

cssは先に書いてある同じセレクタ・プロパティを後の同じセレクタ・プロパティが上書きしますので、基本的には#body-inだけ(他のなんちゃらinがある場合はそれも)いじればよいかと思います。
サイドバーの取扱いを1カラムなどの通常以外の時にどうするかで手を加えないといけないかも知れませんが、基本的に1カラムの時は#mainのwidthが100%になるため#mainはいじる必要はない部分です。

#body-inがそれぞれのサイズを作って、その中にある#mainと#sidebarがそれらに追従するという具合です。サイドバーは300px以下にすると広告やらがややこしいことになるため、

※1の補足

#main {
  width: calc(100% - 300px + スペース(サイドバーとメインの間隔)px);
}

というようなことをすれば、サイドバーのカラム落ちは発生しません。がこれは通常のメインとサイドバーが横並びにある場合に、#mainの幅を可変にするということなので、サイドバーがない場合はこのようにはできません。しかし、先にも書いたようにcssは前に書かれている同じセレクタのプロパティを上書きするということから、

デフォルトの#main {
  width: calc(何かしらの計算);
}

1カラムの#main {
  width: 100%;
}

こうあれば1カラムの時の#mainは自ずと100%になります。サイドバーがカラム落ちするのは#mainと#sidebarのサイズが#body-inのサイズを超えた時に発生します。calcで計算すれば超えることがないのでデフォルトの２カラムの状態でもカラム落ちはないということになります。

これらはあくまで理屈の説明だけなので、本来は#body-inとその周辺(#main等)の手直しをほんの少しするだけで大丈夫なはずです。

参考・サンプル: #mainをcalcでレスポンシブ(スマホは考慮してません) | codepen
サンプル: 1カラム2カラム切り替えスイッチ | codepen

Hidekichi様へ

不慣れなものですみません。
CCSもやっと何とかあるかえる程度です

Hidekichi様から教えて頂いた１カラム（広）に本文（広）をくわえました。
codボタンは使ったことがないのですが、これでいいのか分かりません。
できるだけの事は致します。

今回URLも入れてさせて頂きます。
このURLは今テストとして使っているものですが、やろうとしてきることは
本文（広）が少し広すぎなので１０００程度に縮めたいということです。
http://www.ダントツ情報.com/brand/post-127.html

ここまで書いて頂くのもお手数をおかけしていると思います。
申し訳ありません。

———————-以下訂正箇所です——————–

#body-in, {
width: 100%;
max-width: 1070px;
}
#main {
float: left;
width: 740px;
}
#sidebar {
float: right;
width: 300px;
}

/* 以下 1カラム(広) の時の設定 */
.page-type-column1.page-type-wide #body-in {
max-width: 1000px;
}
.page-type-column1.page-type-wide #main,
.page-type-column1.page-type-wide #sidebar {
float: none;
width: 100%;
}

↑ここは教えて頂いた通りです

↓ここから本文（広）で追記した部分です。

/* 以下 本文(広) の時の設定 */
.page-type-content-only.page-type-wide #body-in {
  max-width: 1000px;
}
.page-type-content-only.page-type-wide #main,
.page-type-content-only.page-type-wide #sidebar {
  float: none;
  width: 100%;
}

すみません、私自身が少しこんがらかってしましました。

今回の件を要約すれば

１カラム（広）
本文の（広）

の横幅を1070から1000程度に変更したいということでした。
トップページの横幅はこのままで丁度いいので変更せずにいたいです。

CCSを調整したことは１年前に数回しかなく知識は殆どありません。
それでもワイヒラ様のテーマがとても気に入っていて、
１カラム（広）
本文ののみ（広）
がとても使いやすいです。

ただどちらの（広）もランディングページとしては若干広目なので
1000程度に狭くしたいと思いました。

言葉足らずでお手数をおかけして申し訳ありません。

ナカジン

子テーマstyle.cssが読み込めていないようです。
何かしらプラグインを利用されていたりする場合、あるいは独自に何かしらスクリプトを読み込んでいる場合、http://www.39bit.com/gap/?i=r4ya&jq=offこのソースを読み込んでいるjavascript(jQuery)を正しく読み込ませエラーがない状態にしてください。

スクリプトがjQueryを読み込む前に読み込まれエラーが出ています。

これらがよくわからない場合、どこにこれまでのcssを記載しているのか等の作業内容を説明してください。通常は前レスにもあるように子テーマstyle.cssに記載するだけで問題ないかと思います。
子テーマstyle.cssがまだ導入されていないようであれば、まずは導入して有効にしてください。cssのカスタマイズは子テーマstyle.cssにして親テーマのアップデートにもカスタマイズしたcssがなくならないようにするのが定石です。

遅くにコメントを頂きて恐縮です。

テーマはインストールする時に入っていたものを使っていて、子テーマは使っていません。

CSSのカスタマイズは直接CSSを編集していません。
プラグインを使っていますのでテーマがアップグレードされても変更したCSSは引き継がれています。

また今回は、テーマのカスタマイズに追加された一番下にある追加CSSも使いましたが、どちらも状況は変わらないようです。

またhttp://www.39bit.com/gap/?i=r4ya&jq=offはアクセス解析コードでjQueryをOffにするのかもしれん。そこでJAVAのものと入れ替えましたが状況は変わらないようです。

他のプラグインの影響も考えて、全てを一旦一度OFFにしてテストしましたが状況に変化なしの状況です。

時期が時期だけにここまで対応頂きこころから感謝申し上げます。

現在、先日お伝えしましたURLのみ本文のみ（広）を使っていますが、これはジャストサイズでいい感じです。

これでトップページが1070幅に戻り２カラムで表示されたら本当に嬉しいです。

ありがとうございます。

ナカジン

> 子テーマstyle.cssがまだ導入されていないようで
> あれば、まずは導入して有効にしてください。
>
> プラグインを使っていますのでテーマが
> アップグレードされても変更したCSSは引き継がれています。

エラーを吐いてるようなプラグインを使う必要はないということです。
また該当の読み込まれているであろうcssをみましたが作業内容を見ることはできず、実際変更されているであろう内容は適用されていません。
なのでどこに変更したcssを書いたのかを説明してくださいというレスをしました。

ここで大切なのは設定が引き継がれるということだけでなく、正しい順序で正しく書かれたcssが読み込まれているかどうかです。プラグインで何かしらするよりも子テーマstyle.cssという小さなテキストを読み込むほうが圧倒的に速いと思いますよ。

大晦日であるにもかかわらず、ここまで丁寧にアドバイス頂き恐縮です。

子テーマの意味がようやく分かりました。
早速ダウンロードして子テーマに差し替えてみました。

CSSのプラグインもやめ、テーマのカスタマイズにある追加CSSに全てを移しました。
アクセスカウンターもフッターの中に入れましした。

CSSを扱うには知識不足だと痛感しています。
これを機に勉強したたいと思います。

ほんとうにお手数ばかりおかけして申し訳けありません。

ナカジン

ヒデキチ様へ

新年早々すみません

前にご指摘頂いた
http://www.39bit.com/gap/?i=r4ya&jq=off
は違うものに致しました。

あと

２カラムのトップヘージは

#body-in,  {
  width: 100%;
  max-width: 1070px;
}
#main {
  width: calc(100% - 300px + 0px);　余白はテスト的に0pxにしました
}
#sidebar {
  float: right;
  width: 300px;
}

として、１カラムは

/* 以下 1カラム(広) の時の設定 */
.page-type-column1.page-type-wide #body-in {
  max-width: 1000px;
}
.page-type-column1.page-type-wide #main {
  width: 100%;
}
.page-type-column1.page-type-wide #sidebar {
  float: none;
  width: 100%;
}

/* 以下 本文(広) の時の設定 */
.page-type-content-only.page-type-wide #body-in {
  max-width: 1000px;
}
.page-type-content-only.page-type-wide #main {
  width: 100%;
}

.page-type-content-only.page-type-wide #sidebar {
  float: none;
  width: 100%;
}

と書き換えてみましたが、トップページは横幅は1000pxになるのですが
サイドバー消えてしまいましたので、書き換えは中止して下記のようにしてあります。
これだとトップページのサイドバーは本文下に落ちた形ですが表示されています。

今の私には

デフォルトの#main {
  width: calc(何かしらの計算);
}

1カラムの#main {
  width: 100%;
}

の設定箇所がどうしても分かりません。

今は
トップページの横幅が1000pxとなりサイドバーが下に落ちています。
１ページ表示、１カラムと本文のみ（広）の幅は1000pxに表示されています。

大変あつかましいお願いばかりで恐縮なのです、もしヒデキチ様のご負担にならなければ
CCSの正しい修正を教えて頂けませんでしょうか。

今は下記のように訂正しています。
ナカジン

#body-in,  {
  width: 100%;
  max-width: 1070px;
}
#main {
  float: left;
  width: 740px;
}
#sidebar {
  float: right;
  width: 300px;
}

/* 以下 1カラム(広) の時の設定 */
.page-type-column1.page-type-wide #body-in {
  max-width: 1000px;
}
.page-type-column1.page-type-wide #main,

.page-type-column1.page-type-wide #sidebar {
  float: none;
  width: 100%;
}

/* 以下 本文(広) の時の設定 */
.page-type-content-only.page-type-wide #body-in {
  max-width: 1000px;
}
.page-type-content-only.page-type-wide #main,
.page-type-content-only.page-type-wide #sidebar {
  float: none;
  width: 100%;
}

cssがおかしいのではなく書き順がおかしいのではなかろうかと思います。

現在1カラムの設定がインラインで書かれています。これはタグにstyle属性で書く、!importantを付けるに次ぐ優先順位の書き方です。

どういうことが起こっているかと言うと、

親テーマのstyle.cssを読み込む
子テーマのstyle.cssを読み込む
インラインのスタイルが適用される ←ここ

でスタイルが上書きされているということです。どうすればよいかはわいひらさんに仕様を確認する必要がありますが、まず子テーマstyle.cssにcssを書き直します。
で、現在トップページbodyタグにhome blog page-type-content-only page-type-wideというクラスが入っています。がトップページに.page-type-content-only.page-type-wideがどうすれば入るのかと言うのは僕にはわかりません。
通常はhome blog logged-in admin-bar customize-supportというようなクラスなはずです。ここでもcustomize-support前のスペースが多いわけですがここらはブラウザが補完しますので良いとして、「page-type-content-only page-type-wide」は単語の意味合い的にも「本文のみ広い」ということですからこれがトップページに来ることはあるだろうかというのをわいひらさんに聞く必要があります。

実際のcssは子テーマstyle.cssに

#body-in,  {
  width: 100%;
  max-width: 1070px;
}

/* 以下 1カラム(広) の時の設定 */
.page-type-column1.page-type-wide #body-in {
  max-width: 1000px;
}
.page-type-column1.page-type-wide #main,

.page-type-column1.page-type-wide #sidebar {
  float: none;
  width: 100%;
}

/* 以下 本文(広) の時の設定 */
.page-type-content-only.page-type-wide #body-in {
  max-width: 1000px;
}
.page-type-content-only.page-type-wide #main,
.page-type-content-only.page-type-wide #sidebar {
  float: none;
  width: 100%;
}

これだけ書いてあれば行けるんじゃなかろうかと思います。

わすひらさんの見解待ちですが、最悪jQueryで不要なものを取り除くことはできるので、実質しないといけないのは子テーマstyle.cssにスタイルを書くということです。その際インラインで書いてあるスタイルは削除してください。

☓ わすひらさん
○ わいひらさん

新年早々タイプミス(笑)

#body-in,  {
  width: 100%;
  max-width: 1070px;
}

これコピペしましたが、

#body-in {
  width: 100%;
  max-width: 1070px;
}

カンマいりません。

ヒデキチ様へ

ほんとうにありがとうございます。
ここまで丁寧に説明頂き、お礼を申し上げる言葉が見つかりません。感謝ですm(_ _)m。

今は、#body-in, {　の中の　,を削除して再度CCS追加で入れ替ええています。
その結果ですが、状況は変わらず、次のような状況となっています。

　`トップページには本文＋サイドバー（下に落ちていますが）あり
　１カラム（広）と本文のみ（広）は変更したとおりの横幅1000pxになっています。`

また

　home blog page-type-content-only page-type-wide
　home blog logged-in admin-bar customize-support

についてご説明頂きました、この内容は今の今の私にはちんぷんかんぷんでわかりません。
おぼろげながらトップページをどのように表示するか決める記述ではないかと思える程度です。

ヒデキチさん、ほんとうにありがとうございます。
仕組みの分からない私のような者にごまでご説明頂くのは骨が折れたことでしょう。
お礼の言葉も見つかりませんが、こころから感謝いたします。

改めて、ありがとうございます。

ナカジン

——————————————————–
ワイヒラ様へ

もし、トップページをどう表示するかの部分、わたしにはわかりませんが、この思いを叶えて頂ければとてもうれしく思います。

厚かましくて申し訳ありません。
できましたら、１カラム表示と本文のみ表示の幅を７４０～１０４０まで自由に変更できたらありがたく存じます。

お願いばかりで恐縮ですがよろしくお願い申し上げます。

ナカジン

ワイヒラ　様へ

あらためて機能の変更をお願いできませんでしょうか。

今投稿時に「１カラム」と「本文のみ」（狭い）（広い）を選ぶことができます。
これはランディングページを作る時にとても役になっています。
ありがとうございます。

（狭い）は740pxで（広い）は1040pxになっていますが、
（狭い）と（広い）ではない９６０や１０００PXにしたいときがあります。

そこでお願いがあります。
選択を狭いと広いの二択の他に７４０～１０４０の間で自由に設定できる選択肢をくわえて頂けませんでしょうか。

いままで、教えて頂きながらいろいろCCSを設定してみましたが、問題が残っています。
投稿ページの横幅は調整できましたが、トップページの横幅が１０４０に戻りません。
そのためメニューが本文の下に落ちたようになります。

以下はテスト的に作ったサイトです、機能の変更を頂けたらありがたく存じます。
よろしくお願い致します。
http://www.xn--6ckil5o054qp0k.com/

ナカジン

SIRIUS上位版がお薦めでは？

トモさんたち　様へ
コメントありがとうございます。

実はこの手のランディングはシリウスでつくってました。
ただこの手のページを作るにはワイヒラさんのテーマがとてもヤりやすいです。

SIRIUSは好きなのですがレスポンシブが一部しか使えないのが残念ですね。
あと１ページは９００が基本なのでそれを１０００にするのが手間です。
今年はメジャーアップデートするのかもしれませんが、
とりあえず今移行を考えています。

ナカジン

ワイヒラ　様へ

いつもワイヒラさまのテーマを使わせて頂いております。
今回の件も他の方法でやっていたのですが、１カラム（広）、本文のみ（広）が大変便利です。
ありがとうございます。

また

次のバージョンでは、ホームページでhomeなのに、「page-type-content-only page-type-wide」が入らない処理を追加しようと思います。

対応頂けるとほんとうに助かります。

今のところは、そういった機能の追加は考えていません。
理由としては、以下があります。
・そこまで利用ユーザーの多そうな機能ではない
・とりあえず（僕の環境では）CSSを書けば（テンプレートを編集する必要もなく）実現できる

そこまで利用者の多くない機能を追加しても、やたら機能が増えて混乱の元にもなりますので、今後、ユーザーさんの利用状況を見ながら、検討してみたいと思います。

機能追加は大変なのですが、CSSで調整できるようになるだけでも大助かりです。

このような些細な要望もお聞き頂きあらためて感謝致します。

ナカジン

引用に仕方を間違えました。
読みづらくてすみませんm(_ _)m。