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

2016-12-11Web制作

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

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

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

スポンサーリンク

CSSで描画したリボンの端を透過する

Before

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

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

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

After

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

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

@media all and (min-width: 1200px) {

	.nav {position: relative; width: 935px; display: inline-block; background: #000; padding: 0 20px; margin: 40px 25px 0px 25px; clear: both; line-height: 1em; text-transform: uppercase; height: 43.5px;}
	.nav:before,
	.nav:after {width: 0; height: 0; content: ""; display: block; position: absolute; top: 0; bottom: 0; z-index: 1; border: 22px solid #000;}
	.nav:before {border-left-color: transparent; border-right-width: 1.4em; left: -25px;}
	.nav:after {border-right-color: transparent; border-left-width: 1.4em; right: -25px;}
	.nav ul ul {background-color: #000;}

	.footer {position: relative; clear: both; margin: 0; padding: 0 15px 0 35px; width: 955px; color: #777; overflow: visible;}
	.footer:before,
	.footer:after {width: 0; height: 0; content: ""; display: block; position: absolute; top: 0; bottom: 0; z-index: 1; border: 22px solid #000; overflow: visible;}
	.footer:before {border-left-color: transparent; border-right-width: 1.4em; left: 0px;}
	.footer:after {border-right-color: transparent; border-left-width: 1.4em; right: -15px;}

	p.footer-copy {overflow: visible; padding: 10px; background: #000;}
	p.footer-copy :before,
	p.footer-copy :after {width: 0; height: 0; content: ""; z-index: 0; border: none;}

}

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

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

あとがき

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

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

こちらの記事もおすすめです