CSSでヘッダーの真ん中に吹き出しっぽい三角をつけてみた

アメブロからWordPressへと個人ブログを移すにあたって「どんなデザインでサイトを作ろうかなー」って考えた結果、今回は超シンプルにまとめることにしました。

余計なモノは何もない白いサイトって作ってみたかったんですよね(｀・ω・´)

すごく理想的なテーマが見つかったのでこちらを導入しまして ↓

ちょっとだけいじってこんな感じになりました。↓

元テーマはWordPress公式テーマなので「Flato」で検索すると出てくると思います！

カスタマイズしたのはフォントとヘッダーとフッターくらいです。
あと色ですな！明るい青、爽やか～。（実家のVistaで見たら変な色やったけど）

でもって、ちょっとアクセントをつけたい！ってことでヘッダー部分に吹き出しのような三角をあしらってみました。

これはただの三角だけを追加したような感じですが、ホントに吹き出しを作るなら以下のツールがとっても便利です(´▽｀)ﾉ
cssarrowplease

というわけでここでは三角だけを付ける方法をメモっておきますね。

まずはどこに三角を付けるのかってことなんですが、今回の場合でいうとヘッダー部分です。
ヘッダー部分は「site-header」っていうクラス名で囲まれてたので、その該当するCSSに以下の一文を付け加えます。

position: relative;

こんな感じになりました。

.site-header {
	position: relative;
	text-align: center;
	background: #00ced1;
	margin-bottom: 20px;
}

で、その下あたりに以下の記述を書き加えます。

.site-header:before {
	position: absolute;
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	border-top-color: #00ced1;
	border-width: 30px;
	margin-left: -30px;
}

これで三角ができます！簡単！

ちなみにフッター部分もおんなじように三角をつけてます。

方法はほとんど一緒で、三角の向きと色を変更しただけです。

.site-extra:before {
	position: absolute;
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	border-bottom-color: #333;
	border-width: 30px;
	margin-left: -30px;
}

最初どうしても三角が真ん中に表示されなくて「（・３・）アルェー」ってな状態だったんですが、今回のでうまいこといきました。
変更した箇所はたぶんmarginのところだったと・・・（忘れたー！）

30pxの数値を変更すると三角のサイズが変わります。