BlogMENUトッププロフィールレンタルサーバー(共用サーバー・仮想専用サーバー)と独自ドメイン、ホームページ制作、Office365とWEB会議システムなどのサービスを運営する中で得た知識やサービス比較を中心に、WordPressやPlesk、マーケティングに関する情報を発信しています。最終更新日:2015/08/20こんにちは。WEBサービスを担当している藤田です。11月も中旬になり、夜はかなり冷え込むようになりましたよね。先日仕事を終えて自宅に帰ると、着る毛布が2着届いていました。寝ぞうが悪くてもあったかいってことで、この冬とても活躍してくれそうです。問題があるとすれば、サイズですね。自分は、男性の標準体型なのですが、それでも少し袖丈と着丈が短いんです。ひじがギリギリ隠れるくらい。毛布なのに、少し寒いなんて。ホームページやブログの見出しの「デザイン」ってなかなか決まらなかったりしますよね。当ブログは、記事タイトルにあたるh1の見出しは少しフォントサイズを大きくして記事内の見出しにあたるh2はテーマのデフォルトの見出しのまま使用していてサイドメニューの見出しにあたるh4は少しデザインを加えています。これまでテストの為、色々と試してきたタイトルデザインですがもしかすると誰か欲しいひとがいるかもしれない!そう思ってゴミ箱から呼び戻し少し修正を加えました。コピペOKのCSSのコードを9連発でご提供させていただきます。まとめシンプルイズベストのタイトルデザイン最近よく見る見出しデザインNo.1です。タイトルの左側にラインが1本あるだけなのですがこの見出しはCSSの記述もシンプルで、自分もよく使っていました。!important;}ザ・スタンダードなタイトルデザイン続いて、先ほどの見出しにちょっとアレンジして下線を加えてみました。このタイプもよく見かけますね。!important;}2色のサイドバーでちょっとシャレオツなタイトルデザインさらに、先ほどの見出しの左のサイドバーを2色使いにして、下線をドットにしています。色に変化があるだけで、ちょっとオシャレな感じに見えますよね。2色のみで表現する今風のタイトルデザインタイトル文字を白抜きにして、左側にラインを入れています。2色しか使用していませんが、オシャレな印象さえ与えてくれます。どちらかというと、フラットデザインのサイトに向いている見出しのデザインですね。#ffffff;content:'';}シンプルなグラデーションのみで表現したタイトルデザインフラットデザインはちょっとな~という方には、背景にグラデーションを入れてみてはいかがでしょうか。グラデーションの配色を表現するCSSは、以下のサイトで作成してコピペしています。自分の好きなグラデーションで見出しを作成したい方は活用してみてください。!important;}中央で切り替わるグラデーションで見やすくてカッコいいタイトルデザイン先ほどの見出しと似ていますが、グラデーションが中央で切り替わっているタイプです。角の丸みを小さくすることで、ユーザーにシャープな印象を与えます。!important;}文字に影を付けてカッコよくしたタイトルデザイン影を付けて、立体的に表現する見出しもカッコいいと思います。色と影を変更する場合、見易さを保つためにバランスを調整する必要があります。!important;}温もりを感じさせるフェルトっぽいタイトルデザインタイトル文字と背景に若干の影を入れて、周りを破線で囲えばちょっとフェルトっぽい、温かい感じになります。!important;}白抜きグラデーションだけで表現するシャープなタイトルデザイン背景色とグラデーションだけにこだわったシンプルなデザインです。組み合わせによって、シンプルだけど「見出し」をこんなにかっこよくすることもできます。個人的には、この色あいが好きです。!important;}まとめいかがでしたでしょうか。気に入った「見出し」デザインは見つかりましたでしょうか。今回の「見出し」デザインはCSSのみで表現することにこだわっています。画像を使うと、ディレクトリを変更したり、サイトの引っ越しをしたときなどリンク切れ起こしたりして、修正が面倒というのが主な理由です。画像を読み込むより、スタイルシートを読み込んだ方がサイトの表示が早くなるのでは・・・という、願いも込められています。自分はデザイナーでもコーダーでもないためコードに自信がありません。間違っていたらご指摘お願いします。見出しデザインが楽になったよーとか参考になったよーとかありましたら、コメントいただけると大変うれしく思います。使ってバイリンガルのサイトを作っています。今回こちらの記事を参考に、h2の表示を変えることができました。ありがとうございます!ただ、色々いじっている間に、ヘッダーが表示されなくなってしまうと言う困ったことになってしまいました。pmkanaeさま、コメントありがとうございます。お役にたてたみたいで良かったです。pmおかげさまで見出しを変えることができました!シンプルでかっこいいです。pmmimiさま、コメントありがとうございます。喜んでもらえて私もうれしいです。pm白抜きグラデーションだけで表現するシャープなタイトルデザインを使わせてもらいました。綺麗で気に入っています。IE11では表示されませんでした。マウスでドラッグしてやると字が見えるといった感じです。何か対策はあるでしょうか。教えていただけたら幸いです。amすいません解決いたしました。pmstyle.cssに、サンプルコードを貼り付けたらページのヘッダ部分などの変更したくない部分にも影響したので、元に戻したいのですが、テーマを削除しても、元に戻りません。したらいいでしょうか?ご教示ください。pmganponさま、コメントありがとうございます。適用しているテーマを削除したら、別のテーマを選択することになります?それでもデザインが崩れますか?ブラウザのキャッシュで、削除前のページが表示されているのであればキーボードの「F5」を押せば元に戻ると思います。am最後の白抜きのやつが、IEだときちんと表示されません。chromeでは問題ないのですが・・・。pmでつさま、コメントありがとうございます。IEでうまく表示されないようですが現在私がWEBサイト制作業務から外れているため、検証する時間が確保できません。コメントをキャンセルメールアドレスが公開されることはありません。Businessをアンインストールする唯一の方法。RSSWordPress.org画像を使わずコピペだけでWordPressの「見出し」タイトルがカッコよくなるデザイン9連発!レンタルサーバー(共用サーバー・仮想専用サーバー)と独自ドメイン、ホームページ制作、Office365とWEB会議システムなどのサービスを運営する中で得た知識やサービス比較を中心に、WordPressやPlesk、マーケティングに関する情報を発信しています。