[ 解決済 ] ヘッダーメニュー下の境界線を波線(非平行ヘッダ)にする方法

VWSとは フォーラム Lightning [ 解決済 ] ヘッダーメニュー下の境界線を波線(非平行ヘッダ)にする方法

[ 解決済 ] ヘッダーメニュー下の境界線を波線(非平行ヘッダ)にする方法

  • このトピックには3件の返信、2人の参加者があり、最後にうなこにより2年、 4ヶ月前に更新されました。
4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • 投稿者
    投稿
  • #58499

    kenichiro
    参加者

    ■ WordPress のバージョン
    5.8.2

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

    ■ テーマの種類
    Lightning ( G3 ) + Lightning G3 Pro Unit

    ■ テーマのバージョン
    14.11.12

    ■ Pro Unit のバージョン
    0.12.2

    ■ スキンの種類
    Origin III

    ■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
    確認しました。

    ■ 期待する動作
    ヘッダーメニュー下のデザインを波線に変更したいです。

    いつもお世話になっております。
    初めて質問させていただきます。
    wordpressでLightiningPro(G3)にてwebサイトを作成しております。

    ヘッダーメニュー下のデザインを波線に変更したいのですが、どうやってしたらいいか思案に暮れています。
    良い方法はございますでしょうか?
    ご教示いただけましたら幸いです。

    <参考サイト(ヘッダーメニュー下の境界線を波線にしているサイト)>
    https://www.hirata-wood.co.jp/

    ■ 自分で試した事
    border-imageを使ってみましたが、期待した通りにはなりませんでした。

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

    ■ 実際の症状
    通常の平行ヘッダーです。

    ■ その他特記事項
    <参考サイト(ヘッダーメニュー下の境界線を波線にしているサイト)>
    https://www.hirata-wood.co.jp/

    #58501

    うなこ
    モデレーター

    参考サイトを確認いたしました。
    このサイトは、background で波の背景画像を横方向にリピートさせて左と下付けで表示させれおりました。

    border-imageを使ってみましたが、期待した通りにはなりませんでした。

    • border-image は要素の周りに画像を描く指定
    • backgroundは要素の背景を指定

    一番簡単なのは、参考サイトのように背景を指定する方法かなと思います
    下のようなCSSのイメージです。

    /* ヘッダー背景設定 */
    .site-header {
    background: url(画像のURL) repeat-x left bottom;
    padding-bottom: 30px;
    }

    ヘッダー上部エリアを表示させれいる場合は、
    カスタマイズのLightningヘッダー上部設定 から背景色と文字色を変更できます。

    ヘッダー上部設定

    • この返信は2年、 4ヶ月前にうなこが編集しました。
    • この返信は2年、 4ヶ月前にうなこが編集しました。
    • この返信は2年、 4ヶ月前にうなこが編集しました。
    #58506

    kenichiro
    参加者

    ありがとうございます。
    お手数おかけし、大変申し訳ございません。

    やってみます。

    #58510

    うなこ
    モデレーター

    はい、一度試してみてください。
    つまづいたら書き込んでください。

    CSSの書き方などは、こちらの動画や記事が参考になると思います。

    ▼ベクトレ:できる!CSSカスタマイズ

    できる!CSSカスタマイズ

4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • このトピックに返信するにはログインが必要です。