THE THOR ザ・トール アイキャッチ 画像の角を丸くする 【 角丸 】

当サイトではワードプレスの有料テーマ THE THOR を利用しています。

THE THOR は優れたデザイン性が売りですが、細かい部分は自分の好みに合わせて変更していきたいと思います。

 

今回はアイキャッチ画像の角を丸くする方法。

アイキャッチ画像に丸みを持たせることでサイトを優しく親しみやすい雰囲気に変更することができます。

 

THE THOR の導入はこちら

Google が推奨する最新の機能を搭載した「THE THOR」を導入する。
※ THE THOR の詳細・ダウンロードについては公式サイトをご覧ください。

レンタルサーバー/ドメインは設定や管理がわかりやすい ConoHa WING を推奨します。
サーバー移行は 専門の業者にお願い することもできます。

 

アイキャッチ 画像の角を丸くする

 

カスタマイズには追加CSSを利用するのが簡単。追加CSSにコードをコピペするだけで完成します。

操作手順
外観 → カスタマイズ → 追加CSS

 

コピペするコードは以下の通り。

/*アイキャッチ角丸*/
.eyecatch {
    border-radius: 8px;
}

 

数値の部分が角丸の半径になるので大きくすると大きな角丸になります。

角の縦横ごとに半径の大きさが指定できるので細かく指定すると視覚効果の高い枠を作り出すことができます。

※px指定以外にもパーセンテージで指定することもできます。

 

これが↓
ドライブヘッド安売りSALEセール

 

こうなります↓

アイキャッチ 角丸 THOR
8px

 

こういうのも出来ます↓

アイキャッチ 角丸 THOR 変形
50% 50% 50% 70%/50% 50% 70% 60%

 

\CSSは書籍で学ぼう/

HTML5 & CSS3 デザインレシピ集

HTML5 & CSS3 デザインレシピ集

狩野 祐東
2,965円(03/28 09:39時点)
発売日: 2017/02/22
Amazonの情報を掲載しています

 

あとがき

 

全てのアイキャッチ画像が角丸になるのでご注意ください。

 

THE THOR 記事一覧