[ 質問者返信待ち ] パターンライブラリのワンサイトコピーに際に、ヘッダー等の変更ができない件(カスタムCSS:ヘッダー削除と入れ替えと背景デザインブロックの挿入)

VWSとは フォーラム VK パターンライブラリ [ 質問者返信待ち ] パターンライブラリのワンサイトコピーに際に、ヘッダー等の変更ができない件(カスタムCSS:ヘッダー削除と入れ替えと背景デザインブロックの挿入)

[ 質問者返信待ち ] パターンライブラリのワンサイトコピーに際に、ヘッダー等の変更ができない件(カスタムCSS:ヘッダー削除と入れ替えと背景デザインブロックの挿入)

  • このトピックには19件の返信、4人の参加者があり、最後に石川@Vektor,Inc.により4分前に更新されました。
15件の投稿を表示中 - 1 - 15件目 (全20件中)
  • 投稿者
    投稿
  • #105109

    TOSHIOSAKUMA
    参加者

    ■ WordPress のバージョン
    6.7.1

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    X-T9

    ■ テーマのバージョン
    最新

    ■ プラグインの種類・バージョン
    必要と書かれていたVKパターンなどを全て入れました。

    ■ 期待する動作
    https://patterns.vektor-inc.co.jp/vk-patterns/17490/ このデモサイトにしたいです。

    ■ 自分で試した事
    26日の質問コーナーで石川様に質問させていただいた件です。

    1 ヘッダーの画像のパララックスデザイン(固定スクロール)にしたい
    2 背景デザインをお示しされた黄色の柄にしたいです。(自分で行ったコピペでは黄色だけでマダラ模様が入らない。)

    お聞きした内容を行ってみたのですが、できませんでした。
    すみません。解説の案内を教えていただけませんでしょうか?
    宜しくお願い致します。

    ■ 症状が発生するブラウザ
    chrome

    ■ 実際の症状
    見本サイト(https://patterns.vektor-inc.co.jp/vk-patterns/17490/)を参考に 
    https://bk-file.online/241226test/ テストサイトを作りました。

    ヘッダーが消せななかったり、デザインが微妙に違います。

    多分カスタムCSSが原因かと思うのですが、これを組み込む方法はどうすれば良いですか?


    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #105123

    Vektor,Inc
    キーマスター

    昨日の質問会へのご参加、ありがとうございました。お世話になっております、株式会社ベクトルの久納と申します。

    1. ご質問の「1 ヘッダーの画像のパララックスデザイン(固定スクロール)にしたい」件ですが、ベクトレの「X-T9 基本設定 : ヘッダーの設定」をご確認いただきながら設定をしてみてください。ヘッダーのテンプレートを変更しますので、全ページのヘッダーが変わります。

      固定のヘッダーにつきましては、該当のパターンのヘッダーにはカスタムCSSが書いてありますので、そのままヘッダー部分のブロックをヘッダーのテンプレートパーツに貼り付けていただえければ固定されると思います。(添付画像3枚目をご確認ください)

      X-T9 基本設定 : ヘッダーの設定

    2. 次に固定ページの方は、「テンプレート」が「固定ページ」が選択されているようですので、添付画像を参考にして、「テンプレートを入れ替え」から「ランディングページ」を選択してください。そうしますと、ページヘッダーなどの不要なパーツがなくなります。
    3. ご質問の「2 背景デザインをお示しされた黄色の柄にしたいです。(自分で行ったコピペでは黄色だけでマダラ模様が入らない。)」の件ですが、七宝模様背景用のカスタムCSSが入っていないように見えました。添付画像を参考に、外側のグループブロックを選択して、「カスタムCSS」の部分に以下のCSSを入れてください。
      selector{
      background-image: radial-gradient(closest-side, transparent 98%, rgba(0,0,0,0.025) 99%),
                            radial-gradient(closest-side, transparent 98%, rgba(0,0,0,0.025) 99%);
          background-size: 40px 40px;
          background-position: 0 0, 20px 20px;
      }

    もしこちらを確認してもうまくいかない場合はまたご連絡ください。
    よろしくお願いいたします。

    Attachments:
    You must be logged in to view attached files.
    #105605

    Vektor,Inc
    キーマスター

    TOSHIOSAKUMAさま
    お世話になっております。

    12月の勉強会でご案内していた、VK Pattern Library の トップページ用パターンの使い方の解説動画を公開いたしました。以下のURLよりご確認ください。

    ▼X-T9 編
    VK Pattern Library トップページ用パターンの使い方 X-T9 編

    ▼Lightning編はこちらになります。
    VK Pattern Library トップページ用パターンの使い方 Lightning 編

    どうぞよろしくお願いいたします。

    #105615

    TOSHIOSAKUMA
    参加者

    株式会社ベクトル 久納 様

    お世話になっております。

    ご返信遅くなり、すみません。質問の回答をいただいた場所がわからなくなっておりました。

    さて、
    ご説明いただいた内容に従って以下URLと添付設定画面の設定で、修正したつもりなのですが、何故か、2点ほどうまく

    いっていないような気がします。
    1 黄色い背景が左右に足りない状況
    2 フッターが固定されない

    以上でございます。

    すみません。再度お教えいただけませんでしょうか?

    宜しくお願い致します。

    Attachments:
    You must be logged in to view attached files.
    #105627

    Vektor,Inc
    キーマスター

    TOSHIOSAKUMAさま
    お世話になっております。

    キャプチャ画像を拝見いたしました。以下の内容をご確認いただけますでしょうか。

    黄色い背景が左右に足りない状況

    1. 恐れ入りますが、【カスタマイズ】> 【Lightning 機能設定】の「theme.json を有効化」にチェックが入っているかご確認ください。
    2. また、世代設定が「Generation 3」になっているかもご確認をお願いいたします。

    ※「theme.json」に関しては、以下のリンクをご参照ください。
    「Lightning 15系アップデートでの theme.json 対応について」

    ※「Lightning G3 Pro Unit」の「Lightning Block Template Parts」機能は「Generation 3」になっていないと機能しないと思いますので、よろしくおねがいいたします。

    フッターが固定されない

    「Generation 3」設定に変更後もレイアウトが崩れる場合、キャッシュ系プラグインの影響が考えられます。
    プラグインのキャッシュを削除していただくか、一時的に無効化して挙動をご確認ください。

    お手数をおかけいたしますが、上記の方法で解決できるかご確認いただけますと幸いです。

    Attachments:
    You must be logged in to view attached files.
    #105635

    TOSHIOSAKUMA
    参加者

    お世話になっております。

    添付のとおり

    1 ご指摘内容1
     【カスタマイズ】> 【Lightning 機能設定】の「theme.json を有効化」にチェックが入っているかご確認ください。また、世代設定が「Generation 3」になっているかもご確認

     実施内容
    行ったのですが、どうも右半分がposition absoluteのような感じでサイドバーが固定されてしまっているようで、
    レイアウトが壊れてしまっています。

    2 ご指摘内容2  キャッシュ系プラグインの影響

    実施内容
     キャッシュ系はわかなかったですが、不要と思われるプラグインは全部削除して今の状況です。

    もうちょっとのような気がします。追加のご指摘や解決方法をお教えいただけませんでしょうか?

    よろしくお願いいたします。

    Attachments:
    You must be logged in to view attached files.
    #105637

    横から失礼します。

    テンプレートが Landing Page になっていることが原因のようです。

    デフォルトテンプレートに切り替えて、余白設定・非表示設定をすれば解決しそうです。

    添付画像をご参照ください。

    Attachments:
    You must be logged in to view attached files.
    #105644

    TOSHIOSAKUMA
    参加者

    (T 様(お名前を出してよいのかわからないのでイニシャルで失礼致します。))

    大変ありがとうございます。その部分にはついては改善しました。大変ありがとうございます。

    T様も含めておわかりになる方がいらっしゃったら、もう少し、質問をおお願いできませんでしょうか?

    画像1のようにheaderについては、メニューの前面に白い「site.header」
    があり、これを管理画面から出ないようにするにはどうしたらよいでしょうか?

    画像2のようにfooterの裏側でフェイドするようなスライダー画像がfooterの高さを合わずに表示されてしまいます。

    これを出さないようにするなど、サンプルと同じようにするにはどうしたら良いでしょうか?

    よろしくお願いいたします。

    Attachments:
    You must be logged in to view attached files.
    #105649

    今朝私がアップした画像をご参照ください。

    画像の下の方に赤枠で囲んである「余白設定」と「非表示設定」のすべての項目にチェックを入れるとご希望の結果になると思います。

    #105651

    TOSHIOSAKUMA
    参加者

    ご連絡いただき、大変ありがとうございます。

    感謝致します。

    すみません。m(__)m

    「余白設定」と「非表示設定」のすべての項目にチェックを入れる」件ですが、

    余白設定のタブは見つかったのですが非表示設定のタブは添付のものしかみつかりませんでした。
    色々な場所でタブが出ないか画面上を探したのですが、見つけられませんでした。

    どちらに、そのようなタブがあるのかお教えいただけませんでしょうか?

    (該当尾箇所の画像添付します。)

    宜しくお願い致します。

    Attachments:
    You must be logged in to view attached files.
    #105654

    すみません、利用のテーマは X-T9 と書いてありますが Lightning という事でしょうか?
    Lightning であれば G3 Pro Unit を有効化してください。

    #105657

    TOSHIOSAKUMA
    参加者

    お世話になります。

    教えていたいただいたとおり、該当プラグインをダウンロードして、インストールしてみたのですが…

    添付のとおり、設定タブの内容が変ってくれません。

    お教えいただけませんでしょうか?

    宜しくお願い致します。

    Attachments:
    You must be logged in to view attached files.
    #105659

    添付いただいたものは G3 Pro Unit の設定画面ですので、記事編集ページの状況が改善されているかはわかりかねるのですが、記事の編集ページを再読み込みしても、Lightning デザイン設定 パネルの中に非表示設定は増えない状態でしょうか?

    #105661

    お世話になっております。ベクトルの石川でございます。
    すみませ、該当サイトについて現状の設定でいろいろ間違いがあったり、仕様がわかりにくくて誤解されている部分が見受けられますので、一旦非表示設定の事は忘れてください。

    先の久納からの返信でも掲載しましたが、設定方法の動画を再度ご確認ください。

    ここまでの手順で間違いがあると、
    今利用しているパターンは特殊で、また別途処理が必要なので、
    まずは仕様の理解を深めるために動画と同じパターンを使用して再現してみてください。

    進める上で解説動画と画面が違うなどの問題がありましたら、該当のスクリーンショットを添付して遠慮なくご質問くださいませ。

    よろしくお願いいたします。

    #105675

    TOSHIOSAKUMA
    参加者

    お世話になっております。

    ご連絡いただきありがとうございます。動画拝見しました。テンプレートファイルの概念はなんとなくイメージがつきます。

    しかし、何度もすみません…。

    行ってみたのですが、今度は、予期せぬjsonエラーというようなものが出ます。

    このエラーは、どのようなエラーでしょうか?

    予測とすると

    この組み込むべき新しいheaderは何かの拍子に削除されていて、元々あるヘッダーをコピーしようとしている?

    その為wordpressのjson利用機能でエラーが生じているということでしょうか?

    すみません。

    出先なので、夜また、ご確認・ご連絡させていただければと思います。

    よろしくお願いいたします。

    Attachments:
    You must be logged in to view attached files.
15件の投稿を表示中 - 1 - 15件目 (全20件中)
  • このトピックに返信するにはログインが必要です。