画像を使わずコピペだけでWordPressの「見出し」タイトルがカッコよくなるデザイン９連発！
最終更新日：2015/08/20
こんにちは。
WEBサービスを担当している藤田です。
11月も中旬になり、夜はかなり冷え込むようになりましたよね。
先日仕事を終えて自宅に帰ると、着る毛布が２着届いていました。
妻が通販で購入したものなのですが、毛布を着るというコンセプトの商品で
リビングからキッチンへの移動もあったかい、しかも着たままベッドインもでき、
寝ぞうが悪くてもあったかいってことで、この冬とても活躍してくれそうです。
問題があるとすれば、サイズですね。
ユニセックスのワンサイズ仕様なのですが、
自分は、男性の標準体型なのですが、それでも少し袖丈と着丈が短いんです。
ひじがギリギリ隠れるくらい。
せっかくの毛布なのに、少し寒いなんて。
さて、本題です。
ホームページやブログの見出しの「デザイン」ってなかなか決まらなかったりしますよね。
当ブログは、記事タイトルにあたるh1の見出しは少しフォントサイズを大きくして
記事内の見出しにあたるh2はテーマのデフォルトの見出しのまま使用していて
サイドメニューの見出しにあたるh4は少しデザインを加えています。
これまでテストの為、色々と試してきたタイトルデザインですが
もしかすると誰か欲しいひとがいるかもしれない！
そう思ってゴミ箱から呼び戻し少し修正を加えました。
コピペOKのCSSのコードを９連発でご提供させていただきます。
それでは、コピペOK
画像を一切使わず、カッコいい「見出し」デザイン９連発
どーぞー♪
記事の目次
シンプルイズベストのタイトルデザイン
最近よく見る見出しデザインNo.1です。
タイトルの左側にラインが１本あるだけなのですが
この見出しはCSSの記述もシンプルで、自分もよく使っていました。
|
1 2 3 4 5 6 7 8 |
h2{ font-size: 18px !important; color: #333333 !important; margin: 5px 0px !important; padding: 5px 15px !important; border-left: 7px solid #8bbf42 !important; background-color: #ffffff !important; } |
ザ・スタンダードなタイトルデザイン
続いて、先ほどの見出しにちょっとアレンジして下線を加えてみました。
このタイプもよく見かけますね。
|
1 2 3 4 5 6 7 8 9 |
h2{ font-size: 18px !important; color: #333333 !important; margin: 5px 0px !important; padding: 5px 15px !important; border-left: 7px solid #8bbf42 !important; border-bottom: 1px solid #cccccc !important; background-color: #ffffff !important; } |
２色のサイドバーでちょっとシャレオツなタイトルデザイン
さらに、先ほどの見出しの左のサイドバーを２色使いにして、下線をドットにしています。
色に変化があるだけで、ちょっとオシャレな感じに見えますよね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
h2 { font-size: 18px !important; color: #333333 !important; margin: 5px 0px !important; padding: 5px 15px 0px 15px !important; background-color: #ffffff !important; position: relative !important; border-bottom: 1px dotted #cccccc !important; } h2:before { position: absolute; top: 0px; left: 0px; width: 7px; height: 20px; background: #8bbf42; content: ""; } h2:after { position: absolute; top: 15px; left: 0; width: 7px; height: 7px; background: #aed27b; content: ""; } |
フラットデザイン向け ２色のみで表現する今風のタイトルデザイン
タイトル文字を白抜きにして、左側にラインを入れています。
２色しか使用していませんが、オシャレな印象さえ与えてくれます。
どちらかというと、フラットデザインのサイトに向いている見出しのデザインですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
h2{ font-size: 18px !important; color: #ffffff !important; margin: 5px 0px !important; padding: 5px 15px !important; position: relative !important; font-weight: bold !important; background-color: #8bbf42 !important; border-radius: 3px !important; -webkit-border-radius: 3px !important; -moz-border-radius: 3px !important; } h2:before{ position: absolute; top: 0px; left: 4px; width: 4px; height: 18px; background: #ffffff; content:''; } |
シンプルなグラデーションのみで表現したタイトルデザイン
フラットデザインはちょっとな～
という方には、背景にグラデーションを入れてみてはいかがでしょうか。
グラデーションの配色を表現するCSSは、以下のサイトで作成してコピペしています。
自分の好きなグラデーションで見出しを作成したい方は活用してみてください。
http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
h2 { font-size: 18px !important; color: #333333 !important; margin: 5px 0px !important; padding: 5px 15px !important; border: 1px solid #cccccc !important; border-radius: 10px !important; -webkit-border-radius: 10px !important; -moz-border-radius: 10px !important; /* IE10 Consumer Preview */ background-image: -ms-linear-gradient(top, #ffffff 0%, #cccccc 100%) !important; /* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%) !important; /* Opera */ background-image: -o-linear-gradient(top, #ffffff 0%, #cccccc 100%) !important; /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #cccccc)) !important; /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #ffffff 0%, #cccccc 100%) !important; /* W3C Markup, IE10 Release Preview */ background-image: linear-gradient(to bottom, #ffffff 0%, #cccccc 100%) !important; } |
中央で切り替わるグラデーションで見やすくてカッコいいタイトルデザイン
先ほどの見出しと似ていますが、グラデーションが中央で切り替わっているタイプです。
さらに角の丸みを小さくすることで、ユーザーにシャープな印象を与えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
h2{ font-size: 18px !important; color: #333333 !important; margin: 5px 0px !important; padding: 5px 10px !important; background: #ffffff !important; border: 1px solid #dddddd !important; border-radius: 5px !important; -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important; /* Mozilla Firefox */ background: -moz-linear-gradient(top, #fff 0%, #eee 50%, #ddd 51%, #fff 100%) !important; /* Webkit (Safari/Chrome10) */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(50%,#eee), color-stop(51%,#ddd), color-stop(100%,#fff)) !important; /* IE 6-8 */ -pie-background:linear-gradient(top, #fff 0%, #eee 50%, #ddd 51%, #fff 100%) !important; /* Opera */ background: -o-linear-gradient(top, #fff 0%, #eee 50%, #ddd 51%, #fff 100%) !important; } |
文字に影を付けてカッコよくしたタイトルデザイン
影を付けて、立体的に表現する見出しもカッコいいと思います。
ただ、影を離しすぎるとやや見出しが見にくくなる欠点があるので、
色と影を変更する場合、見易さを保つためにバランスを調整する必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
h2 { font-size: 18px !important; color: #333333 !important; margin: 15px 0px !important; padding: 5px 15px !important; background-color: #cccccc !important; border: 1px solid #cccccc !important; -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3) !important; -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3) !important; text-shadow: 5px 5px 3px rgba(0,0,0,0.5) !important; border-radius: 10px !important; -webkit-border-radius: 10px !important; -moz-border-radius: 10px !important; background: -moz-linear-gradient(top,#FFF 0%,#FFF 3%,#E6E6E6 3%,#FFF) !important; background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(0.03,#FFF), color-stop(0.03,#E6E6E6), to(#FFF)) !important; } |
温もりを感じさせるフェルトっぽいタイトルデザイン
タイトル文字と背景に若干の影を入れて、周りを破線で囲えば
ちょっとフェルトっぽい、温かい感じになります。
|
1 2 3 4 5 6 7 8 9 10 11 |
h2 { font-size: 18px !important; color: #333333 !important; margin: 5px 0px !important; padding: 5px 15px !important; border: 2px dashed #d6e9ca !important; border-radius: 5px !important; box-shadow: 0 0 3px 3px #8bbf42 !important; text-shadow: 0 0 1px !important; background-color: #8bbf42 !important; } |
白抜きグラデーションだけで表現するシャープなタイトルデザイン
背景色とグラデーションだけにこだわったシンプルなデザインです。
組み合わせによって、シンプルだけど「見出し」をこんなにかっこよくすることもできます。
個人的には、この色あいが好きです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
h2 { font-size: 18px !important; color: #ffffff !important; margin: 5px 0px !important; padding: 5px 20px !important; font-weight: bold !important; background: -moz-linear-gradient(top,#0099CC 0%,#006699) !important; background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699)) !important; border: 1px solid #dddddd !important; border-radius: 7px !important; -moz-border-radius: 7px !important; -webkit-border-radius: 7px !important; } |
まとめ
いかがでしたでしょうか。
気に入った「見出し」デザインは見つかりましたでしょうか。
今回の「見出し」デザインはCSSのみで表現することにこだわっています。
画像を使うと、ディレクトリを変更したり、サイトの引っ越しをしたときなど
リンク切れ起こしたりして、修正が面倒というのが主な理由です。
そして、もう一つ理由を上げるならば、
画像を読み込むより、スタイルシートを読み込んだ方が
サイトの表示が早くなるのでは・・・という、願いも込められています。
また、言い訳するわけではありませんが（本当は言い訳ですが・・・）、
自分はデザイナーでもコーダーでもないため
コードに自信がありません。
間違っていたらご指摘お願いします。
この記事で、
見出しデザインが楽になったよー
とか
参考になったよー
とかありましたら、コメントいただけると大変うれしく思います。
Comment
Twenty Thirteen を使ってバイリンガルのサイトを作っています。
今回こちらの記事を参考に、h2の表示を変えることができました。
ありがとうございます！
ただ、色々いじっている間に、ヘッダーが表示されなくなってしまうと言う困ったことになってしまいました。。。。。うーむ。カスタマイズは大変ですね！
kanaeさま、コメントありがとうございます。
私も試行錯誤しながらカスタマイズしていますが、
少しでもお役にたてたみたいで良かったです。
おかげさまで見出しを変えることができました！
シンプルでかっこいいです。
本当にありがとうございます！
mimiさま、コメントありがとうございます。
喜んでもらえて私もうれしいです。
白抜きグラデーションだけで表現するシャープなタイトルデザインを使わせてもらいました。とっても綺麗で気に入っています。
ただ、IE11では表示されませんでした。マウスでドラッグしてやると字が見えるといった感じです。何か対策はあるでしょうか。教えていただけたら幸いです。
すいません解決いたしました。
style.cssに、サンプルコードを貼り付けたらページのヘッダ部分などの変更したくない部分にも影響したので、元に戻したいのですが、テーマを削除しても、元に戻りません。どうしたらいいでしょうか？ご教示ください。
ganponさま、コメントありがとうございます。
適用しているテーマを削除したら、別のテーマを選択することになります？
それでもデザインが崩れますか？
ブラウザのキャッシュで、削除前のページが表示されているのであれば
キーボードの「F5」を押せば元に戻ると思います。
それでもデザインが崩れているなら、テーマフォルダ以外のファイルにコード追加しませんでした？
最後の白抜きのやつが、IEだときちんと表示されません。
chromeでは問題ないのですが・・・。
でつさま、コメントありがとうございます。
IEでうまく表示されないようですが
現在私がWEBサイト制作業務から外れているため、検証する時間が確保できません。
ブラウザの互換モードの問題とかだったらいいのですが
すみません！