対角のコーナーをカットした、CSS によるカスタマイズ例紹介
コーナーをカットしたデザインを CSS でどうやって作るのか、実際に WordPress のブロックを使って試してみました。
作ってみたカスタマイズ例とカスタマイズコードをいくつか紹介します。
単色の塗りつぶしの場合
背景を単色の塗りつぶしにしたい場合は以下のようなシンプルな CSS だけでカスタマイズできます。
グループブロックに 追加 CSS クラス diagonal-cutout-single-color を指定してあります。
.diagonal-cutout-single-color {
background: linear-gradient(135deg, rgb(255,255,255) 3%, var(--vk-color-primary) 3%, var(--vk-color-primary) 97%, rgb(255,255,255) 97%);
}
単色の塗りつぶしの応用例 ①
上記の CSS の色を変えることによって、このようにカスタマイズできます。
.diagonal-cutout-single-color-1 {
background: linear-gradient(135deg, var(--vk-color-primary) 3%, var(--vk-color-bg-accent) 3%, var(--vk-color-bg-accent) 97%, var(--vk-color-primary) 97%);
}
単色の塗りつぶしの応用例 ②
さらにひと手間加えると、このようなカスタマイズもできます。
グループブロックの中にグループブロックを入れる二重構造にしてあります。
.diagonal-cutout-single-color-2 {
border: 1px solid var(--vk-color-border);
}
.diagonal-cutout-single-color-2-inner {
background: linear-gradient(135deg, var(--vk-color-primary) 3%, var(--vk-color-bg-accent) 3%, var(--vk-color-bg-accent) 97%, var(--vk-color-primary) 97%);
}
インナーブロックを使わないと、応用例 ③ のように右上と左下に意図しない色がついてしまいました。
単色の塗りつぶしの応用例 ③
応用例 ② でインナーブロックを使わないとこうなります。
.diagonal-cutout-single-color-3 {
border: 1px solid var(--vk-color-border);
background: linear-gradient(135deg, var(--vk-color-primary) 3%, var(--vk-color-bg-accent) 3%, var(--vk-color-bg-accent) 97%, var(--vk-color-primary) 97%);
}
これはまたこれで、いいかもしれませんね😓
背景画像を設定してある場合 ①
2024.1.16 追記 もっとスマートなやり方がありました。この次にやり方を追加してあります。
背景画像が使われていると linear-gradient でカスタマイズできないので、before / after 要素を使ってカスタマイズします。
グループブロック (追加 CSS クラス diagonal-cutout-before-after) の中に、背景画像を設定したカバーブロックを入れてあります。
.diagonal-cutout-before-after {
position: relative;
}
.diagonal-cutout-before-after::before {
/* 左上の切り欠き部分 */
content: "";
position: absolute;
width: 60px;
height: 60px;
background-color: #fff;
left: -30px;
top: -30px;
transform: rotate(45deg);
z-index: 2;
}
.diagonal-cutout-before-after::after {
/* 右下の切り欠き部分 */
content: "";
position: absolute;
width: 60px;
height: 60px;
background-color: #fff;
right: -30px;
bottom: -30px;
transform: rotate(45deg);
z-index: 2;
}
カバーブロック単体だと、after 要素がちょっとトリッキーな動きをしたので、念のためにグループブロックも使用してあります。
2024.1.16 追記 背景画像を設定してある場合 ②
背景画像が使われているとその要素自体は linear-gradient でカスタマイズできませんが、before 要素を使ってカスタマイズできることに気がつきました。
背景画像を設定したカバーブロックに 追加 CSS クラス diagonal-cutout-corner-white を指定して、以下の CSS でカスタマイズしました。
.diagonal-cutout-corner-white {
position: relative;
}
.diagonal-cutout-corner-white::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgb(255,255,255) 3%, transparent 3%, transparent 97%, rgb(255,255,255) 97%);
z-index: 2;
}
すぐ上の ① と比べて、ブロックの二重構造が不要になり、コードが半分くらいになりました。
2024.1.16 追記 背景画像を設定してある場合 ③
すぐ上の ② にほんの少し手を加えると、四隅をカットしたデザインになります。
背景画像を設定したカバーブロックに 追加 CSS クラス diagonal-cutout-4corner-white を指定して、以下の CSS でカスタマイズしました。
.diagonal-cutout-4corner-white {
position: relative;
}
.diagonal-cutout-4corner-white::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgb(255,255,255) 3%, transparent 3%, transparent 97%, rgb(255,255,255) 97%),linear-gradient(225deg, rgb(255,255,255) 3%, transparent 3%, transparent 97%, rgb(255,255,255) 97%);
z-index: 2;
}
角度やパーセントの値を調整して楽しめそうですね🥰
サイト運営者プロフィール
-
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。
WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。
制作業者様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。
» ご相談・お問い合わせはこちらからどうぞ
WordPress サイト制作・カスタマイズ・サポートを承ります
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。
* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。
デザイナー様・制作業者様のお手伝いも数多く行っております。難しい部分のコーディングをやってほしい、いま人手が足りない、等々... お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り(無料)を提示させていただきます。