テーマの変更に伴いレイアウトが崩れておりますが、閲覧には問題ありません

【SWELL】段落のスタイル「角に折り目」に自然なボーダーをつける

WordPressテーマ『SWELL』の段落ブロックのスタイル「角に折り目」に、自然なボーダーをつけるカスタマイズを紹介します。

目次

自然なボーダーの「角に折り目」

境目をくっきりさせるために、ボーダーをつけます。

しかし、『SWELL』のデフォルトの機能でボーダーをつけると…

右上の角が不自然なボーダーになっちゃうんですよね。

今回は、こんな不自然なボーダーではなく…

こんな、自然なボーダーをつけるカスタマイズを紹介します。

カスタマイズ方法

「外観」>「テーマエディター」のスタイルシートに、下記のCSSをコピペしてください。

.is-style-crease {
	border: solid 1px rgba(0,0,0,.1);
}
.is-style-crease::before {
	top: -1px;
	right: -1px;
}

「ファイルを更新」したら、おしまいです。

「角に折り目」スタイルを適用すると、自動的に自然なボーダーがつきます。

今回追加したボーダーは、ブロックエディターには反映されません。プレビューや投稿を表示すると正常に表示されます。

マーク

ボーダーの色は、折り目と同じ色だよ

おわりに

「角に折り目」に自然なボーダーをつけるのは、私が『SWELL』を買って最初におこなったCSSのカスタマイズです。

「角に折り目」みたいなデザイン、大好きなんですよね!文字を少し小さくして、補足説明に使いまくってます。

実際に使うと、こんな感じ。めちゃくちゃ使いやすい。

マーク

『SWELL』には魅力的なスタイルが他にもたくさんあるからか、「角に折り目」を使ってるひとは、あまり見ないのが残念

よかったらシェアしてね!

この記事を書いた人

ゲーム・漫画・アニメが好きなブロガーです。アフィリエイトで月40万達成。永遠のオタクです。

目次
閉じる