CSSをいじっていく

WordPressで見出しをオシャレにする

投稿日:2018年6月11日 更新日:

こんにちは、ぐだおです。

今日は、投稿記事中の見出しをオシャレにする(オシャレな見出しをつけるわけではなくて、見た目をオシャレにする)方法について書いていきます。

小見出しの基本について

記事を読みやすくするには、小見出しをつけていくのが良いですよね。これSEO的にもhタグで小見出しをつけていくのは意味があることらしいです。私も最初は太字にしたり、色を変えたり、文字サイズを大きくしたりしていましたが、なんかパッとしないなと思っていました。で、他のページを見ると、見出しがもっとはっきりしているんですよね。というわけで、WordPressでオシャレな見出しにする方法をまとめました。

いつものように外観–>テーマの編集からスタイルシートstyle.cssを編集します。
CSSファイルの編集についてはこちらの記事で書いています。
HTMLファイルのタグについてはこちらの記事で書いています。

STINGER8のデフォルトの小見出し

私がこの記事を書いている時点で使っているSTINGER8にはデフォルトの見出しタグとして以下のような中見出しh2や小見出しh3, h4が用意されています。ちなみにh2、h3、h4というのは見出しのためのタグなので、このタグではさんだ文章というのは見た目だけじゃなくSEO、つまり検索エンジン上も特別な意味をもちます。

これが中見出しh2です。
これが小見出しh3です。
これが小見出しh4です。

こんな感じです。これでも悪くはないですが、ちょっと改変していきましょう。

STINGER8の小見出しh3の各要素の解説

例として元のCSSファイルでh3を見ると以下のように書かれています。

/*小見出し*/
.post h3 {
font-size: 18px;
line-height: 27px;
margin: 20px 0;
padding: 10px 15px;
color: #1a1a1a;
background-repeat: no-repeat;
background-position: left center;
border-bottom: 1px #999999 dotted;
}

ただh3と記述してしまうとページ全てのh3を指しますが、ここでは.postという限定が入っているので投稿ページ(記事)内のh3のデザインだけを指定しています。
それではひとつずつ見ていきましょう。

font-sizeはそのまま文字サイズ、
line-heightも行の高さですね。

marginは要素の外側の余白、paddingは要素の内側の余白です。
少しややこしいですが、小見出しを四角で囲んだ場合に、文字と四角の間の余白がpeddingで、四角の外側の余白がmarginです。
marginとpeddingに値が1つしか指定されていないときは上下左右に同じ余白をとります。上記の例のように二つのときは、一つ目が上下で、二つ目が左右の余白になります。3つだと、一つ目が上、二つ目が左右、三つ目が下になります。4つだと、一つ目が上、二つ目が右、三つ目が下、四つ目が左になります。余白はpxだけでなくem(1em=1文字分の長さ)もしくはex(1ex=x文字の高さ)でも指定可能です。

colorは文字の色で#1a1a1aは黒ですね。

background-repeatは、背景画像をどう繰り返し表示するかという設定なので、そもそもここでは背景画像を指定していないので関係ありません。repeatだとこの部分に縦横に同じ背景画像を繰り返して表示します。横方向にのみ繰り返すrepeat-xと縦方向にのみ繰り返すrepeat-yもあります。
no-repeatは文字通り背景画像を一回だけ表示して繰り返しません。spaceやroundを使ってスペースやサイズもそれぞれ調整可能ですが、とりあえずここでは詳細は説明しません。

background-positionは、背景画像の表示開始位置を指定するプロパティです。これも今回は関係ありません。上記の例ではleft,center,rightや、top,center,bottomといった位置を表すキーワードで指定していますが、より詳細に左上からの距離を横方向と縦方向の順で%で指定することもできます。左上からの距離を横方向と縦方向の順で、ピクセルpxやdpiなどの数値でも指定可能です。

border-bottomは、下にひく線のタイプを指定します。ここでは1pxの太さの、グレー#999999の点線dottedを指定します。線の太さと色はここで自由に変えられます。線のタイプは以下にまとめました。
基本的なものとしては、

solid: 1本線
double: 2本線
dashed: 破線
dotted: 点線

少し分かりにくいものとしては、

groove: 立体的に窪んだ線
ridge: 立体的に隆起した線
inset: 左と上が暗くて右と下が明るいため、囲まれた領域全体が立体的に窪んだように見える。
outset: 左と上が明るくて右と下が明るいため、囲まれた領域全体が立体的に隆起したよう見える。

があります。実際に例示していきます。(*ここでは全体を枠で囲いたいのでborder: 8pxにしています。)

これがgrooveです。
これがridgeです。
これがinsetです。
これがoutsetです。

以上で基本が終わりです。ここからよく見かける見出しを実際に作っていきます。

よく見かける小見出しの実例とその作り方

例1:左に縦線を入れつつ背景色も入れる

例1:左に縦線を入れつつ背景色も入れます。
.example1 {
font-size: 18px;
height: 24px;
line-height: 24px;
margin: 20px 0;
padding: 0.5em;
color: #1a1a1a;
background: #E0F8EC;
border-left: solid 6px #66CC00;
}

backgroundのところに背景色を指定しています。
左の縦線はborder-leftで引きます。border-bottomの応用ですね。borderだと4辺、border-topで上だけ、border-rightで右辺だけに線が引かれます。

例2:左に丸ポチを入れて角丸の四角で囲む

例2:左に丸ポチを入れて角丸の四角で囲む。
.example2{
font-size: 18px;
height: 24px;
line-height: 24px;
margin: 20px 0;
padding: 0.5em;
background: #E0F8F7;
border-radius: 10px 10px 10px 10px;
}
.example2:before {
content: ‘●’;
color:#0000FF;
margin-right: 8px;
}

span class=”orange_line”>border-radius:で角丸のボックスを書いています。px数は角部分の円の半径を示しているので、この数値が大きくなるほど曲線部分が大きくなっていきます。左上・右上・右下・左下の順番です。スラッシュをつかって垂直方向と水平方向の長さの違う楕円を描くこともできます。例えば水平方向に20px垂直方向に10pxの楕円を描きたいときは、20px 20px 20px 20px / 10px 10px 10px 10px;とします。
example2:beforeでテキストを書く前に入れるものを指定します。ここでは丸を描くのでcontentに●を書き、その色をcolorで指定します。margin-rightは丸とテキストとの間隔を規定しています。

上記のCSSでも基本的には問題ないのですが、スマホ等の横幅の狭いディスプレイを使用していて見出しが複数行になってしまった時には、上記のままだと丸の下にテキストが入り込んでしまって不恰好になります。それを防ぐために、以下の三行を足します。

display: inline-block;
vertical-align: middle;
width: auto;

ここで一番大事なのはdisplay: inline-blockで、これを使うとそれぞれの要素で横並びにしてくれるので、テキストが丸ポチの下に入り込むことはありません。vertical-aline: middleは上下を中央揃いさせるために使っていますが、基本的にはなくても大丈夫なはずです。最後のwidth: autoは、display: inline-blockを設定すると線や背景がテキストの幅で終わってしまうため、デフォルトの設定であるwidth: autoに戻してスペースの幅一杯に背景色を入れるためにいれています。実際に改変CSSで表示したものを下に示しますので、ブラウザのウィンドウサイズをいじって挙動を確認してみてください。

例2B:左に丸ポチを入れて角丸の四角で囲む。

例3:吹き出しを下につける

例3:吹き出しっぽくする。
.example3{
font-size: 18px;
line-height: 24px;
margin: 20px 0;
padding: 0.5em;
position: relative;
background: #F7BE81;
}
.example3:after {
position: absolute;
content: ”;
top: 100%;
left: 1.5em;
border: 18px solid transparent;
border-top: 18px solid #F7BE81;
width: 0;
height: 0;
}

positionは基本的にtop, bottom, left, rightを使って基準からの距離を指定するために使いますが、実際に場所を動かすためには別途以下の指定が必要です。

static:デフォルトはこれです。この状態だと位置は変えられません。top, bottom, left, rightもききません。
relative:現在の表示位置から相対的に要素の位置を動かしたいときに使います。
absolute:親要素を基準に絶対的な位置を決めるために使います。上記の例だとexample3:afterの場所をexample3の位置を基準に決めます。top: 100%なので、example3の下端の左から1.5emの位置になります。
fixed:文字通り画面のきまった位置に固定します。

relativeとabsoluteを覚えておけば良いですね。

三角形の出し方は少しややこしいのですが、これはborder同士の接地面が斜めの切り口になることを利用してつくります。そのためには中央の空白は入りませんのでwidthとheightの値を0に指定します。少し分かりにくいので実例を出します。

.triangle {
display: block;
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid yellow;
border-bottom: 50px solid green;
border-left: 50px solid blue;
}

このtriangleを表示すると

このようになります。border-topには50px solid redを入力したので、上辺からは高さ(太さ)50pxで横幅が100px(border-rightとborder-leftのwidthの和)の二等辺三角形ができます。同様に右辺には黄色の、下辺には緑の、左辺には青色の二等辺三角形ができます。borderの太さを変えることでサイズや形を調整できます。吹き出しを作るときには上辺だけに二等辺三角形が欲しいので、他の辺はtransparentにしています。

実はこの三角形を指定するように丸を指定することで例2のような見出しをつくることもできます。

例2C:左に丸ポチを入れて角丸の四角で囲む

例2C:左に丸ポチを入れて角丸の四角で囲む。
.example2B{
position: relative;
font-size: 18px;
line-height: 1.5em;
margin: 20px 0px;
padding: 0.5em 0.5em 0.5em 2em;
background: #E0F8F7;
border-radius: 10px 10px 10px 10px;
}
.example2B:before {
position: absolute;
content: “”;
background: #0000FF;
top: 0.75em;
left: 0.75em;
height: 0.75em;
width: 0.75em;
border-radius: 50%;
}

という感じになります。topとleftで丸の位置を指定して、heightとwidthで丸のサイズを指定しています。backgroundが丸の色ですね。今回は真円を描きたかったのでborder-radius:には50%を入れています。楕円にしたいときにはここの数値を変えます。

まとめ

今回紹介した見出しを組み合わせたりすることによって大抵のページで使われている見出しをつくることができます。また、今回紹介した見出しはすべて幅一杯まで線や背景色を入れていますが、width: 80%;等を指定することによって幅のサイズを規定できます。 下線やボックスをテキストの部分までにしたい場合にはdisplay: inline-block; を指定する、もしくは、 spanタグで囲むことで実現できます。ちなみに、私は別の目的でこれらを使用していてテキストのところまでしか、下線が伸びないことにハマっていました。ご注意を。
今回紹介した例以外にも別に書いた蛍光風マーカーを引いて見出しにするのもよいと思います。

もっとオシャレな見出しを使いたいという方は、「CSS」「見出し」「デザイン」みたいなワードで検索すると無数の例がでてきますので、自分の目的にあったものを探してみてください。では。。。

-CSSをいじっていく

執筆者:


comment

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

CAPTCHA


関連記事

WordPressでマーカーを引く

こんにちは、ぐだおです。 WordPressで作られたホームページを見ていると、強調するために太字にしたりさらにフォントの色を変えたりするだけではなく、マーカーを引いているページが多いことに気づました …