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;
}
最初どうしても三角が真ん中に表示されなくて「(・3・)アルェー」ってな状態だったんですが、今回のでうまいこといきました。
変更した箇所はたぶんmarginのところだったと・・・(忘れたー!)
30pxの数値を変更すると三角のサイズが変わります。
こんな記事も書きました!
-
-
コピペで使えるCSSデザイン枠テンプレート
どシンプルなものからちょっと凝ったものまで、 CSSでスタイリングしたデザイン枠のテンプレートです...
-
-
ページ遷移時のフェード効果を実装するjQuery
リンクをクリックした時にページが滑らか~にフェードしながら遷移する方法です。 今回新たに作成し...
-
-
コピペで使える固定ソーシャルボタンBOX
WordPressでスクロール時も固定表示されるソーシャルボタンを 簡単に設置するためのテンプレー...
-
-
CORE(TCD027)でトップページの新着記事一覧にページナビをつける
先日導入したCORE(TCD027)テーマについてのカスタマイズ記事でございます。 トップペー...
-
-
WordPressをカスタマイズする前に子テーマを作っておく
子テーマについての前置き WordPressはほとんどの方が既存のテーマから お好みのものを選ん...
-
-
名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズTIPS色々書きました。
mayuの活動なんかをまとめただけの俗に言う自己紹介サイトがありまして、 ちょっとお手すきになった...
-
-
ローディング・読み込み中の画像を簡単に作成できるツール
ページを読み込みする時などに使う「ローディング画像」は ジェネレーターで簡単に作成することができま...
-
-
WordPressでCSSの反映を確認しながら編集する方法
CSS編集方法についての前置き 「管理画面」→「外観」→「テーマ編集」→「スタイルシート」から ...
-
-
商用サイトで使えるフリー素材サイトまとめ
アイコンや壁紙を設定したりアイキャッチ画像を用意したり・・・ と、WEBサイトを作る時に欠かせない...
-
-
MacやiPhoneのスクショはめ込み画像を作る
そうそう、こんな画像ってたまに必要なときがありますよね!笑 これ、わざわざ画像を合わせ...