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

このトピックには3件の返信、2人の参加者があり、最後にうなこにより3年前に更新されました。

4件の投稿を表示中 - 1 - 4件目 (全4件中)

投稿者

投稿
2021年11月15日 1:55 PM #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/

2021年11月15日 2:13 PM #58501
うなこ
モデレーター
参考サイトを確認いたしました。
このサイトは、background で波の背景画像を横方向にリピートさせて左と下付けで表示させれおりました。

border-imageを使ってみましたが、期待した通りにはなりませんでした。
- border-image は要素の周りに画像を描く指定
- backgroundは要素の背景を指定
一番簡単なのは、参考サイトのように背景を指定する方法かなと思います
下のようなCSSのイメージです。
```
/* ヘッダー背景設定 */
.site-header {
background: url(画像のURL) repeat-x left bottom;
padding-bottom: 30px;
}
```
ヘッダー上部エリアを表示させれいる場合は、
カスタマイズのLightningヘッダー上部設定　から背景色と文字色を変更できます。

ヘッダー上部設定
- この返信は3年前にうなこが編集しました。
- この返信は3年前にうなこが編集しました。
- この返信は3年前にうなこが編集しました。
2021年11月15日 3:46 PM #58506

kenichiro
参加者

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

やってみます。

2021年11月15日 4:13 PM #58510

うなこ
モデレーター

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

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

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

できる！CSSカスタマイズ
投稿者

投稿