ADELLEのメニューバーとフッターのリボン端を透過させる方法

WordPress

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

こんにちは、とみーです。

私が使っているWordPressテーマ「ADELLE」。
そのカスタマイズについてADELLEをお使いの方から相談があり、無事解決しましたので、今回ネタにさせてもらいました(笑)

スポンサーリンク

リボンの端を透過する

Before

ADELLEには可愛い壁紙が初期設定されていますが、やっぱり自分好みに変えたいもの。

白背景でない壁紙に変えたり、背景色を設定したりするとこんな感じにリボンの端が白くなります。

これは、スタイルシートで黒い長方形を描画した上に白い三角形を乗せているため、背景を変えると不都合が生じるのです。

After

というわけで、白い三角形を削除&リボン端は三角形を3つ合わせて描画し、透過されるようにすればいいです。

そのソースコードが下記です。

これをスタイルシートにコピペすると、こうなります。

これでテーマのカスタマイズが捗りますね!

あとがき

正直言うと、メニューバーとフッターの幅が微妙に違います・・・。5pxくらい。
どうしても解決できなかったです。ごめんなさい。

まぁ、その2つを同時に画面内に収めることはほぼないと思うので、気にしない方向でお願いします。