キタジマさん、アップデート作業お疲れさまです。
トピックの主題とは異なりますが、Snow Monkey v19.1.0にアップデートすることで、iPhone横向き表示の不具合が解消されていることを確認しました。ご対応ありがとうございます。
なお、本バージョンからGoogleフォントが内包されることになりましたが、恐らくですが、BIZ UDPMinchoのフォントの記述が”BIZ UDPMincho”, sans-serif;になっているようで、明朝体ではなくゴシック体で表示されているようです。
またBIZ UDPGothicも正しく反映されていないのか、 sans-serifとして表示されているようです。
ただこちらは当初のトピックとは別の問題となりますので、ひとまず本トピックは閉じておきますね。
ご対応等々、ありがとうございました！引き続きまして、よろしくお願いいたします。
プロパティ（上記でいえば font-size とか border-left とか）がダブってなければ大丈夫です！ ただ、いろんなところに記述が散らばっているとわかりにくくなるので、まずは h2 関連のものを並べて、次に h3 関連のものを並べて〜みたいに順番は整えたほうが後でみたときにもわかりやすいと思います。
ありがとうございます！
ちなみにH3の文字サイズを調整する場合は
@media (max-width: 639px) {
.p-entry-content > h3 {
font-size: 18px;
}
}
で合っていますか？
以前こちらでH3のデザインを変更していただき、
以下のような追加CSSを追加しています。
/*H3のデザイン変更*/
.p-entry-content>h3,
.wp-block-group__inner-container>h3 {
border-left: solid 4px #333;
padding-left: 10px;
}
.p-entry-content>h2,
.wp-block-group__inner-container>h2 {
background-color: #000;
color: #fff;
}
これとバッティングするようなことはありますか？
Snow Monkey は画面サイズが 640px 未満をスマホサイズと定義しているのでそれを指定するのと、ページ直下は .p-entry-content なので、下記のような CSS で調整できます。
@media (max-width: 639px) {
.p-entry-content > h2 {
font-size: 20px;
}
}
入れ子にすると記事直下じゃなくなってスタイルが当たらなくなるので、必要に応じてセレクタを追加してください。
早々にありがとうございます！解決しそうで何よりです。
iPhone側の問題だろうと、仕方ないかと諦めかけていたのでホッとしました。。
次回のアップデートに反映いただけると非常に助かります。
ひとまず Snow Monkey のブロックパターンを全部並べて確認してみましたが、大きな問題はなさそうでした。
.c-container にセーフエリア分の padding が入るので、ブロックの入れ子によってはコンテンツが意図した幅より小さくなってしまうということはありえるかもしれません。
任意のタクソノミーの投稿などの投稿一覧を表示するブロックは .snow-monkey-posts .c-entries、アーカイブページ等の一覧ページの一覧部分は .p-archive .c-entries という構造になっているので、それに合わせてセレクタを調整してみると良いかと思います！
なお、このフォーラムも全体に右側に寄ってしまいテキストが見切れたりハンバーガーメニューがほとんど表示されないようになっています。特にセクションのブロークングリッドやセクションのコンテンツの最大幅を指定した場合に影響が強く出るようなので、もう少し検証してみます。
これ僕もさっき気づいて、.c-container の横幅が iPhone のセーフエリアを考慮していないものになっていたのではみ出してしまうようでした。手元で修正はできていて、この公式サイトには反映してみたのですがどうでしょうか？
セクション周りは確認していなかったのでまだおかしいかもしれません！
なるほど、iOSの不具合だったのですね。お忙しい中にご確認等々、本当にありがとうございます！
すでにNoto serifにしていたのですぐには問題ないのですが、もしBIZ UDPを使う際には注意しておきます。
なお余談ですが、iPhoneで横向き表示にした際には、SafariのほかFirefoxやEdgeでもレイアウトが大きく崩れることに気付きました。ブラウザのシミュレーターやAndroidでは大丈夫だったので、これもiOS側の不具合だろうと思っていましたが、ちょうど話題に出たので軽くご報告しておきますね。
なお、このフォーラムも全体に右側に寄ってしまいテキストが見切れたりハンバーガーメニューがほとんど表示されないようになっています。特にセクションのブロークングリッドやセクションのコンテンツの最大幅を指定した場合に影響が強く出るようなので、もう少し検証してみます。
あー！確認できました！
BIZ UDP なテキストが flex アイテムになっていて、親が align-items: center だと潰れてしまうようです。色々プロパティを足したり書き換えたりしてみたのですが解決できませんでした…。iOS Safari の不具合だと思うので、今後の iOS のアップデートで解決すれば良いですが…現状では、BIZ UDP を使うときはそこだけフォントを変えるとか、align-items: center ではないものにするとか、独自に対処してもらうしかなさそうです。
一応 GitHub に issue は立てておきます！
＞キタジマさま
ありがとうございます。
確かに追加CSSで設定していました。記事をサイト全体で４列表示するために設定しています。
そこで、この「お知らせ」部分のみCSSをあててwidth：100％;にしようと思い
タクソノミーブロックに item_news というCSSを設定し
.item_news{
width：100％;
}
これでやってみたのですが、当然のごとく動かずで…。
検証ツールでみると .c-entries__item で設定しないと動かないように見えます。
ですが、全ページの記事の表示を４列にしたいので、.c-entries__itemの25％表示は維持しておいた方がいいのかなと考えます。それとも、４列表示の追加CSSを何か他の方法に変更した方がスムーズでしょうか。
記事の４列表示はこのような追加CSSを入れています。
/*記事アイテム４列表示に */
@media (min-width: 1024px){
.c-entries__item{
flex:0 1 25%;
max-width:25%;
}
}
.c-entries__item を、1024px 以上のウィンドウサイズで 25% にする CSS が追加されているようです。どこかで必要があって追加されているのであれば、セレクタを調整したほうが良さそうです。
height は数値を指定しないといけないのではないですかね？
基本フォント設定で BIZ UDPMincho か BIZ UDGothic にして、全てのウェイトにチェックするということですよね…？ 一応どちらのフォントも試してみたのですが、こちらの環境では下記のスクショのように、端まで改行されずに表示されました。
なにか他にも条件があるんですかねぇ…。
