【WordPress】背景の角を丸くするカスタマイズ！

こんにちはクリアメモリです！

サイトをカスタマイズしていると、角を丸くしたい箇所が出てきます。

例えばサイドバーの背景だけ角を丸めて他と変化をつけたり、画像や見出しの枠を丸める時などに使えます。

WordPressの見出しを丸めることで、より目立たせることができるので、方法がわからないという人は是非覚えておいてください。

はじめに

前回「WordPressで見出しに枠を付ける方法」を紹介しました。

見出しを丸めるためには枠が付いていないといけないので、見出しを丸めたい人は見ておいてください。

また、今回の方法ではテーマを編集します。テーマを間違えて編集してしまうと、サイトが壊れる危険性があります。

今回の作業は自己責任でお願いします。

では角を丸めるコードを紹介していきます。今回はわかりやすいように記事の角を丸めてみましょう。

要素の検証

今回の方法は「要素の検証」を使うと、とてもカスタマイズしやすくなります。

カスタマイズしたい箇所で「右クリック」すると「要素の検証」又は「検証」という項目が表示されると思います。

すると、ページ内にウィンドウが開くので任意の箇所を変更することができます。

要素の検証からカスタマイズすると、その場で変更結果を見ることができるようになるのでとても便利です。

ただ、要素の検証から変更した部分はリロードすると元に戻ってしまうので、変更するコードを追加する必要があります。

角を丸めるコードを書く

今回新たに書き加えるコードは以下のようなものです。

border-radius: 34px;

記事の背景は「.hentry」なので、そこへこのコードを書き加えてください。

これで角が丸くなっていると思います。

角を丸める最大値は、枠の大きさにもよるので自分のサイトに合わせて変更しましょう。 

ちなみに私の記事ではここまで角を丸めることができました。

最大値を見るために変更しただけなので、現在は元のレイアウトに戻してあります。

この方法を使えば、見出しの背景だけを丸くすることもできます。

先日の「見出しに枠を付ける方法」を参考にして、枠を付けることができたら先ほどと同じように「border-radius」を記述してください。

色などを変更していくとより一層わかりやすくなります。

まとめ

今回の方法を使えば、見出しや背景の角を丸めることができるようになります。

角を丸めることで、やわらかい印象を与えることができるようになるので、サイトによっては必須になってくると思います。

さらに正方形の背景でborder-radiusの値を最大にすると、完全な円形になります。

もしかしたらこちらも使える時があるかもしれませんね。

ではまた。