ページごとに左右の余白を設定できる機能

個々のページでも可能かと思います。

例えば、投稿記事のIDが100番(※)のcssを変更したい場合、

.postid-100 #header-in,
.postid-100 #navi-in,
.postid-100 #body-in,
.postid-100 #footer-in {
  width: 100%;
}

とか。まぁそこそこスタイルしないと辻褄が合わなくなる場合がありますが、可能です。

※ 例えば記事の編集画面に入って、アドレス欄のクエリ部分(/post.php?post=xxx)のxxxが記事idの番号です。.postid-xxxとして指定します。これはbodyタグに加えられています。

cssだと面倒なので、scssで書ける環境があれば、それをコンパイルして貼り付ければ良い感じです。例えばcodepenとかを公開せずともscssの変換だけに利用するという感じとか。

scssなら

.postid-100 {
  #header-in,
  #navi-in,
  #body-in,
  #footer-in {
    width: 100%;
  }

  #body-in {
    #main {
      /*メインの幅*/
    }

    #sidebar {
      /*サイドバーの幅(たいてい300pxとかそのあたり)*/
    }
  }
}

こんな感じでしょうか。まぁそれぞれに設定したりが結構大変かと思うんですけど、いろいろとコマンドのあるscss(sass)を利用すればある程度さっくり書けるかも知れません。

Hidekichiさん、わいひらさんお返事有難うございました。

Hidekichiさんに教えて頂いた方法
.postid-100 #header-in,
.postid-100 #navi-in,
.postid-100 #body-in,
.postid-100 #footer-in {
width: 100%;
}
を試してみました。
その結果、確かに余白の幅は変化したのですが、肝心の本文の幅が変化しませんでした。

元々は、こうなっていますが、
｜余白｜本文｜最近投稿｜余白｜
上記CSSをstyle.cssに追加した結果
｜本文｜　　余白　｜最近投稿｜
のようになりました。つまり、左右の余白幅はゼロになって表示域は広がりましたが、
本文の幅が変化せず、その代わりに本文の右側の余白が大きく広がりました。

たぶん、本文の幅を広げる記述が足りないのかもしれません。もし解決方法が分かりましたら教えて下さい。

わいひらさん、
たしかに、こういう要望はあまりないと思いますし、このHidekichiさんの方法で実現出来るのでしたら、私としてもそれで十分だと思います。
よろしくお願いします。

どれぐらいにしたいですか？

例えば%で指定した場合、モニタの画面幅によってかなり表示の仕方が変わります。そのため、大きなモニタの場合は今度は本文が横長になりすぎて読みにくい構成になったりします。

だいたい読みやすい文字数ってのは40文字前後と言われています。Simplicityもデフォルトでそれぐらいになっているはずです。これが横幅を広げることによってexcelの表は入るかも知れないですけど、本文が読みにくくなる可能性があり、頻繁にexcelの表が入っているサイトなら良いわけですが、そうでないページもあるためその個別の指定がしたいと言われているのだろうと思うんです。

excelの表だけポップアップさせて、あるいはモーダル表示にしたりすることで解決できるとは思うんですが、それでも、そのページだけ幅を広げたいというのであれば、

#mainのwidthと任意のpx、あるいは#sidebarの幅とを%設定か、flexを利用することで、#mainのpaddingはそのままに幅を自在にすることができます。つまり、レスポンシブです。

サンプル: 全体を画面幅の90%の幅にして、#mainはflexでレスポンシブにさせる | codepen

ただし、この方法を利用すると、追従スクロール等が問題が出る可能性があり、別の問題が浮上するかも知れません。

cssのcalcを利用して、幅を計算しながら#mainと#sidebarを作るのが現状の仕組みとしては良いかも知れません。
参考リンク: CSSで計算式を可能にするcalc()ファンクション

色々と削除するのに手を入れないといけないので(アドセンスとか)、そこらの面倒臭さからSimplicity公式のメニュー「new」の部分を無理やりサンプルにしていますが、幅を調整すること自体は極簡単にできます。

見て頂いてわかるように、文字を読んでいって右に行ってから左に折り返す時、かなり視線を動かすことになるかと思うので、ここらで読みにくさにつながります。
まぁ#the-content p { 任意の幅 }として設定すれば、テキストの横幅は調整できるのですが、調整すれば#mainの右側にやはり余白もできます。

で、ここらはご理解頂けると思うんですけれども、excelなどの横長の表などを少しでも大きく見せたいのであれば、僕ならモーダルを利用します。

原理としては、excelの表に当たるテーブルはそのままデータとしてhtmlに入れておき、cssやjQuery等で画面幅以上になる場合、非表示にしたり(overflow:hidden)して、何かしらリンクを設置します。

Simplicityにはページが表示された時、body下あたりに何かしらのブロックを入れておきます。これがモーダルで表示するパネルになります。デフォルトでは非表示にしておきます。

テーブル付近にある設置したリンクをクリックすると、モーダルのパネルが最前面で全画面で表示され、テーブル自体をモーダルの中に読み込みます。
cssにもよりますが、そうするだけでブラウザの幅全域を利用したテーブル表示用のパネルができるので、これがもっとも画面を最大限に利用できる方法かと思います。

サンプル: モーダルにテーブルを表示させる例 | codepen

アイデアの一例として。

Hidekichiさん
詳しい説明有難うございます。

>どれぐらいにしたいですか？
PCの画面幅を最大限に使いたいです。

>本文が読みにくくなる可能性があり、
はい、その点は十分承知していますが、今は幅を広げる方を優先したいです。

>サンプル１: 全体を画面幅の90%の幅にして、#mainはflexでレスポンシブにさせる | codepen
わざわざサンプルを作って頂きまして有難うございました。
さっそく、このCSSの部分をコピーペーストして自分のstyle.cssファイルに貼り付けてみました。
POSTIDの番号は書き換えました。

しかしながら、変化が有りませんでした。
CSS以外に何かの作業が必要でしょうか？

一方、
>サンプル２: モーダルにテーブルを表示させる例 | codepen
も有難うございます。
でも、私の知識レベルでは内容が高度で、今は手が出せません。
とりあえず、サンプル１のほうで実現でしたいと思います。

何かとお手数をお掛けして申し訳ありませんが、よろしくお願いします。

> CSS以外に何かの作業が必要でしょうか？

あ、説明してませんでした(汗)
codepenで僕がいつも利用しているcss欄のはscssでして、view compiledボタンでcssに変換したものを、子テーマstyle.css等に貼り付けます。

ただ、基本的な部分しか書いていないので、調整やその他諸々は追加で設定していく必要があります。

ちなみに90%にしてあるのは、100%でもできるんですけれども、やはり#body-in等に余白がないと見栄え的にアレなのでそうしてます。scssをview compiledボタンでcssに変換した後は普通のcssですから、適当にいじくることで色々とできるかと思います。
一応、注意書きとして前のレスに書いたと思うんですが、追従スクロールの部分がもしかすると正しく動作しないかも知れません。どうなるかは動作しているものを見ないとわからないんですけどね。

またcssの方で、元々floatしてある要素の打ち消しをしていませんので基本的に#mainと#sidebarはfloatが聞いている状態かと思いますが、flex的にはfloatはあまり意味をなしませんので、不必要であればfloat: none;などとして、打ち消すプロパティを追記して下さい。

2つ目のモーダルのスクリプトの利用方法ですが、cssはscssを変換してcssとして便宜書き換えが必要です。
セレクタ名がそのままでも問題ないのであれば、利用方法としては、記事の編集で内容を書いている時に、[div class=”test”][/div]の中にtableを書き、[a href=”#”][/a]とでもして、これがモーダルを開くボタン(リンク)ですよと言うような文言を書きます。

.testで囲まれているブロック内のリンクがクリックされたら、その中身のtableをモーダルのパネルにクローンして貼り付けますので、スクリプト自体は、何も手を入れる必要はないです。グレー部分(モーダル背景)をクリックしたらモーダルの中身はクリアされて、モーダル自体も閉じます。

ページの中の複数のテーブルがある場合は想定してませんが、動くんじゃなかろうかと(笑)
またページ内に複数の.testがあって、その中にtableがあるという状態のものが動くかどうかは、やや不安です。これらは、ちょっとスクリプトをいじくる必要があるかも知れません。

jQueryの部分は、セレクタ名さえ問題ないのであればまんま子テーマjavascript.jsにコピペです。後はモーダルの中身のテーブルの装飾やらのcssを子テーマstyle.cssに入れるぐらいでしょうか。

一応、モーダルが開いてますよって言う感じをわかるように、アニメーションして開くようにしましたが、ここらはパッと表示することも可能です。

Hidekichi様
この度は、大変お忙しい中、詳細な解説有難うございました。
おかげ様で、無事に表示域を広げる事が出来ました。その結果EXCELの表も見易くなり、大変いい感じです。
感謝いたします。

わいひらさんお勧めのXSERVER X10を使っているのですが、
PHP高速化設定(FastCGI化)
の設定をONにしているとキャッシュに貯まっている内容が表示されるようで、CSSの設定を変えるだけでは変更が反映されませんでした。
このPHP高速化設定(FastCGI化)をOFF／ONをしたり、あるいは目的の記事を更新ボタンで再投稿するなどしているうちに無事に幅広で表示できるようになりました。

>追従スクロールの部分
に関しては、Simplicity 1.9.3(child)を使っていますが、殆どデフォルト設定で使っています。
パソコンで見る限りは、追従スクロールするような動作は無いので、デフォルトではOFFになっているのでしょうか？もしそうなら、今回Hidekichiさんに教えていただいた、このCSSを使って横幅を大きくする方法は、心配せずに使っても良いということでしょうか？

今回教えていただいたSCSSというものは、初めて聞く用語ですので、まずそのあたりから勉強を開始したいと思います。
ですので、2つ目のモーダルのスクリプトのほうは、せっかく教えて頂きましたが、自分の知識がこのサンプルを理解できるレベルになるまで、もう暫くは試せそうにありません。
しかしながら非常に興味深いサンプルコードですので、必ず自分のものしたいと思います。その時にはまた質問させて頂くかもしれませんが、よろしくお願いします。
このサンプルがあるページは、このまま消えずに今後も見る事はできるのでしょうか？

追従スクロールの部分については、元々わいひらさんが想定していたものは、#mainと#sidebarがそれぞれfloatで左右に振り分けてある状態でのスクリプトなので、flexの状態とfloatの状態とでは少し状態が異なります。

floatは文字通り、浮いている状態です。flexというのは、あくまでもブロックで#main、#sidebarどちらかのheightの大きい方を囲むようにブロックが作られます。これらは浮いていないのでfloatはおそらく効かないのではないかと思うわけです。

スクロール追従は、PCだけで行われると思うので、PCの画面で問題がないのであれば、そのまま使えるかと思いますが、PCの画面も狭いものから広いものまで色々とあります。15インチのモニターと23インチなどのモニターでは表示できるサイズが大きく異なります。

widthを100%(あるいは90%)にすると言うことは、全ての人が全画面表示でインターネットをしているわけではないので、その利用者の環境にもよるわけなんですけれども、大きすぎるモニター、小さすぎるモニターでは何かしら問題が出る可能性があります。

どこまでを設定するかは何とも言えませんが、メディアクエリで画面幅を設定し、100%表示にするか80%や60%などと色々と試行錯誤されるのが良いかと思います。

> サンプルがあるページは、このまま消えずに今後も見る事はできるのでしょうか？

codepen上の僕のアカウントに公開されていますので、いつでも見ることができます。
また、うちのサイトのサイドバーにもcodepenのrssが貼ってあるので見ることができます。

わいひらさん、
説明有難うございました。
教えていただいた手法は、今後、追従エリアを利用する機会があれば、いつか試してみたいと思います。

さて、その後、幅を広げる件に関していろいろ試したのですがパソコン向けに表示幅を最大化すると、
確かにパソコンではEXCELの表が期待した通り広々と横に表示出来るのですが、
スマホで見ると、EXCELの表全体の幅が、従来よりも狭くなり、逆に、非常に見づらくなってしまいました。
原因は良く分かりません。本文の右にある新着記事の領域の幅が広がって、本文の領域を左に押しやっている
感じでしたが、詳しくは確認していません。
と言う事で、いろいろ皆さんに教えて頂きましたが、今回の手法は断念しました。
WordPressを使わないEXCEL表のみの単独のページを普通のhtmlファイルで作成して、そこへのリンクをするごく普通の方法で対処しようかなと思っています。
いろいろお騒がせしましたが、大変勉強になりました。
有難うございました。

勉強ついでにメディアクエリについて調べる良いかと思います。

PCの場合は、#body-inの中に、#mainと#sidebarがある状態ですが、スマホになると#mainだけになります。なので、最大化したい場合は、スマホの時に#mainをどうするかと言う設定をしないといけないのです。

モーダルの方をオススメした理由はこのあたりにあります。
アレだけでは対応できないとは思うんですけれども、後はアイデア次第です。