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


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

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

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

Flato

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

wpnavi

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

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

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

wpnavi

これはただの三角だけを追加したような感じですが、ホントに吹き出しを作るなら以下のツールがとっても便利です(´▽`)ノ
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;
}

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

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

wpnavi

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

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

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

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


こんな記事も書きました!

cup-2315554_1280

商用サイトで使えるフリー素材サイトまとめ

アイコンや壁紙を設定したりアイキャッチ画像を用意したり・・・ と、WEBサイトを作る時に欠かせない...

MORE

architecture-1868502_1280

CORE(TCD027)でトップページの新着記事一覧にページナビをつける

先日導入したCORE(TCD027)テーマについてのカスタマイズ記事でございます。 トップペー...

MORE

background-2850091_1280

CSSでテーブル使わずに簡単レスポンシブ!下線だけ引いて横並びデザイン

こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。 デザインは、下...

MORE

food-2940553_1280

ローディング・読み込み中の画像を簡単に作成できるツール

ページを読み込みする時などに使う「ローディング画像」は ジェネレーターで簡単に作成することができま...

MORE

background-2846221_1280

MacやiPhoneのスクショはめ込み画像を作る

そうそう、こんな画像ってたまに必要なときがありますよね!笑 これ、わざわざ画像を合わせ...

MORE

home-office-569153_1280

コピペで使える固定ソーシャルボタンBOX

WordPressでスクロール時も固定表示されるソーシャルボタンを 簡単に設置するためのテンプレー...

MORE

laptop-2838921_1280

WordPressでCSSの反映を確認しながら編集する方法

CSS編集方法についての前置き 「管理画面」→「外観」→「テーマ編集」→「スタイルシート」から ...

MORE

cup-2884023_1280

名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズTIPS色々書きました。

mayuの活動なんかをまとめただけの俗に言う自己紹介サイトがありまして、 ちょっとお手すきになった...

MORE

laptop-computer-1245981_1280

コピペで使えるCSSデザイン枠テンプレート

どシンプルなものからちょっと凝ったものまで、 CSSでスタイリングしたデザイン枠のテンプレートです...

MORE

alarm-clock-2132264_1280

無料で簡単にロゴを作れるツール「LOGASTER」が斬新!

Webサイトを作るときって、ただのテキストタイトルを表示するよりも独自のロゴがあれば締まるのにな~っ...

MORE

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

flower