レンタルサーバー Staff Blog

レンタルサーバー(共用サーバー・仮想専用サーバー)と独自ドメイン、ホームページ制作、Office365とWEB会議システムなどのサービスを運営する中で得た知識やサービス比較を中心に、WordPressやPlesk、マーケティングに関する情報を発信しています。

*

画像を使わずコピペだけでWordPressの「見出し」タイトルがカッコよくなるデザイン9連発!

  最終更新日:2015/08/20

こんにちは。

WEBサービスを担当している藤田です。

 

 

11月も中旬になり、夜はかなり冷え込むようになりましたよね。

先日仕事を終えて自宅に帰ると、着る毛布が2着届いていました。

妻が通販で購入したものなのですが、毛布を着るというコンセプトの商品で

リビングからキッチンへの移動もあったかい、しかも着たままベッドインもでき、

寝ぞうが悪くてもあったかいってことで、この冬とても活躍してくれそうです。

 

問題があるとすれば、サイズですね。

ユニセックスのワンサイズ仕様なのですが、

自分は、男性の標準体型なのですが、それでも少し袖丈と着丈が短いんです。

ひじがギリギリ隠れるくらい。

せっかくの毛布なのに、少し寒いなんて。

 

さて、本題です。

ホームページやブログの見出しの「デザイン」ってなかなか決まらなかったりしますよね。

当ブログは、記事タイトルにあたるh1の見出しは少しフォントサイズを大きくして

記事内の見出しにあたるh2はテーマのデフォルトの見出しのまま使用していて

サイドメニューの見出しにあたるh4は少しデザインを加えています。

 

これまでテストの為、色々と試してきたタイトルデザインですが

もしかすると誰か欲しいひとがいるかもしれない!

そう思ってゴミ箱から呼び戻し少し修正を加えました。

コピペOKのCSSのコードを9連発でご提供させていただきます。

 

 

 

それでは、コピペOK

画像を一切使わず、カッコいい「見出し」デザイン9連発

どーぞー♪

 

 

 

シンプルイズベストのタイトルデザイン

最近よく見る見出しデザインNo.1です。

css-title-design01

タイトルの左側にラインが1本あるだけなのですが

この見出しはCSSの記述もシンプルで、自分もよく使っていました。

 

 

 ザ・スタンダードなタイトルデザイン

続いて、先ほどの見出しにちょっとアレンジして下線を加えてみました。

css-title-design02

このタイプもよく見かけますね。

 

 

 

2色のサイドバーでちょっとシャレオツなタイトルデザイン

さらに、先ほどの見出しの左のサイドバーを2色使いにして、下線をドットにしています。

css-title-design03

色に変化があるだけで、ちょっとオシャレな感じに見えますよね。

 

 

 

 フラットデザイン向け 2色のみで表現する今風のタイトルデザイン

タイトル文字を白抜きにして、左側にラインを入れています。

css-title-design06

2色しか使用していませんが、オシャレな印象さえ与えてくれます。

どちらかというと、フラットデザインのサイトに向いている見出しのデザインですね。

 

 

 

シンプルなグラデーションのみで表現したタイトルデザイン

フラットデザインはちょっとな~

という方には、背景にグラデーションを入れてみてはいかがでしょうか。

css-title-design04

グラデーションの配色を表現するCSSは、以下のサイトで作成してコピペしています。

自分の好きなグラデーションで見出しを作成したい方は活用してみてください。

http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/

 

 

 

中央で切り替わるグラデーションで見やすくてカッコいいタイトルデザイン

先ほどの見出しと似ていますが、グラデーションが中央で切り替わっているタイプです。

さらに角の丸みを小さくすることで、ユーザーにシャープな印象を与えます。

css-title-design05

 

 

 

文字に影を付けてカッコよくしたタイトルデザイン

影を付けて、立体的に表現する見出しもカッコいいと思います。

css-title-design09

ただ、影を離しすぎるとやや見出しが見にくくなる欠点があるので、

色と影を変更する場合、見易さを保つためにバランスを調整する必要があります。

 

 

 

温もりを感じさせるフェルトっぽいタイトルデザイン

タイトル文字と背景に若干の影を入れて、周りを破線で囲えば

ちょっとフェルトっぽい、温かい感じになります。

css-title-design07

 

 

 

白抜きグラデーションだけで表現するシャープなタイトルデザイン

背景色とグラデーションだけにこだわったシンプルなデザインです。

css-title-design08

組み合わせによって、シンプルだけど「見出し」をこんなにかっこよくすることもできます。

個人的には、この色あいが好きです。

 

 

まとめ

いかがでしたでしょうか。

気に入った「見出し」デザインは見つかりましたでしょうか。

 

今回の「見出し」デザインはCSSのみで表現することにこだわっています。

 

画像を使うと、ディレクトリを変更したり、サイトの引っ越しをしたときなど

リンク切れ起こしたりして、修正が面倒というのが主な理由です。

そして、もう一つ理由を上げるならば、

画像を読み込むより、スタイルシートを読み込んだ方が

サイトの表示が早くなるのでは・・・という、願いも込められています。

 

また、言い訳するわけではありませんが(本当は言い訳ですが・・・)、

自分はデザイナーでもコーダーでもないため

コードに自信がありません。

間違っていたらご指摘お願いします。

 

この記事で、

見出しデザインが楽になったよー

とか

参考になったよー

とかありましたら、コメントいただけると大変うれしく思います。

 

 

 - WEBデザイン, WordPress

Comment

  1. kanae より:

    Twenty Thirteen を使ってバイリンガルのサイトを作っています。
    今回こちらの記事を参考に、h2の表示を変えることができました。
    ありがとうございます!

    ただ、色々いじっている間に、ヘッダーが表示されなくなってしまうと言う困ったことになってしまいました。。。。。うーむ。カスタマイズは大変ですね!

    • Staff Fujita Staff Fujita より:

      kanaeさま、コメントありがとうございます。

      私も試行錯誤しながらカスタマイズしていますが、
      少しでもお役にたてたみたいで良かったです。

  2. mimi より:

    おかげさまで見出しを変えることができました!
    シンプルでかっこいいです。
    本当にありがとうございます!

    • Staff Fujita Staff Fujita より:

      mimiさま、コメントありがとうございます。
      喜んでもらえて私もうれしいです。

  3. iineko より:

    白抜きグラデーションだけで表現するシャープなタイトルデザインを使わせてもらいました。とっても綺麗で気に入っています。
    ただ、IE11では表示されませんでした。マウスでドラッグしてやると字が見えるといった感じです。何か対策はあるでしょうか。教えていただけたら幸いです。

  4. iineko より:

    すいません解決いたしました。

  5. ganpon より:

    style.cssに、サンプルコードを貼り付けたらページのヘッダ部分などの変更したくない部分にも影響したので、元に戻したいのですが、テーマを削除しても、元に戻りません。どうしたらいいでしょうか?ご教示ください。

    • Staff Fujita Staff Fujita より:

      ganponさま、コメントありがとうございます。
      適用しているテーマを削除したら、別のテーマを選択することになります?
      それでもデザインが崩れますか?
      ブラウザのキャッシュで、削除前のページが表示されているのであれば
      キーボードの「F5」を押せば元に戻ると思います。
      それでもデザインが崩れているなら、テーマフォルダ以外のファイルにコード追加しませんでした?

  6. でつ より:

    最後の白抜きのやつが、IEだときちんと表示されません。
    chromeでは問題ないのですが・・・。

    • Staff Fujita Staff Fujita より:

      でつさま、コメントありがとうございます。
      IEでうまく表示されないようですが
      現在私がWEBサイト制作業務から外れているため、検証する時間が確保できません。
      ブラウザの互換モードの問題とかだったらいいのですが
      すみません!

Message

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

  関連記事