当サイトではワードプレスの有料テーマ THE THOR を利用しています。
THE THOR は優れたデザイン性が売りですが、細かい部分は自分の好みに合わせて変更していきたいと思います。
今回はアイキャッチ画像の角を丸くする方法。
アイキャッチ画像に丸みを持たせることでサイトを優しく親しみやすい雰囲気に変更することができます。
THE THOR の導入はこちら
Google が推奨する最新の機能を搭載した「THE THOR」を導入する。
※ THE THOR の詳細・ダウンロードについては公式サイトをご覧ください。
レンタルサーバー/ドメインは設定や管理がわかりやすい ConoHa WING を推奨します。
サーバー移行は 専門の業者にお願い することもできます。
アイキャッチ 画像の角を丸くする
カスタマイズには追加CSSを利用するのが簡単。追加CSSにコードをコピペするだけで完成します。
操作手順
外観 → カスタマイズ → 追加CSS
外観 → カスタマイズ → 追加CSS
コピペするコードは以下の通り。
/*アイキャッチ角丸*/
.eyecatch {
border-radius: 8px;
}
数値の部分が角丸の半径になるので大きくすると大きな角丸になります。
角の縦横ごとに半径の大きさが指定できるので細かく指定すると視覚効果の高い枠を作り出すことができます。
※px指定以外にもパーセンテージで指定することもできます。
これが↓
こうなります↓
こういうのも出来ます↓
＼CSSは書籍で学ぼう／
狩野 祐東
2,965円(11/21 13:36時点)
発売日: 2017/02/22
Amazonの情報を掲載しています
あとがき
全てのアイキャッチ画像が角丸になるのでご注意ください。
