[ 解決済 ] Generation 2 から Generation 3に変更した際のレイアウト崩れの対応方法についての相談
[ 解決済 ] Generation 2 から Generation 3に変更した際のレイアウト崩れの対応方法についての相談
- このトピックには9件の返信、4人の参加者があり、最後に
により2年、 11ヶ月前に更新されました。
-
投稿
-
■ WordPress のバージョン
WordPress 5.8.2■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
14.13.5■ Pro Unit のバージョン
0.14.0■ スキンの種類
Origin III■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。■ 期待する動作
generation 2のレイアウトに直したい■ 自分で試した事
cssで対応や仕様機能で調整■ 症状が発生するブラウザ
Chrome■ 実際の症状
generation 3に変更したため意図しないヘッダーが表示されたりレイアウト崩れが発生■ その他特記事項
どういう方法でレイアウト崩れに対応したらいいかご教示いただけないでしょうかという相談になります。Lightning(G2)で作ったサイトをLightning(G3) + Pro unitにしました。
Pro unitをインストール後、カスタマイズ＞Lightning機能設定＞世代設定をGeneration 2 から Generation 3に変更したところ、ヘッダーが表示されたりレイアウト崩れが発生しました。ヘッダーの表示は、固定ページの編集内のデザイン設定＞ヘッダーを表示しないで消すことができますし、display:noneでも消せます。
この場合、どちらで対応、または他の案で対応するのがいいのでしょうか？また、レイアウト崩れ（？）のようなものが発生しました。
横幅が、g2はwidth:970pxだったのが、g3はwidth1100pxになったため、970pxで作った画像の左右に隙間が出来るという症状です。
cssで横幅を970pxにし、margin:0 autoにしてやれば同じになりました。
こういう対処でいいのかな？ 何か影響でたりするかな？と気になっています。どうぞよろしくお願いいたします。
複数の質問がありますが、どの質問も状況を補足確認しなおして数回やりとりが必要なので一つのトピックでは回答が難しいです。
症状毎に分割してトピックを立ててください。
> ヘッダーの表示は、固定ページの編集内のデザイン設定＞ヘッダーを表示しないで消すことができますし、display:noneでも消せます。この場合、どちらで対応、または他の案で対応するのがいいのでしょうか？
→ どちらでもかまいません。
display:none の方は、書いた事を忘れるとかどこに書いたかわからなくなる事がありますし、チェックで消す場合は G3 Pro Unit を停止したら効かなくなるので、どちらを取るかはお好みになります。あ、いえ、↑ で一つ潰せたのでこのままいきましょう。
まずは下記を入れて確認してください。
弊社製テーマ・プラグインで古い機能を使用していると警告するプラグイン VK Legacy Notice を公開しました。
１カラムなどのテンプレートになっているものなどが検出されるので、
各記事編集画面でデフォルトテンプレートにして、
Lightning デザイン設定 から必要に応じてカラム数を変更してください。私もサイトをたくさん持っているので、順次Ｇ３に移行しているところですが、元のＧ2で子テーマやＣＳＳでいろいろカスタマイズしていたのでレイアウト崩れが発生したので、参考までに
子テーマのカスタマイズが要因の場合、一番早いのが、新しく子テーマを作り直してカスタマイズしなおすことでした
レイアウト関係のCSSはいったん消してみて確認しました以前は、phpファイルをカスタマイズしないとうまくいかないことがあったのですが最近はテーマで対応している（そのまま使い続けていた）
ヘッダー回り
・header.phpを子テーマでカスタマイズしていたのでレイアウト崩れが発生した⇒削除した
・ナビゲーションバーをcssでカスタマイズしていた⇒コードを削除⇒回り込みなどテーマのヘッダー設定で思うようなレイアウトが可能になった⇒コンテナが多い時は２段に折り返せない⇒勉強飽きで質問あり⇒文字数等工夫して１段になるようにしましょう
・ヘッダーロゴ画像を使わない時はサイト名がヘッダーに表示されるが、文字数が長い場合は自動で折り返さない（ＰＣ・モバイル両方）⇒不具合対応要望中
・コンテンツとサイドバーとのレイアウト崩れ⇒page.phpなどをコピーして子テーマで幅を調整していたが、削除
・「前の記事」「次の記事」のデフォルトがテキストから画像付きのカードに⇒変更したい場合は、表示しない設定にするか、ＣＳＳカスタマイズが必要⇒勉強会で質問・今のところ変更予定なしとの回答あり
・古いテンプレートファイルを使っている場合は「VK Legacy Notice」を使って一括変換した（カスタマイズのカラムのレイアウトを再確認）
・アーカイブのデフォルトが画像付きのカードになるので、カスタマイズでアーカイブの設定をとりあえずテキストのみにした個人個人で違うと思いますが、参考になればと思います。
石川さん、aka999さん、ありがとうございます！
お話を伺った感じ、基本的にcssの追記・修正で対応できそうな気がしてます。
——————————————-
石川さん
VK Legacy Noticeを導入しチェックすると、気になる指摘がありました。
（修正には関係ないと思ったので、報告です）【Front Page PR Block は古い機能です。】
・対応方法：外観 ＞ カスタマイズ > Lightning 機能設定から Front Page PR Block にチェックを入れてください。
→ PR Block使ってないのに検出され、機能設定にはFront Page PR Blockという項目はありませんでした。【Full Wide Title Widget は古い機能です。】
・対応方法：外観 ＞ カスタマイズ > Lightning 機能設定から Full Wide Title Widget にチェックを入れてください。
→ Full Wide Title Widgetというのが何かわかりませんが、機能設定にはFull Wide Title Widgetという項目はありませんでした。——————————————-
aka999さん
凄く参考になりました！
今回はcssのみで対応できそうですが、がっつり手を入れていた場合は子テーマの作り直しを視野に入れることを覚えておきます！石川さん
↑で書いた内容の訂正です、すみません。
VK Blocksが有効化で、VK Blocks Proが無効化になっていました。
VK Blocks Proを有効にすると↑の内容の指摘がなくなりました。不具合に報告するかトピックを新しく建てるか悩んだのですが、質問の流れでここに書き込みます。
ご指摘がありましたら、不具合報告や新トピック建てます。内容としては「G2とG3ではFooterのz-indexが異なっている？」みたいになります。
固定ページの設定で、余白設定のsiteContentの上下余白をなしにするにチェック
下記CSSを追記し、適当なテキスト等にbox-frameを当てる。
.box-frame {
box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);
margin: 0;
}
.site-footer,
.siteFooter {
border-top: none;
background: lightgray;
}ブロックに影を付けたものをfooterと隣接させると影の見え方がかわりました。
G2はボックスがfooterの上、G3はボックスがfooterの下にあるように見えます（画像参照）。表示させたいのは「ボックスが上、footerが下のように見える（ボックスの影が下についているように見える）」になります。
＞石川さん
承知いたしました。
この投稿はクローズしますね。
ありがとうございました。
- このトピックに返信するにはログインが必要です。
