ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

CSSの疑似要素::beforeや::afterを1分で理解する【ワードプレスのカスタマイズ】

ワードプレスをCSSでカスタマイズするとき、よく見るのが::beforeや::afterです。

アイコンなどの装飾を見出しやリストの頭につけたり、ボタンの装飾やボックスの横幅制御など、利用方法は幅広くあるので、ぜひとも知っておきたいCSSですね。

この記事でわかること

・::beforeや::afterとは何なのか?その作用を1分で理解する
・::beforeや::afterの使用事例を知る

これであなたも疑似要素の使い手です。

目次

まずは1分で知る疑似要素の作用

::beforeや::afterといった疑似要素はセレクターに追記して、contentプロパティと併用します。

(セレクター)::before {content:"(挿入したいコンテンツ)";}

作用としては、contentプロパティに記述した内容を<span>タグで挿入するのと同じことになります。

  • ::beforeはspanタグを要素の頭に挿入したのと同じ作用
  • ::afterはspanタグを要素の最後に挿入したのと同じ作用

※::beforeを:before、::afterを:afterと記述しても同じです。CSSのversion3以前はコロン1つが標準でしたが、現在ではコロン2つが標準です。

簡単なHTMLの例をあげて説明しましょう。

HTML

<div class="box">
    明日は明日の風が吹く
</div>

ブラウザ表示

明日は明日の風が吹く

これに疑似要素::beforeとccontentプロパティを使ってCSSを記述してみます。

CSS

.box::before {
    content:"格言:";
}

ブラウザ表示

格言:明日は明日の風が吹く

これは次のように<span>格言:</span>を挿入したのと同じです。

CSS

<div class="box">
    <span>格言:</span>
    明日は明日の風が吹く
</div>

ブラウザ表示

格言:明日は明日の風が吹く

spanタグについての詳しい説明は、こちらの記事を参照してください。

::afterを疑似要素に指定した場合は、spanタグを要素の最後に挿入したのと同じです。

CSS

.box::before {
    content:"格言:";
}
.box::after {
    content:"!!";
}

ブラウザ表示

格言:明日は明日の風が吹く!!

疑似要素の応用例

見出しの頭のアイコンをつける

よくあるのが、見出しやリストの頭にアイコン画像を挿入することです。

例えば、このウェブチルサイトの見出し2には次のようなCSSでアイコンを挿入しています。

.single .post h2 {
	color :#2B2C42;
	position: relative;
	background: #EEF9FF;
	padding: 0.25em 0.5em;
	border-bottom: double 0.3em #91C4C7;
	border-top: double 0.3em #91C4C7;
	border-left: solid 2em #91C4C7;
}

.single .post h2:before {
	display: inline-block;
	font-family: "Material Icons";
	content: "\e3c9";
	position: absolute;
	padding: 0em;
	color: #2B2C42;
	left: -1.35em;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

簡単に解説すると、

・セレクター.post h2に::beforeを指定して疑似要素を挿入。

・display:inline-blockとしてインラインブロック要素に変換(後にtransformプロパティを使用するため念のため。変換しない場合は、spanと同じインライン要素となります)。

・font-familyでGoogleアイコンを指定してからcontentでアイコンの記号を指定。

・position:absoluteでアイコンの位置をleftとtopで調整できるようにする(その前に.post h2にposition:relativeをかけてあることが前提)。

・transformプロパティでアイコンが高さ方向の中央になるよう調整(transformプロパティはブロック要素ででないと作用しないことがあるので先にインラインブロック化しておいた)。

見出しについてのCSSについてはこちらの記事参照

インライン要素とブロック要素についてはこちらの記事参照

positionプロパティについてはこちらの記事参照

リストの頭にアイコンを使う

こんな風にリストの頭にアイコンを付けます(下記例ではピンクのチェックアイコン)。

  • リスト1
  • リスト2
  • リスト3
ul.check-list {
	list-style: none;
	width: 90%;
	margin: 0 auto;
	border: solid 3px #91C4C7;
	border-radius: 10px;
	padding: 0.5em 1em;
}
ul.check-list li {
	font-size: 1.6rem;
	margin-bottom: 1em;
}
ul.check-list li:last-child {
	margin-bottom: 0;
}
ul.check-list li:before {
	font-family: "Material Icons";
	content: "\e876";
	color: #ffc0cb;
        font-weight: 600;
	letter-spacing: 0.5em;
}

これも見出し同様、アイコンにはGoogleアイコンを使用しています。ただ見出しと違って、ブロック要素に変換する必要はなくインライン要素のままで使用しています。

ボックスのデザインに使用

ボックスにタグやタイトルをつけるのに使います。

例えばこんな風。

メモタグ付きのボックスです。

ボックスの作り方は、以下の記事を参照してください。ワードプレスのGutenbergでボックスを作成する方法ですが、タグやタイトルをつけるCSSは参考になります。

まとめ

  • ::beforeはspanタグを要素の頭に挿入したのと同じ作用
  • ::afterはspanタグを要素の最後に挿入したのと同じ作用

どちらもcontentプロパティと併用して使用することに注意してください。

また、挿入した疑似要素はspanタグと同じインライン要素ですが、これを必要に応じてインラインブロック要素やブロック要素に変換しましょう。

これで、あなたも疑似要素が怖くありません。どんどん応用してカスタマイズしていきましょう。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる