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

[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/

[うなこ]

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

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

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

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

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

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

ヘッダー上部設定

• この返信は3年前にうなこが編集しました。
• この返信は3年前にうなこが編集しました。
• この返信は3年前にうなこが編集しました。

[kenichiro]

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

やってみます。

[うなこ]

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

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

▼ベクトレ：できる！CSSカスタマイズ

できる！CSSカスタマイズ

[投稿者]

投稿