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

2016-12-112017-08-14Web制作

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

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

Contents

1. CSSで描画したリボンの端を透過する
- 1.1. Before
- 1.2. After
2. あとがき

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;}

}

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