スマホ画面でのヘッダー画像の拡大について

すいません。ＵＲＬはこちらです。

http://chibimama.club/

ひとまずサンプルを作ってみました。

サンプル: jQueryで一定のアスペクトを保つヘッダー画像 | codepen

codepenでは、result画面とhtmlやらソース部分の境界をマウスで動かすことができますので、それでレスポンシブにサイズが変更されているかを確認してみて下さい。

元々の画像のサイズが600x130pxだったのでそれを元にして作っています。
画像自体に結構な余白があるので、そのせいで見た目にスペースができていますが、画像自体の余白を無くせばこれらはスッキリします。cssで余白を調整できるようにしたので画像ギリギリで余白を無くしても構いません。※ ただし画像の方に余白が付けてあるので、cssで色々するとアレなのでできるだけ画像の方を修正お願いします。
修正された画像は、同じファイル名で同じ場所にアップロードして下さい。その際現在の画像が必要な場合は必ず修正する前にバックアップをしておいて下さい。もしファイル名を変更したりアップロード場所を変更する場合は、その旨と新規画像へのパスをレス頂けると助かります。

cssや画像はだいどらさんのサイトのものをそのまま流用しているので、オリジナルを変更されたらこのサンプルもサイズやらが変わってしまうかと思います(同じ場所へ修正した画像をアップロードした場合)。
まずは画像の回りの余白を必要なだけにすることから始めてみて下さい。

画像のサイズ変更に伴い、スクリプトの方にも変更が必要ですが、色々と下準備ができたらスクリプトもその都度こちらでアップデートしますので、最終的な状態になるまでサンプルから本番サイトへの流用はひとまず止めておいて下さい。

またcss部で/*スタイルがオカシイ部分を修正*/と言う箇所の内容をひとまずサイトの方へ反映させてみて下さい。
※ サンプルのcss欄で書いてあるのはscssです。必ずcss欄右側にあるview compiledボタンを押してcssに変更してから、必要な内容を子テーマstyle.css等に入れて下さい。

修正点としては、タイトルのフォントサイズ、ディスクリプションのフォントサイズとline-heightあたりです。その下にある/*不要*/はレスポンシブ表示にするためのものですので本来必要ありません。

cssの修正として子テーマstyle.cssに追記するわけですが、ひとまずstyle.cssの最後に追記していって下さい。
一部色などの設定も入れましたが、気になる所しか直していないので、それまでのカスタマイズを消してしまうと、そこもまた記入する必要が出てくるため、style.cssの最後に追記することでおかしな部分は上書き修正するという感じです。

最終的な段階まで行けば、何が必要で何が不要かはデベロッパーツールで見れるので、今回行う修正が上手く動作するかどうかを見るために、これまでの内容はそのまま、新たに追記する感じでおねがいします。
また追記する際には、

/* ヘッダ修正分 20160128 */
などと、追記する箇所にコメントを入れておいて、後でわかりやすいようにしておくことをオススメします。

まとめると、
・cssのオカシイ部分を修正、あるいは再チェック(フォントサイズやline-height)
・画像の回りの余白を本来必要なだけになるように調整。

画像については、上と右に余白がかなりついています。例えば画像左側についてもcssで調整できるので、画像ギリギリで余白なしぐらいでも問題ありません。

・サンプルのjQuery部分やcssの最初に書いてあるものは、ひとまず手を付けず上記のみまず修正して下さい

Hidekichiさま

いつも大変お世話になっております。
夜中の投稿にも関わらずありがとうございます。

アドバイスいただきました通り、ヘッダー画像の余白の削除。同じファイル名でアップロード（既存画像はサーバーから削除）、/*スタイルがオカシイ部分を修正*/のＣＳＳを子テーマのstyle.cssの一番下に追記を行いました。文字の位置調整はまだ行っていません。iphoneで確認すると、今のところヘッダー画像は同じように拡大表示さされています。

お手数おかけしますが、引き続きよろしくお願いいたします。

だいどら

サンプルをアップデートしました。
読み込み時、リサイズ時にいきなりロゴ画像のサイズが変わるのではなくアニメーションするようにしてみました。不要であれば、.wrapperのtransitionを削除して下さい。

また、ロゴ画像のまわりにマージンが入ってます。どれぐらい必要かわからなかったので適当に入れてます。セレクタを分けて入れてあるので必要に応じて設定したりしなかったりを調整して下さい。
またこれらは.wrapperに対して行っていますが、サイトタイトルあるいはディスクリプションに入れても良いかと思います。

cssは前レスでも説明したようにscssで書いてあるので、view compiledボタンでcssに変更して利用して下さい。

ロゴ画像がカスタマイザーから挿入されているか、あるいは独自に#h-topに入れられたのかわかりませんが入っています。これらは不要なので取り除いても動作します。
取り除かれた場合は、jQueryの23-26行目を削除あるいは26行目をコメントアウトして下さい。
取り除かない場合はこれら行で非表示にしています。

後はサンプルjs欄を子テーマjavascript.jsに丸ごとコピーで動作するかと思います。

今回の動作は、#header-in .alignleftのサイトタイトルとディスクリプションの間に.wrapperを挿入しその中に.insertを入れています。画像の横幅は.wrapperが作っており.insertは100%表示になっています。
元々の画像のサイズから縦の割合を出して、.insertのheightを0に設定した後、paddingでその割合を当てることで高さを作っています。
.wrapperはそれらが作った高さで押し広げられています。

リサイズで、#header-inの幅が元の画像の幅よりも小さくなった時、それまでオリジナルの画像からロゴ画像のサイズを処理していましたが、横幅を#header-inのサイズにすることで画像のアスペクトを保っています。

今回はロゴ画像を.wrapperの.insertに入れましたが、単純にimgタグで入れてもできるだろうと思います。その場合、スクリプトももっと単純に書けると思うのですが応用が効かなくなるので、要素の背景で入れました。

これらスクリプト等を実装して何かしら問題がある場合はまたレス下さい。

Hidekichiさま

こんなにもお時間を使っていただきまして、大変申しわけありません。

そしてありがとうございます。

もう、私には何がなんだかわからない世界です。

基本的なことで申し訳ありませんが、codepenで出力したCSSやJSはどのファイルに書き込めばよいでしょうか？

聞くのもお恥ずかしい限りですが、よろしくお願いいたします。

だいどら

申し訳ありません。質問の補足です。

simplicity2の子テーマを使っているのですが、ダッシュボード上では、子テーマjavascript.jsというのがありません。

表示するには何か操作が必要なのでしょうか？

だいどら

Hidekichiさま

たいへんお世話になっております。

サンプルjs欄はサーバー上の子テーマにコピペいたしました。

その結果、バッチリ表示されました。

ＰＣでもiphoneでも画像は適切なサイズで表示されています。さらに、iphoneを横にしたときも画面の幅に合わせて画像が調節されました。

昨日の夜中の質問にも関わらず、夜中のうちにお返事を頂き、しかも日中にもお返事頂きまして本当にお世話になりました。

今回の件は、私の知識では絶対に無理でした。

本当にありがとうございました。これからもよろしくお願いいたします。

失礼いたします。

だいどら

P.S 今回のcodepenの画面はこれからも閲覧可能ですか？

またまた質問で申し訳ありません。

トップページでは、表示されるのですが、投稿画面だとヘッダー画像が消えてしまいます。

どこを修正すればよろしいでしょうか？

まず、
子テーマを利用されているかと思うので、
子テーマのstyle.cssにscssをcssに変換したものを最後に追記。
〃のjavascript.jsにjs欄を丸ごと追記

> ダッシュボード上では、子テーマjavascript.jsというのがありません。
基本的にファイルの更新などは、ローカルでテキストエディターなどで行いftpでサーバーにアップロードします。
全角スペースの使用や、コードの閉じ忘れなどがチェックできるので、便利です。

> トップページでは、表示されるのですが、投稿画面だと…
一応jQueryやらは読み込んでいるようですが、Google+のスクリプトで読み込みが続いているみたいなので、何が原因かははっきりしないんですが、ひとまずsnsのタイプを高速なタイプに変えてみて下さい。
jQuery自体は読み込めていると思いますし、トップページは問題ないのでプラグインが原因とは考えにくいですが、そのあたりも疑う必要があるかも知れません。
ヘッドクリーナー、autoptimize等の停止、怪しいプラグインの停止あたりもやってみても良いかも知れません。

もしかするとデフォルトのsnsボタンのスクリプトの取得アドレス等が変更されたのかも知れませんし。

また、

ロゴ画像がカスタマイザーから挿入されているか、あるいは独自に#h-topに入れられたのかわかりませんが入っています。これらは不要なので取り除いても動作します。
取り除かれた場合は、jQueryの23-26行目を削除あるいは26行目をコメントアウトして下さい。
取り除かない場合はこれら行で非表示にしています。

これに従い、jqueryの
$(“#h-top”).removeAttr(“style”);
を先頭に//を入れるなりしてコメントアウトして下さい。カスタマイザーで背景画像を入れているか、独自で#h-topに入れられている場合はそのままで構いません。

理想としてはjQueryの読み込みのあとすぐにjavascript.jsが読み込まれている方がよいのですが、構造上フッタあたりでjavascript.jsが読み込まれます。そうするとそれまで(#body内等)に何かあった場合、巻き添えで停止する可能性があったりするのでそのせいかなぁと思ったりも。
トップページに無くて投稿ページにあるものはsnsなどのボタンですので、ここらは非常に怪しいです。
もちろん他の原因が作用している可能性もあります。

ひとまずこのあたりをチェックしてみて下さい。

> P.S 今回のcodepenの画面はこれからも閲覧可能ですか？
問題なければ残しておきます。

Hidekichiさま

ありがとうございます。

snsタイプを高速しました。
26行目をコメントアウトしました。
全プラグインを一度止めて見ました。

しかし状況は変わりませんでした。

P.S codepenの画面残しておいていただけるとうれしいです。

またまた申し訳ありません。

素人ながらいろいろ調べてみているのですが、TOPページのヘッダーのサイトタイトルはh1ですが、
投稿ページなどほかのページのヘッダーのサイトタイトルはh1ではないようです。
そのため、h1の後にinsertが挿入されないため画像が入らないのかなと思いました。

ぜんぜん的外れだったら申し訳ありません。

自力ではこれ以上原因が思いつきませんでした・・・。

だいどら

またまた申し訳ありません。

素人ながらいろいろ調べてみているのですが、TOPページのヘッダーのサイトタイトルはh1ですが、
投稿ページなどほかのページのヘッダーのサイトタイトルはh1ではないようです。
そのため、h1の後にinsertが挿入されないため画像が入らないのかなと思いました。

ぜんぜん的外れだったら申し訳ありません。

自力ではこれ以上原因が思いつきませんでした・・・。

だいどら

なぜか子テーマstyle.cssが読み込まれていないように思います。
デベロッパーツールで子テーマstyle.cssのプロパティがない感じです。テーマは子テーマが有効になってますよね？

しかしファイル自体は読み込まれているというなんだかよくわからない状態です。
ここから、style.cssの最後に入れてある

/*不要*/
#header-in {
  width: 1070px;
}
@media screen and (max-width: 750px) {
  #header-in {
    width: 100% !important;
  }
}

ここはコメント通り不要です。

ひとまず、個人的にはテーマを再インストールするのが良いかと思います。その際、テーマを一旦削除するので、これまでのカスタマイズが無くなります。

順序的には、
・simplicity以外のテーマを有効にする。
・子テーマを削除(必要があればバックアップしておく)
・親テーマを削除
・Simplicity公式から最新のテーマをダウンロード(zip)
・〃子テーマもダウンロード(zip)
・ダッシュボード→テーマから新規ファイルアップロード→zip丸ごと親テーマインストール
・〃子テーマインストール→子テーマ有効にする
・子テーマstyle.cssにサンプルから必要な記述を追記
・子テーマjavascript.jsにサンプルから丸ごとコピペ・不要部分コメントアウト

こんな感じです。通常、親テーマ・子テーマをインストールした段階ではデフォルトの表示になりますが、すでにカスタマイザーの設定は保存されていると思うので、それを読み込むだろうと思います。
この状態で本来はftpを利用します。

まず、サーバーに最新の親・子テーマが入っているわけですから、必要なファイルをローカルのPCに持っていない場合はサーバーからダウンロードします。
もちろん予めテーマをダウンロードしたzipがあるので、それを解凍してPCの任意のフォルダに展開しておいても良いです。その場合は、
wp-content/themes/というディレクトリ、つまりwp-contentフォルダの中にthemesフォルダを作っておいて、その中に親・子テーマを解凍します。wordpressと同じ構造を作っておくとファイルの動機をする時に便利なので。
で、ftpでサーバーと同じディレクトリの操作するわけです。

ローカルでは、例えばdocument/wp-content/themes/simplicity2-child/のstyle.cssとjavascript.jsを編集します。つまりサンプルからコピペなどです。
保存すればftpでローカルの更新したファイルをサーバーの同ファイルへアップロードし上書きします。日付が新しいファイルは上書きなどと条件を付けておくと不要なファイルを上書きする間違いが無くなるでしょう。

今後変更があれば、常にローカルのファイルを編集してサーバーにアップロードという作業になります。基本デザインは子テーマのstyle.cssとjavascript.jsぐらいしか触らないと思うので(場合によってはmobile.css等も)、作業自体は極簡単なことです。

wordpressでもファイルを編集できますが、それは逆を言うと誰かに乗っ取られた場合、他人が記事やデザインを変更できるということです。セキュリティ的には甘いということですが、ガチガチのセキュリティは不便なだけですので、できるだけローカルで、例えばatomやbraketsなどの次世代テキストエディターなどを用い、コピペ一つにしても何かしらエラーがないか閉じ忘れが無いか等を監視しながら、慎重にカスタマイズする必要があります。

これらは記述の間違いをハイライト表示してくれたり、編集に便利な機能を追加できたりといたれりつくせりです。寝ログにも記事があるので、そういう開発環境を持つべきだと思います。
僕がwindowsを使っていた頃はnotepad++と言う素晴らしいエディタを使っていましたが、これら次世代エディターが出てきたおかげでwindowsからOSを変えてからも便利に作業できるようになってます。

atom: https://atom.io/
brakets: http://brackets.io/

使い方やプラグインの導入はぐぐってみてください。

で、話は戻り、ブログの記事自体もたくさん投稿されているわけではないようですし、これから作っていくと言う感じみたいなので、再インストールするのであれば今かなと思います。
色々と手を入れた後でやり直すのは大変なので。

先日、カスタマイザーの設定がうまく表示されないというトピックが立ちましたが、それらが影響して子テーマstyle.cssが上手く読み込めてないだけかも知れません。なので細かな不具合を修正するためにも最新版にするのは有効かと思います。

トップページで動作しているのですから本来は投稿ページでも問題なく動作するはずです。ましてやヘッダ部分なのでトップページも投稿ページも共通のはずですし。
ぱっと見た目でわからないエラー等があるのかも知れませんし、その原因がどこにあるかははっきりとはわからないので、再インストールでサックリ行ったほうが良いのではなかろうかと言う感じです。

今見てみたら、

子テーマstyle.cssの

#main .entry {

部分の閉じタグがないみたいです。
これが原因かどうかはわかりませんが、まず閉じて様子を見て、それでもダメな場合はテーマを再インストールという感じでどうでしょうか？

Hidekichiさま

すいません。いろいろいじっていたら、#main .entry {　のとじ忘れがありました。

いま、閉じてみました。もしかして、見ていただいた時点ではすでにとじ忘れていたかもしれません。
（TOPページのヘッダーも消えてしまって、先程まで原因を探していました。）
今はどうでしょうか？やはりテーマと子テーマを入れ直したほうがよろしいでしょうか？

、#main .entry {　　閉じてみましたが、やはりTOPページ以外ではヘッダー画像がありません。

Hidekichiさま

明日、テーマと子テーマを再インストールしてみます。

simplicityはTOPページのサイトタイトルがH1で、投稿ページは記事タイトルがH1になっているようですが、
これは関係ありませんか？

作って頂いたJavascriptの方にはheader in.alignleft h1の後にいれる記述でしたので気になってしまいました。まと外れでしたら申し訳ありません。

この件でHidekichiさまに多くのお時間を使わせてしまって大変申し訳ありません。大変感謝しております。

また、明日ご報告させていただきます。

だいどら

> simplicityはTOPページのサイトタイトルがH1で、
> 投稿ページは記事タイトルがH1になっているようですが、
> これは関係ありませんか？

それだ!!

投稿ページのsite-titleがp要素だというのは知っていたんですが、codepenにhtmlをコピペする時にトップページのヘッダをコピペしたんですが、それがh1になっていたので、てっきりわいひらさんが直したんだと思い込んでました。

んじゃ解決策としては、
該当部分(.wrapperを挿入している部分)を、
$(“#site-title”).after(“<div class=’wrapper’>”);
と変更するだけです。サンプルは変更しました。

デベロッパーツールのconsoleからサイト上の位置にdiv(.wrapper、.insert)を作成して、表示されることを確認しました。

※ これはデベロッパーツール上での動作なので実際にはスクリプトを書き変えて実行させる必要があります。

Hidekichiさま

ご教授いただきましたとおりに、javascriptを変更しました。

その結果、どのページでも表示されました。これで、目指していたことが、すべて達成できました。

Hidekichiさまには、本当に多くの時間を割いていただいて大変申しわけありませんでした。

大変感謝しております。本当にありがとうございました。

また本件だけでなく、ローカル環境での編集までご教授いただき大変勉強になりました。

私の知識ではまだまだハードルが高そうですが、少しづつ挑戦してみようと思います。

今回は本当にありがとうございました。

きっとまたお世話になることもあると思いますが、よろしくお願いいたします。

それでは、失礼いたします。

だいどら