THE THOR アイキャッチ 画像の角を丸くする 【 角丸 】

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

 

THE THOR とは? 『ザ・トール レビュー』

 

 

アイキャッチの角がトゲトゲしくて心を痛めていました。繊細なからあげ棒です。

 

 

今回も簡単3分カスタマイズ!

※時間は個人差があります。

 

 



 

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

 

追加CSSにコードを挿入します。

外観 → カスタマイズ → 追加CSS

 

 

挿入するコードは以下の通り。

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

 

 

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

 

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

 

 

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

 

こうなります↓
アイキャッチ 角丸 THOR

 

こういうのも出来ます↓
アイキャッチ 角丸 THOR 変形

 

 


 

あとがき

 

これで自分のサイトを見る度に心をえぐられることはなくなりましたw

 

 

この方法で角丸にすると全てのアイキャッチが角丸になるのでご注意ください。

カスタマイズは自己責任でお願いします!

 

 

THE THOR プチカスタム

 

HTML5 & CSS3 デザインレシピ集

HTML5 & CSS3 デザインレシピ集

狩野 祐東
発売日: 2017/02/22
Amazonの情報を掲載しています
呟くのよ・・・私の棒ストが