ヘッダー画像の切り替えについて

例えばの例ですが、

サンプル: スキンづくりの残骸 | codepen

こんな感じで、ページ内の画像を自動でヘッダにすることもできます。そのページに画像がないとダメですけれども。また、ヘッダ画像用にスクリプトを考えていないのであくまでも参考程度の話ですが。

このサンプルは、各リストアイテムのサムネイルを順番にヘッダ画像にしています。

わいひらさん
Hidekichiさん

どうもありがとうございます。
素人にはなかなか難しそうですね。

一応HPとして公開してるのですが、
質問させていただいた件以外にも色々やりたいことがあり、悪戦苦闘しております。
HPは下記サイトになります。
http://amechan-girl.com/

やりたいこと
１.ヘッダー画像をTOPページと投稿ページで分けたい
２.モバイル表示のTOPページのサムネイルを２列表示にしたい
３.関連記事のサムネイル画像のサイズを変更したい(現状正方形)

図々しいかとは思いますが、お力を貸していただけないでしょうか？
よろしくお願いします。

1)

body.page #header {
  background-image: url("画像パス");
  /*その背景画像に関するプロパテイ*/;
}
body.single #header {
  background-image: url("画像パス");
  /*その背景画像に関するプロパテイ*/;
}

2と3は、今スキン作ってるんですけど、blazechariot-cloud9- こんな感じですかね？
※ cloud9でやってるので、自動でサーバーがクローズしている場合があります

Hidekichiさん

どうもありがとうございます。
２に関してトピックに私のやりたい内容のものがありましたので、早速やってみました。
http://wp-simplicity.com/suport/topic/%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%AE%E4%B8%80%E8%A6%A7%E3%83%AA%E3%82%B9%E3%83%88%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB/#post-33793

今まで直接テーマを編集してましたので、この機会に子テーマをインストールし、そちらのstyle.cssに上記トピックで説明されている内容をコピペして適用してみたところ、ヘッダー画像が表示されなくなってしまいました。

> 上記トピックで説明されている内容をコピペして適用してみたところ

どれをコピペされましたか？
上記トピックはリンク先かと思うんですけれども、リンク先の各返信の右側に番号がふってあります。それで何番かを書いてもらえると助かります。
しかしリンク先はリスト表示でヘッダー画像とは関係ないので前レスの#36434の内容でしょうか？

Hidekichiさん

曖昧な書き込みで失礼しました。
#33798のリンク先のCSSをコピーしました。

このトピック#36441のリンク先、該当のレスのリンクにあるサンプルのcssはそのレスのリンクの下に書いてあるようにcssではなくscssで書いてあります。
サンプルのcss欄右側にあるview compiledボタンでcssに変更したものを不要な部分を除いてコピーします。

どれが不要かは、例えばサンプル上でスマホ〜PCまでのレスポンシブ具合を見てもらうために、メディアクエリなどが設定してあったりする場合があります。それらはSimplicityにデフォルトでも備わっている部分で、カスタマイザーの設定によって動作が異なります。

完全レスポンシブが切ってある場合、アクセスした時の端末のサイズによってview portが設定されます。これは本来device-widthが推奨で、それで良いのですが、タブレットでもサイドバーをPC同様に表示したりするための処置かと思います。なのでレスポンシブに画面サイズを変更するだけでは上手く切り替わらずリロードすることでスマホなどに対応したサイズになるようになってたりします。

サンプル上ではこれらは再現できないので、画面幅で一様にレスポンシブに変化するようにメディアクエリで設定してあるわけです。よって、これら設定が残ったままだと期待通りの動作にならない場合等があるので、それら必要のない部分は適用しないようにまずはコピペして、確認してやはり必要だと思った部分を後に追記してもらう感じになるかと思います。

scssではコメントアウトに//が利用できたり、プロパティのネストやmix-inの利用等様々な機能が使えるのですが、これらはcssでは動作しません。なので必ずcssにコンバートする必要があるのです。
なぜそのような書き方をしているかは単純にcssは書くのが面倒だからです。構造を維持していないので、ぱっと見た時にどこを修正すべきかがわかりにくいなども理由の一つです。

Hidekichiさん

cssに変更して子テーマのstyle.cssにコピペして適用しています。
モバイルでHPを確認しましたが、以前と同じ状態(1列表示)でした。

いまいち子テーマの使い方を理解できていないのですが、
今回子テーマをインストールして使用し始めた(今までは直接テーマをカスタマイズ)のですが、
子テーマを有効化した時点で、本テーマで設定していた部分(ヘッダー画像など)は引き継がれなくなるのでしょうか？

初歩的な質問ばかりですいません。

> 本テーマで設定していた部分(ヘッダー画像など)は引き継がれなくなるのでしょうか？

カスタマイザーの設定は親・子で別物ですので各々設定する必要があります。
最初から子テーマを有効にしてあれば親テーマの設定はいりません。

Hidekichiさん

そうしますと、本テーマをカスタマイズしていた場合は、その部分を全て子テーマ側に移行しないとダメということでしょうか？

カスタマイザーの設定はその通りです。
親テーマのphpファイル等へのカスタマイズは移行する必要はありませんが、アップデートで無くなってしまうのでできるだけ子テーマに移せるものは移すべきです。

そうなんですね。
では、親テーマの中身を全て子テーマ側にコピペするのが良いのでしょうか？

> 親テーマの中身を全て子テーマ側にコピペするのが良いのでしょうか？

もしそうした場合は、親テーマのアップデートがあった場合でも子テーマのファイルを読み込むのでアップデートが意味をなしません。
ここらもあって基本的に汎用性があるファイルだけ子テーマにも同名のファイルが存在するわけです。

つまり、親テーマの内容を子テーマにコピーしたら、それは子テーマという名前だけのアップデートされない親テーマを使っているのと同じです。

利用方法としては、例えばcssで言うと、親テーマのデフォルトの内容に追記した部分を、子テーマに移します。
仮に、

#site-title {
  font-size: 24px;
  color: #333;
  width: 500px;
}

これが親テーマのデフォルトであったとしましょう。そして、

#site-title {
  font-size: 18px;
  color: #f00;
  width: 500px;
  border-bottom: 2px solid #333;
}

こんなふうに直接書き換えたとします。そしたら、書き換えた部分だけ抜き出しても良いですし、そのもの全部でも良いですので、子テーマに移します。

#site-title {
  font-size: 18px;
  color: #f00;
  border-bottom: 2px solid #333;
}

こんな感じで。これとは別に、親テーマの最後に追記したものがあるとします。

#site-title {
  margin: 10px;
  padding: 5px;
}

こういう感じのもの。そしたら、それを子テーマに移します。cssの場合、親テーマのcssを子テーマのcssで上書きして適用されますから、元々の内容を上書きする分を子テーマに書けばよいわけです。

例えば、親テーマfunctions.phpに何かしら関数を追加していたとします。そしたら、その分を子テーマfunctions.phpに移せば良いということになります。

つまり親テーマは常にアップデートされる時に上書き保存されます。カスタマイズしたものは無くなってしまうのです。なので、そうならないように子テーマにカスタマイズした分を設定しておくということになります。
ここで問題があるのが、phpファイルを直接書き変えてあるような場合です。処理を書き変えているのではなく、文字を書き変えているのであれば、それはjQuery等で修正できます。がif文を追記していたり、何かしら処理を別途追記していた場合は、親テーマのアップデートごとに追記しなくてはいけないわけです。

多くのwordpressの処理はフックという仕組みがあって、例えばheadタグが呼び出される時や、何かしらのタイミングで動作するようになってます。もしadd actionなどでactionなどを加えていたら、子テーマfunctions.phpでそのアクションをキャンセルして、再定義した内容をフックすればよいわけです。ここらはちょっと高度な話になるのですぐには理解できないかも知れませんが、利用していく内に、カスタマイズをしていく内に順番に理解できていくだろうと思います。

問題はif文とかですよね。こういうのはよく仕組みが理解できていたら、メインループを書き換えたり、色々と子テーマ側でもできるようになるんですけれども、わからない間は、親テーマをその都度書き換えるのが良いかと思います。そのために、カスタマイズした内容は必ずバックアップしておく必要があるのを忘れないで下さい。
無くても作業はできますが、とても面倒臭いことになったりします(笑)

そうすると、カスタマイズで小テーマの方に親テーマで変えた部分をトレースしていけばいいんですね。

そういうことです。
つまり、親テーマはsimplicityの全ての機能を持っているのですが、それを上書きしてカスタマイズするというのが子テーマだと理解されて間違いではないのではないかと思います。

Hidekichiさん

ご丁寧にどうもありがとうございます。
なんとか子テーマの方で編集し、今まで通りの表示ができるようになりました。

本題に戻りますが、
モバイル表示の際に2列表示にさせる件ですが、
子テーマstyle.cssの/* Simplicity子テーマ用のスタイルを書く */の下に#33798のリンク先のCSSをview compiledボタンでcssに変更し、コピーしましたが、
モバイル端末で表示しても１列のままです。

そのモバイル端末でcodepenのサンプルを見た場合もやはり1列になりますか？
あるいは横向きで見た場合はどうでしょうか？

320〜767pxまでは、一応スマホサイズとして指定してあります。320pxジャスト以下は1列になる仕組みになってます。実際codepenのresultの幅を440px以下にしても2列で表示されていますけれども、marginやpaddingを触らない限りサンプル通りになると思うんですけど。

もしかしてiphone5とかですかね？
iphone5とかを利用されている場合は端末の幅が320pxなので1列です。横向きにしたら2列になってるはずです。

320px以下でも2列にしたい場合は、

/*スマホで画面幅が320px以下の時は1列*/
@media screen and (max-width: 320px) {
  #list .entry {
    -webkit-box-flex: 1;
    -webkit-flex: 1 45%;
        -ms-flex: 1 45%;
            flex: 1 45%;
  }
}

こうしとけば2列にはなりますが、1列にならないので、レイアウト的には現状で利用されるのが読みやすさ的にも良いかなぁとは思います。

いや、もっと幅の狭い端末があればいつかは1列になるサイズがあるとは思うんですけどね。

Hidekichiさん

一覧リストのスタイルがデフォルトになっておらず、変更したところ2列表示になりました。
ただ、そうすると一覧の画像サイズが変わってしまうので、困っています。

ちなみにモバイル端末はiPhone6です。

> そうすると一覧の画像サイズが変わってしまうので、困っています。

現状どのようになっていて、どのようにしたいですか？

Hidekichiさん

現状、一覧表示の画像がPC表示、モバイル端末表示ともにスクエアサイズになってしまっています。
また、モバイル表示で、2列表示になった際の一番下の画像のみ1列表示となっています。

画像は３：２表示としたいです。

よろしくお願いします。

サンプル: 3:2の画像をflexで並べる。スマホ2列 | codepen

こんな感じでしょうか。

.entry-thumbとその中のimgをイジってます。それ以外は同じです。

> モバイル表示で、2列表示になった際の一番下の画像のみ1列表示となっています。

これはflexを利用した時にだいたいこんな感じになります。防ぐ方法はありますが、基本的にはアイテムの数を調整すれば直ります。
例えば、端数が出ないように、3列と2列なので6、12、18などの記事数を表示するようにすればokです。wordpressの設定などから1ページあたり何件の記事を表示するかを調整できます。

それでも最終的に記事の数が半端になると、一番最後のページだけ表示があれになりますが、まぁ最後のページなので(笑)

もしくは、jQuery等で、アイテム数を検出して、最適な数になるように、必要なダミーアイテムを挿入すれば良い感じになります。まぁそこまでしなくても、最終ページの記事が1つ(あるいは2つ)だけ横に伸びたりとかそんな感じなので、まぁ気にするほどではないかと。

オンラインテスト用のcloud9のサイトでは2列なので特別考えずに奇数になれば1つダミーを入れるというようなことをしています。※ サーバーが度々落ちてますが、そういうものですのであしからず(笑)

参考: blazechariot-cloud9-

Hidekichiさん

>サンプル: 3:2の画像をflexで並べる。スマホ2列 | codepen
ありがとうございます。確認してみました。
一覧リストのスタイルがデフォルトにして確認したところ、
PCでの表示は正方形のまま、モバイルでは3:2になりましたが、横長で、トリミングされてしまいました。
元画像が縦３：横２になってますので、そのままの比率で表示させたいです。

記事の表示はとりあえず１２にしました。

.entry-thumbを、

padding-top: 150%;

で縦長になります。
まぁ元の画像がどんなサイズであっても横に対する縦がどれぐらいかがわかれば設定できます。
もちろん、元画像が縦長のほうがバッチリサイズで表示されると思いますが、縦３：横２を保ったまま画質を良くすると尚良しです。サムネイルはあんまり画質は関係ないんですけれども。

画像全体を表示するためには比率を保つほうが良いです。

Hidekichiさん

padding-top: 66.666667%;の部分を150%に変更して確認しましたが、
モバイル表示で画像が正方形となりました。

そもそも子テーマを変更する場合は、一覧リストのスタイルはデフォルト表示にしないといけないのでしょうか？
そうしないとモバイル表示は２列になりませんが、それと同時にPC表示も正方形表示に変わってしまいます。

今回のサンプルはcssのflexを利用しているので、リストスタイルのタイル2列で表示すると表示がおかしくなります。なのでリスト表示はデフォルトで設定して下さい。
その理由としては、タイル2列が設定されているとjavascriptでSimplicityに搭載されているmasonryが位置などを書き換えるからです。

masonryのスタイルで書き変えられたものは以下のようにconsoleに入力すれば一時的に取れます。
jQuery(“.entry”).each(function(){ jQuery(this).removeClass(“masonry-brick”);jQuery(this).removeAttr(“style”) }); jQuery(“#list”).removeAttr(“style”).removeClass();

で上記をコンソールから実行して、実際のスタイルだけの表示を見てみると、

こうなってます。つまり、リスト表示のタイル2列あたりの設定が邪魔しているだけという感じですかね。

> それと同時にPC表示も正方形表示に変わってしまいます。
これもおそらくmasonryの仕業でしょう。

cssは真っ先に読み込まれてページをスタイルしますが、後から読み込まれるjavascriptはそれらを上書きします(タグにstyleを直書き※)。この上書きはcssでは修正できません。よって利用しないのがカスタマイズには良いかと思います。

※ [div style=”width: 50%; color: red;”]何かしら文章[/div] こういうものです。すべてをこのstyleが上書きしてしまいますのでcssのスタイルは(styleタグで書かれているプロパティのものは)すべてcssを上書きしてstyleタグの内容になります。
もしこれを上書きしたい場合はmasonryよりも後でjQueryでそれぞれのセレクタにスタイルを指定する必要があります。それはとても面倒臭い内容ですので、初めから利用しないのが吉と言うことです。

masonryはcssをいじらずともその設定にしてくれる便利な機能ですが、カスタマイズできる人にとってみてはただの邪魔な機能でしかありません。わざわざ利用しなくてもcssで何列にでもできるのです。
それらができない人にとっては簡単にできるため機能としてあるだけなので、カスタマイズの際はデフォルトでするのが良いと思います。

Hidekichiさん

どうもありがとうございます。
デフォルトに変更し確認してみましたが、PC,モバイル表示共に正方形表示になっています。
現状HPはその状態になっています。

呼び出している画像ファイルに問題があるのでしょうか？

サムネイルが正方形で作られているので、そうなるみたいですね。てっきりサムネイルも縦長のにしておられるものと思ってました。
これはwordpressで変更できます。サムネイル カスタムサイズの追加というのでググってサイズを追加すると便利になります(※)が、オリジナルを利用するという手もあります。
※カスタムサイズを追加した場合、画像が別に作られるわけですからそれなりにサーバー使用量は増加します。

現在の設定のまま、

サンプル: imgタグからsrcset,sizesを取り除き、サムネイルをオリジナル画像にして利用する | jsFiddle

これを子テーマjavascript.jsに追記して下さい。

もしwordpressにカスタムサイズのサムネイル(150×300、300×600(推奨))が追加できたら上記スクリプトは不要です。ちなみに、利用されているかどうかは調べてませんけれども、変化がない場合はjetpackのphotonは切っておいて下さい。
jQueryで取り除いたsrcsetやらを消したのにまた復帰させる可能性があります。

■テストの流れ
上記スクリプトで、
img.removeAttr(“srcset sizes”);
という箇所がありますが、これは入れなくても良いかも知れないので、ひとまず、
//img.removeAttr(“srcset sizes”);
こんな感じにコメントアウトしておき、最初のテストをして下さい。
それでもサイズがおかしい場合は、コメントアウトを取ってsrcset sizesを取り除くのを有効にして下さい
まだそれでも怪しい場合は、jetpackのphoton等を停止という流れかと思います。
ここまでしても尚、怖いな、おかしいなと稲川淳二バリにやばくなった場合は再度レスを下さい。

Hidekichiさん

ご丁寧にありがとうございます。

画像の指定を直接行うことはできないのでしょうか？
親テーマの中のfunction.phpで
add_image_size(‘thumb320_raw’,320,0,false);
があり、縦長画像を画像アップロード時に生成してると思ってるのですが、
それは間違ってますでしょうか？
thumb320_rawをサムネイル画像として指定できれば良いのかなと思ったのですが。

phpをいじるなら、
add_image_size(‘thumb300_hx2’,300,600,false);

などとして、サムネイルを表示する所で、thumb300_hx2を指定すればよいのですが、僕がより良いと思うのは、メディアのアップロード時にそれらの(必要な)サイズを指定できるようにするという感じです。phpをいじると親テーマのアップデートの時にまた修正しないといけませんし、どっちにしろ面倒ですから。

実際大きな画像ならどんなサイズでも良いんです。
例えば人物が中央に写っていて、その回りの背景がどこまでもあるような画像でも、センタリングしたら人物しか表示しないわけですし。センタリングした時に、欲しい対象が正しく写っているのであればサイズはいくつでも構いません(注]小さい画像の場合は引き伸ばされるので荒くなる)

ここらから、多少の読み込みの時間の問題があったとしてもオリジナルの画像を使えばよいのではなかろうかと思った次第です。特別サムネイルにする必要はないのではなかろうかと思ったりも。確かにサムネイルのほうが読み込みは速いと思うんですけれども。

速くするための方法的には以下の方法もあります。
1枚の画像に必要な画像が同じサイズでいくつか並んで保存してある場合、シゲさんのサイトで言うなら人物が5人ずつとか横並びになっていたとします(並べすぎると1枚の画像容量が大きくなりすぎるため。
この画像をA.jpgとしましょう。
A.jpgは300×600の原寸大の画像があるとして、

このA.jpgをcssのbackground-imageで読み込んで、background-positionで300pxずつずらして表示します。そうすると、1枚の画像を使いまわせますからhttpリクエストはかなり押さえられます。

1ページあたりデフォルトで10件ですから、10人分のデータ画像があれば1ページで読み込む画像は1枚のみということになります。これを実現するにはjQuery等で画像を指定しないといけないので簡単ではありませんが、方法としてはこういうこともできるということです。
サンプル: 画像スプライトで表示 | codepen

これの問題点は、画像をレスポンシブにするのが難しいのと(やろうと思えばできなくはないけれどもこの方法でやるのは面倒臭いだけ(笑))、次の画像をどのようにして切り替えるかが注意ポイントです。10件固定と決まっていれば10件毎に背景画像を次のものへと読みこめばよい感じになります。また画像の並びにも注意しなくてはいけません。どちら側から読み込むかで指定方法が異なります。これは記事の並びと合わせる必要があるのでかなりの注意が必要です。

とまぁ横道にそれましたが、こういうのが高速化への道なんですけれども、スクリプトがいじれないとか構造を理解していない間はオススメできない方法です。
画像自体は慣れたらすぐに作れるようになりますが、ある程度前もってデータを用意しておく必要があるので時間がかかかります。
今回のサンプル製作でかかった時間は画像収集から画像・スクリプト作成まで30分ぐらいですけれども、不慣れな場合はこれだけで何時間もかかかってしまうかも知れません。そんな時間があるならサックリとオリジナルの画像か、対応するサムネイルでやってしまうのが時間の節約という感じかと思います。

Hidekichiさん

ご丁寧にありがとうございます。

３：２ですでに生成している画像があったので、それをサムネイル画像として呼び出すことでなんとかやりたい形にはできました。
本当にありがとうございます。

まだ手を加えたいところ、ヘッダー画像の切り替えや、関連記事の2列表示(モバイル表示時)などありますので、
少しずつカスタマイズできたらと思っています。

お力を貸していただけると幸いです。