角を丸くする(画像・リストパーツ)

角を丸くする(画像・リストパーツ)

セルフルの上級者機能に追加された「カスタムCSS」
この機能を利用した裏技をこのブログでは紹介しています🤗

完成図

デザインテーマが「Solid」の場合の完成図はこちら。

画像の角を丸くしたもの

リストパーツの角を丸くしたもの

対応しているサイトデザイン※

「Solid」「More」

※サイトデザインとは、セルフルの管理画面左にある「サイト設定」に入った画面の一番上「サイトデザイン」で選択しているデザインのことです。

変更方法

下記のコードをコピーして「上級者設定」の中にある「カスタムCSS」をクリックしたページに貼り付けしてください。

角を丸くする(画像・リストパーツ両方)

/* -------- 角丸 -------- */

/* メインコンテンツ内の画像全て */
.entry-content .img img {
  border-radius: 32px;/* 丸みを指定 */
}

/* メインコンテンツ内のリスト */
.entry-content .list-block ul.check {
  border-radius: 24px;/* 丸みを指定 */
}

角を丸くする(画像のみ)

/* -------- 角丸 -------- */

/* メインコンテンツ内の画像全て */
.entry-content .img img {
  border-radius: 32px;/* 丸みを指定 */
}

角を丸くする(リストパーツのみ)

/* -------- 角丸 -------- */

/* メインコンテンツ内のリスト */
.entry-content .list-block ul.check {
  border-radius: 24px;/* 丸みを指定 */
}

丸みをカスタマイズする

画像の場合は、border-radius: 32px;/* 丸みを指定 */の中にある数字「32」を
リストパーツの場合は、border-radius: 24px;/* 丸みを指定 */の中にある数字「24」を別の数字に変更し更新をかけて、お好きな丸みに調整してみてください。

デザインカテゴリの最新記事