1カラム（狭い）にした時のヘッダーとメニューの幅について

現在そうなっているページはありますか？
サイトを見せてもらったんですけど、見つからなかったので。

1カラムがどうなっているかまだ見てないんですけど、以前わいひらさんがcssだけでやったと言っていたので、おそらくなんですが、

#header-in, #navi-inを他のページと同じサイズにしたらいいのではないかと想像します。
今、ローカルで見た所、インラインで書かれてるっぽいのでjQueryでアドレス判断して#header-in, #navi-inのサイズを変えるぐらいなんじゃないかなぁと思ったり。

もしくは、ページの記事IDで判断して、header-insert.phpあたりに、インラインで出力されているものを更にインラインで上書きするとか。

<?php if (is_page('xx')): ?>
<style>
 #header-in,#navi-in { width: 1024px; }
</style>
<?php endif; ?>

あくまで一例ですけどね。

(function($){
  $(function(){
    var checkAddress = "http://tontosan.com/contact/";
    var nowAddress = $(location).attr('href');
    if (checkAddress === nowAddress){
      $("#header-in, #navi-in").addClass("wide");
    }
  });
})(jQuery);

で、cssに

.wide {
  width: 1024px; /*値は任意で調整*/
}

これらは実際に試してないのでうまくいくかはアレですが、こんな感じでイケるんじゃなかろうかと思います。jQueryは、チェックしたいアドレスと現在のアドレスが同じだった時に、.wideと言うクラスを#header-inと#navi-inに付けるスクリプトです。
別途cssで.wideってのが必要になります。ただ、cssをあとづけで効かないかも知れないので、
その場合は、

$("#header-in, #navi-in").css({
  width: 1024 + "px"
});

あたりとすれば良いかも知れません。
もうひとつ方法的には、

(function($){
  $(function(){
    var checkAddress = "http://tontosan.com/contact/";
    var nowAddress = $(location).attr('href');
    if (checkAddress === nowAddress){
      $("head").append("<style id='test'>#header-in, #navi-in{width:1024px;}</style>");
    }
  });
})(jQuery);

こういうのもできるかと思います。これはheadタグの最後にidがtestのstyleタグを入れ込むものです。
これだったらおそらく上書きできるかと思います。まぁとにかく、インラインで書かれているものについては親・子テーマのcssのどのプロパティを触っても上書きできないんじゃなかろうかと思います。

例外として、メディアクエリでそれぞれの画面幅の#header-in, #navi-inを分離して(ヘッダ、ナビ、ボディ、フッタのそれぞれ-inの部分でまとめられていると思うので)、widthに!importantをつけて上書きできないようにしても良いかと思います。

メディアクエリで指定しないと、スマホの時に#header-in, #navi-inが画面をはみ出すとかになるので注意が必要です。もし、インラインのcssで!importantが指定してある場合は、この方法はできません。

cssよりもjQueryの方が後で読み込まれるので通常はjQueryでたいてい上書きできるのですが、インラインでheadにstyleとして書かれている場合は、タグに直接書く(jQueryのcss)、あるいはそのheadのインラインよりも後で読み込まれる部分に更にそれを上書きするstyleを入れ込む(jQueryのappend,phpのis_pageのやつ)を入れたり、などとても面倒臭いです。

1カラムにするにあたって、bodyタグに.one_column(_narrow | _wide)クラスをphpで入れて、#header-in,#navi-in,#body-in,#footer-inにそれぞれ.narrowなり.wideが仮に入っているとすれば、

.one_column_narrow #header-in.narrow {
  /*width: 740px; defaultの設定*/
  width: 1024px; /*カスタマイズで後から追加した場合*/
}

これだけでカスタマイズできるんですけどね。インラインで書かれてるって所が厳しい部分なのです。

Hidekichi様、丁寧な説明ありがとうございます。

お問い合わせ（contact）のページだったのですが、見た目が良くなかったので1カラム（広い）にしていました。

教えて頂いた件など試してみましたが自分のレベル不足で満足行く形には出来ませんでした。

とりあえず　Page Builder by SiteOrigin　というプラグインで設置したウィジェットで無理やり形作れたので、もう少し基礎的なことがきちんと理解できるまでこれでしのぎます。

わいひら様

やりたかったことは特定の固定ページで
1カラム（狭い）のヘッダーを広げる
1カラム（広い）の本文幅を狭める
2カラムのサイドバーを隠して本文を中央に持ってくる
のいずれかで、どれも同じような表示になると思ったんですがテーマをいじることが自分にはまだ難しかったようです。
とりあえずプラグインで近い形が出来たのでよしとします。
有難うございました。

もうひとつ方法的にはの後に書いてあるスクリプトを、子テーマjavascript.jsにまんま追記して、１カラム幅狭い方で、試してもらえませんでしょうか？

これいけるように思うんですけれども。
もしかすると、

var nowAddress = $(location).attr(‘href’);

ここが、

var nowAddress = location.href;

でも良いように思ったりも。
また、appendの()の中にあるstyle部分のwidthの値は任意のものに書き変えて下さい。オリジナルのままだと1070pxだったでしょうか。
動作的には、htmlのhead部分の最後あたりにstyleタグを入れる感じのものです。

これが成功したら、他にもできる事が色々とあるかと思うので。

トントさん以外でも、何かしら任意のページ(単発ですが。適用したいページが複数ある場合は別途処理が必要)、

var checkAddress = “http://tontosan.com/contact/”;

この部分が、スクリプトが適用されるページになります(※)ので、アドレス書き変えたりして試してもらえると助かります。

※ 今見ているページがcheckAddressになったら、スクリプト実行って感じです

Hidekichi様

＞もうひとつ方法的にはの後に書いてあるスクリプトを、子テーマjavascript.jsにまんま追記して、１カラム幅狭い方で、試してもらえませんでしょうか？

どの後ろに書いてあるスクリプトのことでしょうか？
申し訳ありませんが再度教えて頂けると助かります。

#32651 の真ん中あたり、
$(“head”).append(“<style id=’test’>…の書いてあるやつです。

(function($){
…
})(jQuery);

までコピペして、子テーマjavascript.jsに。
アドレスもトントさんの問い合わせページのやつなので調度良いので(笑)

#32669で書いたように、スクリプトのまんまだと、
var nowAddress = $(location).attr(‘href’);
こう(↑)なってますが、

var nowAddress = location.href;
で、良いかと思いますので、そこだけ書きなおして下さい(うまく動作しなかった場合)。

→ うまく動作した場合は、htmlのheadタグの終わりあたりに、idがtestとしてstyleタグが挿入されます。
終わりあたりというのは、Simplicityのjavascript.jsより後で読み込まれるスクリプトが何かしらheadに対してスタイルなどを挿入した場合は、一番最後になるわけではありませんので、最後辺りになります。

■現在のアドレスを確実に知る方法
また現在のアドレスがどうなっているかを確かめるには、(↑のnowAddressの)下に、
console.log(“今見てるページのaddress: “, nowAddress);
と入れておくと、F12キーのconsoleに現在のアドレスが表示されます。
このアドレスがjavascriptがその時取得しているアドレスです。これがcheckAddressに入っていれば間違いなくそのページだけ適用することができます。

スクリプトをアップロードして問い合わせページでどうなるか試してみて、動作してないなぁと思われたら、アドレスの確認をconsole.logにて行って下さい。それ以外は確認する必要はありません。

console.logにてアドレスの確認をした場合、確認をし終わったら、console.logの前に//と半角スラッシュを2つ入れてコメントアウトしておいて下さい。
別に入れておいてもいいんですけどね。

Hidekichi様

有難うございます。
上記の形で子テーマjavascript.jsにコピペしたところ概ね希望通りにできました。
多少位置がずれますがそこは仕方ないものでしょうか？。
あと、ヘッダーのSMSフォローボタンがそのページだけ表示されなくなります。
こちらはヘッダーのボタンは外してもいいかなと思うので気になりませんが一応報告です。

僕が紹介したスクリプトは、

#header-in, #navi-in{
  width:1024px;
}

これをhtmlのheadタグの後ろ辺りに挿入するものなので、ページ自体の機能を変更するものではなく、#headerと#naviの入ってる親要素(#header-in, #navi-in)の横幅(width)を1024pxにするものです。1024pxは任意良い感じのサイズに調整すれば他のページと同じになります。

#32669 でレスしたように、width:1024pxを1070pxにしたら他のメニューと同じ幅になるかと思います。

もし、幅のサイズ調整が、タブレット・スマホで必要ない場合は、

(function($){
  $(function(){
    if (window.innerWidth > 1069){  //追加
    ... 中身は同じなので中略 ...
    } // 追加
  });
})(jQuery);

このようにして、$(function(){ の後に if文追加、});前に } を追加でウィンドウ幅が1069px以上の時と言う条件が付けられます。つまりはPCで見る時だけヘッダとメニューを任意のサイズに変更できるということです。

follow(mobile)メニューが出ないのは、固定ページだからではないでしょうか？
カスタマイザーにそういう設定があったかと思います(←確かめてない(笑)あったような気がします。
入れたい場合は、
$(“head”).append(“<style id=’test’>#header-in, #navi-in{width:1024px;}</style>”);

ここのwidth:1024px;に続いて、

.alignright .top-sns-follows{display:block;}

を追加したら表示されます。つまり、
$(“head”).append(“<style id=’test’>#header-in, #navi-in{width:1024px;}.alignright .top-sns-follows{display:block;}</style>”);
こういう感じです。

クォート(クォーテーション)がここでは変換されるかも知れないので、おかしい場合は任意入れなおして下さい。

＆gt;は＞の半角です。コードが変換されるの忘れてた(汗)

Hidekichi様

いろいろ有難うございました。
よくわからないことが多いので少し勉強してから再度チャレンジします。

わいひらさんが、また直してくれるだろうと思うので、全部書きますけれども

(function($){
  $(function(){
    if (window.innerWidth > 1069){
      var checkAddress = "http://tontosan.com/contact/";
      var nowAddress = location.href;
      if (checkAddress === nowAddress){
        $("head").append("<style id='test'>#header-in, #navi-in{width:1070px;}.alignright .top-sns-follows{display:block;}</style>");
      }
    }
  });
})(jQuery);

こういうことです。
上記は、PC表示の時のデフォルトのヘッダ幅(正確には#header-inの幅)を1070pxにして、フォローボタンを表示するものです。
※ ソースコードは管理人以外の人が投稿すると〈〉や”などが実体化(数値化…うーむ、エンティティ)されます。わいひらさんが気づいたら直してくれてます。

>多少位置がずれますがそこは仕方ないものでしょうか？

この位置ずれは、どのことかがいまいちアレなんですが、おそらく言われているのは、ちょっとヘッダ部分が狭くなった、あるいはタイトルが右に動くような気がすると言うことだろうと思うんですけれども、これはこのトピックのレスで紹介したスクリプトがwidth:1024pxで設定してあるためです。

PCデフォルトは1070pxです。これはもちろん知っていたのですが、コピペするだけでは、いざサイトをカスタマイズした時に、どこを変更すれば良いのかわからなくなるのではないか？と思ったので敢えて1024pxにしてました。

window.innerWidth: ブラウザの幅
1069: #header-inや#body-inなど、PCのデフォルトの横幅は1070pxです
checkAddress: スクリプトを適用(あるいはチェック)したいアドレス
nowAddress: アクセスしている(表示している)アドレス
$(“head”): htmlのheadタグを指定するjQueryオブジェクト
.append: $(…)の中身のタグの最後尾に.append()のカッコの中身を追加
style id=”test”: 通常のスタイルタグで、その中身はただのcss

これでご理解頂けるでしょうか？(笑)

Hidekichi様

おかげさまで希望通りにヘッダーロゴとメニューが他のページと同じ位置に来るようになりました。
いろいろと詳しく説明して頂き本当に有難うございました。