コピペで簡単!Simplicityでも使えるシンプルな見出しデザインでカスタマイズしよう!

HTMLやCSSがよく分からないという人も安心して使えるように今回は見出し部分のデザインをいくつかご紹介します。

初心者の方も簡単に出来るように、詳しく解説しますので、ある程度分かっている人は読み飛ばしていってください。

WordPressのテーマSimplicityを使っていることを想定して話を進めますが、他のテーマでもやることは変わりません。

見出しとは?

見出しとは、この矢印の指す部分を言います。HTMLでは<h1><h2>とよばれている部分ですね。

文章を書いていく上で、見出しを挿入することで話の区切りや、読みやすさの向上につながるので必ず使うようにしましょう。

WordPressではどこにあるかというと、

「段落」という所を押すと出てきます。「見出し1」というのが<h1>、「見出し2」が<h2>…を指しています。

しかし、これはデフォルトの見出しですのでまったくデザイン性がありません。自分らしくするためにもこれから紹介する見出しを使ってみましょう。

見出しデザイン10選

とりあえず、見出しデザインを見てみましょう。気に入ったものがありましたら、後述する見出しの表示方法や色の変え方などの部分を読んでください。

下線を一本引くシンプルなもの


HTML

<h1 class=”heading_1″>CSSで描くシンプルな見出しデザイン</h1>

CSS

h1.heading_1 {
color: #1A1A1A;/* 文字色 */
border-bottom: solid 5px #EE87B4;/* 下線の種類・太さ・色 */
}

下線を破線にしたもの


HTML

<h1 class=”heading_2″>CSSで描くシンプルな見出しデザイン</h1>

CSS

h1.heading_2 {
color: #1A1A1A;/* 文字色 */
border-bottom: dashed 2px #B3B3B3;/* 下線の種類・太さ・色 */
}

上下を点線で囲う


HTML

<h1 class=”heading_3″>CSSで描くシンプルな見出しデザイン</h1>

CSS

h1.heading_3 {
color: #4D4D4D;/* 文字色 */
padding: 0.1em 0;/* 余白調整 */
border-top: dotted 2px #B3B3B3;/* 上線の種類・太さ・色 */
border-bottom: dotted 2px #B3B3B3;/* 下線の種類・太さ・色 */
}

二重下線をひく


HTML

<h1 class=”heading_4″>CSSで描くシンプルな見出しデザイン</h1>

CSS

h1.heading_4 {
color: #0068B7;/* 文字色 */
border-bottom: double 5px #9FD9F6;/* 下線の種類・太さ・色 */
}

二重線で囲う


HTML

<h1 class=”heading_5″>CSSで描くシンプルな見出しデザイン</h1>

CSS

h1.heading_5 {
color: #009794;/* 文字色 */
padding: 0.1em 0;/* 余白の調整 */
border-top: double 4px #009794;/* 上線の種類・太さ・色 */
border-bottom: double 4px #009794;/* 下線の種類・太さ・色 */
}

背景色を加える


HTML

<h1 class=”heading_6″>CSSで描くシンプルな見出しデザイン</h1>

CSS

h1.heading_6 {
color: #C70044;/* 文字色 */
background: #FAE1EC;/* 背景色 */
padding: 0.2em;/* 余白の調整 */
}

左に線を加える


HTML

<h1 class=”heading_7″>CSSで描くシンプルな見出しデザイン</h1>

CSS

h1.heading_7 {
padding: 0.2em 0.5em;/* 余白の調整 */
color: black;/* 文字色 */
border-left: solid 8px #EF845C; /* 左線の種類・太さ・色 */
}

左線と下線を加える


HTML

<h1 class=”heading_8″>CSSで描くシンプルな見出しデザイン</h1>

CSS

h1.heading_8 {
padding: 0.2em 0.5em;/* 余白の調整 */
color: black;/* 文字色 */
background: #F7F7F7;/* 背景色 */
border-left: solid 8px #C6006F;/* 左線の種類・太さ・色 */
border-bottom: solid 3px #D7D7D7;/* 下線の種類・太さ・色 */
}

背景色に影をつける


HTML

<h1 class=”heading_9″>CSSで描くシンプルな見出しデザイン</h1>

CSS

h1.heading_9 {
padding: 0.2em 0.5em;/* 余白の調整 */
background: #FFFCDB;/* 背景色 */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);/* 影の種類 */
}

下線にグラデーション


HTML

<h1 class=”heading_10″>CSSで描くシンプルな見出しデザイン</h1>

CSS

h1.heading_10 {
position: relative;
padding: 0.2em 0;/* 余白の調整 */
}
h1.heading_10:after {
content: ”;
display: block;
height: 4px;
background: linear-gradient(to right, black, transparent);/* グラデーションの仕方 */
}

スポンサーリンク

CSSとHTML

上記のデザインの中で気に入ったものがありましたら、実際に使ってみましょう。

まず、CSSに追加する方法です。

WordPressをお使いの方は左のバーの、外観→テーマの編集→スタイルシート(style.css)に上記から選んだCSSコードをコピペしてください。

ペーストしたら「ファイルを更新」を忘れずに押してください。

続いてHTMLです。

上記のように「ビジュアル」編集ではなく、「テキスト」編集の方にHTMLコードを書いてください。「ビジュアル」にした時に求めているものが表示されないかもしれませんが、Webで記事を公開したときには表示されます。

これで、オシャレな見出しはできると思います。

次に、さらに自分らしさを出せるように色の変更方法を紹介します。

色の変更

文字色や背景色、線の色などは自由に変更してみましょう。

CSSコードのなかで、私は16進法の色コードを使っています。#◯◯◯◯◯◯の部分を好きなように変えてみてください。

よく使えるキレイな色をいくつか紹介しますので、いいのがあったら是非使ってみてください。

16進法のコードを文字色や背景色の部分に適用してあげてください。

見出し・classの変更

見本で用意した見出しのHTML&CSSコードはすべて<h1>で作っています。

使いたい見出しのサイズに合わせて<h1>の部分を<h2><h3>にしてください。

また、今回順番通りにclass名を付けました。みなさんのお好きなようにclass名も変更して構いません。そのときは、HTML、CSSともに該当箇所を変更するようにしてください。

具体的には、

<h1 class=”heading_1″>CSSで描くシンプルな見出しデザイン</h1>

の部分の<h1 class=”heading_1″><h2 class=”my-heading”>のように変えてください。

まとめ

いかがでしたか?

好きな見出しデザインを見つけてぜひ、自分らしくSimplicityやその他Webページをカスタマイズしてください。

分かりやすく、見やすいときっと人も集まると思います。

今回はシンプルな見出しのCSSを紹介しました。もうちょっとオシャレなものも紹介しますのでご期待ください。

CSSが効かなくて困っている場合は以下の記事を参考にしてみてください。

Google Chromeを使っていてCSSが反映されない時の対処法を紹介します。
スポンサーリンク
レクタングル大広告
レクタングル大広告

シェアする

フォローする

スポンサーリンク
レクタングル大広告