うなこ
フォーラムへの返信
-
投稿
-
このデモサイトは同じWordPressとテーマのバージョンですが、症状が確認できませんでした。
たまにリロードすると直ったりしますが、またリロードすると崩れます。
原因はまだわかりませんが、キャッシュ系のプラグインは使用していますか？
画像のブロック余白を使いましたが、スマホではバッチリでもPCだと崩れてしまいました。
【余白で調整する場合】
画像のブロックの余白ではなく、レスポンシブスペーサーブロックを配置して、余白の設定は「カスタマイズ」にして、それぞれPC、タブレット、スマホで余白の数値を設置するのはいかがでしょうか。【画像を調整する場合】
画像自体を調整して（上に余白を作る）、PC用とスマホ用と準備して、非表示機能でだし分ける方法もあります確認しました。書き直しましたのでご確認ください。
【修正したところ】
OuterブロックのCSSに、positionが打ち消されてしまうようでしたので、!importantをつけました。
管理画面が編集しづらくなるため、管理画面用のCSSも追加しました。
※管理画面用のCSSもフロントに表示されますので、消したい場合は、管理画面部分の表記は削除していただいて大丈夫です。（編集はしずらくなります）selector{ position: fixed !important; left: 0; top: 0; width: 100%; z-index: 10; margin:0 auto; box-shadow: 0 1px 3px rgb(0 0 0 / 10%); } /*管理画面が編集しずらいので追加*/ .editor-styles-wrapper selector{ position: relative !important; }CSSで調整する形になると思います。
とりあえずはブロックのカスタムCSSに記述する書き方で紹介します。
OuterブロックのカスタムCSSに以下のCSSをコピペすると、固定されます。
下のメインビジュアルとヘッダーが重なりますので、画像を調整するなどしてみてください。selector{ position: fixed; left: 0; top: 0; width: 100%; z-index: 10; margin:0 auto; box-shadow: 0 1px 3px rgb(0 0 0 / 10%); }CSSについてはコチラを参考にしてみてください
https://www.vektor-inc.co.jp/post/wordpress-css-customize-2020/■ テーマのバージョン
6.4.6もしかするとテーマのバージョンが古いのでカスタマイズ画面が白くなる可能性もあります
管理画面には入れますか？
入れるようでしたら管理画面に入り、
【外観】→【テーマ】の「Lightning Pro」に更新がでていましたら更新してくださいページヘッダーのdivのinnerのdivにmarginが入っていますので、そこを調整しますと、もう少し小さくなります。
例えば以下のCSSを追加CSSなどに追記してみてください。
0.5em の部分はお好みの大きさにしてください。/*ページヘッダーインナーのmargin*/ .page-header-inner{ margin:0.5em auto; }管理画面【外観】>【カスタマイズ】>【Lightning ページヘッダー 設定】 から最小の高さが設定できます。
工務店のフッター部分は以下の作りになっています。
外観→メニュー に「Header Navigation」と「Footer right Navigation」を作成していまして、
外観→ウィジェット→【フッターウィジェットエリア2】に「従来のウィジェット」の「ナビゲーションメニュー」ウィジェットを配置して
メニューを選択：「Header Navigation」
【フッターウィジェットエリア3】に「従来のウィジェット」の「ナビゲーションメニュー」ウィジェットを配置して
メニューを選択：「Footer right Navigation」を配置して、その下に横並びアイコンブロックを設置しています■ WordPress のバージョン
6.0.3原因は特定できておりませんが、気になるのはWordPressのバージョンが最新ではないところです。
バックアップをとって、最新にバージョンアップするとどうでしょうか—–
他に同じようなエラーが出る方、こうしたら解決したなどありましたらぜひ教えてください。
woocommerceのショップページ（固定ページ）は
「headタグ内のtitleタグのテキスト」で書き換えても
「商品」になって変わらないです。Woocommerceのショップページに設定した固定ページは 固定ページではなくアーカイブページとして処理されるので、titleタグのテキストの変更はできなくなっております。
（ちょっとわかりにくいと思いますので、ExUnitの説明ページに注意書きを追記するなど検討させていただきます）ファイルの共有ありがとうございます
確認したところ、中に入っているOuterブロックが全幅で配置されているのが原因だと思います。
あと、なぜかカラムの中に不要なカラムが入っているようでしたので、そちらも削除しておくと良いと思います。
※添付画像参照▼参考コード
https://xfs.jp/nvJQRr参考コードをコードエディタにして貼っていただいてもOKです
スライダーアイテムにOuterを重ねてみたが、スライドショーが全幅にならなかった(方法が分からない)ので、うまくいく方法があれば教えてほしい
Outerを入なくても、スライダーアイテムに背景画像を設置することができます
【スライド設定> エフェクトをフェードに設定する】
参考サイトのようにするなら、エフェクトをフェードにします。
スライダーを全幅で設置して、親のスライダーを選択して、右側のスライダーの設定画面から【スライド設定】> 「エフェクト」を「フェード」にします。【スライダー全幅でスライダーアイテムに背景画像を設置】
※添付画像参照
スライダーアイテムを選択しますと、右側のスライダーアイテムのブロック設定画面に【背景設定】が出てきます。背景画像（PC）、背景画像 ( タブレット )、背景画像 ( モバイル )が設置できますので、お好みで設置してください。
背景画像サイズは、「カバー」にすると、画像が見切れずに配置できます。【スライドアイテム内に画像を配置】
今回はPCとスマホで画像を出しわけしたいということですので
スライドアイテム内にPC用の画像とスマホ用の画像を配置します。ブロックごとに「非表示設定」機能がありますので、
PCサイズ用の画像は、非表示 ( 画面サイズ : sm ) 非表示 ( 画面サイズ : xs )」をオンにして、スマホサイズ用の画像は、非表示 ( 画面サイズ : xxl )、非表示 ( 画面サイズ : xl )、非表示 ( 画面サイズ : lg )、
非表示 ( 画面サイズ : md )をオンにすると、切り替えて表示できます。
※全部のスライダーアイテムに、同じ画像を配置する感じになります。フェードになっているので、後ろの背景だけが切り替わっているように見えると思いますがいかがでしょうかポイントは、まずはスライダーアイテムを1つ目を完成させて、2つ目からは複製してアイテムを増やすと背景画像を差し替えるだけなので作業が楽かもしれません。
▼▼▼参考ページ▼▼▼
お世話になっております。
クラス名が違っていたり、calcの計算のマイナスが全角になっているようです。
クラス名は以下になります。
/*幅を調整*/
@media (min-width: 992px){
.main-section–col–two{
width: 82.5%;
}
.sub-section–col–two {
width: calc(17.5% – 2rem);
}
}【テキストファイルが添付できない件につきまして】
error.txt ファイルがアップできないようですので、
お手数ですが、firestorage や おくりん坊 などのファイル転送サービスにテキストファイルをアップしていただき、URLを共有 という形になります
