ワードプレスで文字の背景に○（マル）をつけたいけど
どうすればいいんだろ？
と、どうすればいいか考えていました。
・丸い画像に文字を重ねる？
・文字と重なった画像を用意する？
・プラグイン使う？
いろいろ調べましたが、追加CSSで
・文字に背景色をつける
→背景色を丸くする
というのが手っ取り早くて微調整がしやすいかなと思い、その方法を取りました。
今回は追加CSSで背景にマルをつける方法をご紹介します。
見本
こんな感じになります。
Q
HP作るのって大変？
A
HPを作る難易度は、作り方によって変わります。素人でも見栄えのいいHPを作る方法もありますし、1から作る難しい方法もあります。
ただ、それに応じてカスタマイズの幅や機能性も変わってきます。簡単なものはそれなり、難しいものだと自由自在にカスタマイズ可能。
そこは一長一短ですね。
Q
どういうスキルが必要？
A
だれでも作れるツールを使う場合はスキルは不要です。
ワードプレスで作成するなら、HTMLとCSSのスキルがあるとカスタムできる幅が広がります。
1から作るならJavaScriptのスキルも欲しいところです。
解説＆コード
まず、背景にマルをつけたいブロックに追加CSSクラスをつけます。（ここではクラスqa）
それから以下のコードを追加CSSに追記します。
.qa {
margin: 0 auto;
margin-top: -60px;
line-height: 70px;
background-color:#FFB5BF;
height: 70px;
width: 70px;
font-size:38px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}軽くコードについて解説します。
margin: 0 auto;
→横の中心を整える
margin-top: -60px;
→親要素（ここでは白い四角）から少し上にはみ出させる
line-height: 70px;
→行間を指定して、文字が縦の中心になるように調整
background-color:#FFB5BF;
→背景色を指定
height: 70px;
→高さを指定
width: 70px;
→横幅を指定
font-size:38px;
→文字の大きさを指定
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
→角を丸くする
これで画像やプラグインを使わずに丸い背景をつけることができます。
ホームページ制作、LINE公式アカウントの構築・ホームページとの連携といった活動をおこなっています。
詳しくはこのサイトのお問い合わせページ、あるいはこちらまで。