この記事では、トップページ作りの際にアクセントとして使える境界線、背景スタイルを紹介します。
スキン「grayish」のサイトに掲載されているいくつかのスタイルを抜粋しています。（製作されたななふさんに掲載の了承をいただいています）
Cocoon以外でも使えますよ。
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- 2020年1月1日ブログ開設
- ドメインパワー40
- 2023年～有料記事公開
- →累計250件（月間約20件）購入いただいています
です
【clip-path】で作るおしゃれな境界線スタイル／境界線をカラムブロックと組み合わせる
例えば、このようにカラムブロックと組み合わせると使いやすいです。カラム内にはブロックを自由に追加できるのでトップページのコンテンツ作成に最適です。
カラムブロック
当記事ではCSSのclip-pathプロパティを使用します。
clip-pathは要素や画像をクリッピングして（切り抜いて）表示させることができます。- トップページへの応用方法などは具体的には記載していませんので、HTMLとCSSの使い方を理解されている方向けの記事となります。
当サイトで紹介している「とにかく簡単！Cocoonブロック機能でサイト型トップページを作ってみる」は、セクション枠にカラムを使用しているので、当記事の境界線を組み合わせると個性をプラスしたトップページが作れますよ。
それでは、境界線スタイルのサンプルとコードを掲載します。
共通CSS
共通CSSは境界線スタイルすべてに使用するのでこちらに記載しておきます。カラーコードをお好みで変更してください。
.box{
width:100%;
background-color:#D8E4E5;/*背景色をここで指定します*/
}角度を変更する方法
以下に記載するCSSの「height:5vw;」の数字を大きくするほど、角度が急になります。
【clip-path】で作る境界線／三角形
↑カラム上に追加用
↓カラム下に追加用
三角形／カラム上に追加用
<div class="box cstm-clip-upper-kaku"></div>/* 三角形 上 */
.cstm-clip-upper-kaku {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
height: 10vw;
min-height: 5vw;
}三角形／カラム下に追加用
<div class="box cstm-clip-lower-kaku"></div>/* 三角形 下 */
.cstm-clip-lower-kaku {
clip-path: polygon(100% 0, 0 0, 50% 100%);
height: 10vw;
min-height: 5vw;
}【clip-path】で作る境界線／斜め（右上がりタイプ）
↑カラム上に追加用
↓カラム下に追加用
斜め（右上がりタイプ）／カラム上に追加用
<div class="box cstm-clip-upper-r"></div>/* 斜め（右上がりタイプ）／カラム上に追加用*/
.cstm-clip-upper-r {
clip-path: polygon(100% 0, 0 100%, 100% 100%);
height: 5vw;
min-height: 5vw;
}斜め（右上がりタイプ）／カラム下に追加用
<div class="box cstm-clip-lower-r"></div>/* 斜め（右上がりタイプ）／カラム下に追加用*/
.cstm-clip-lower-r {
clip-path: polygon(0 0, 0% 100%, 100% 0);
height: 5vw;
min-height: 5vw;
}【clip-path】で作る境界線／斜め（右下がりタイプ）
↑カラム上に追加用
↓カラム下に追加用
斜め（右下がりタイプ）／カラム上に追加用
<div class="box cstm-clip-upper"></div>/* 斜め（右下がりタイプ）／カラム上に追加用*/
.cstm-clip-upper {
clip-path: polygon(0 0, 0 100%, 100% 100%);
height: 5vw;
min-height: 5vw;
}斜め（右下がりタイプ）／カラム下に追加用
<div class="box cstm-clip-lower"></div>/* 斜め（右下がりタイプ）／カラム下に追加用*/
.cstm-clip-lower {
clip-path: polygon(100% 0, 0 0, 100% 100%);
height: 5vw;
min-height: 5vw;
}【clip-path】で作るおしゃれな背景スタイル
以下は背景スタイルです。セクション内の背景スタイルとして使うとアクセントが効いてオシャレです。
斜めの背景
斜めの背景
- CSSコピペ
- セクション枠にクラス「bg-diagonal」追加
<div class="bg-diagonal"></div>/* 斜めの背景 */
.bg-diagonal {
--bg-color:#D8E4E5;
--white: #fff;
background-image: linear-gradient(-45deg, var(--bg-color) 0%, var(--bg-color) 60%, var(--white) 50%, var(--white) 100%);
}背景にぼかしを入れたグラデーション
背景をぼかしたスタイルも可能です。
ぼかしたグラデーション背景
- CSSコピペ
- セクション枠にクラス「bg-gradation」追加
<div class="gradation"></div>/* 背景にぼかしたグラデーション */
.bg-gradation {
--bg-color:#D8E4E5;
--white: #fff;
background-image: linear-gradient(-45deg, var(--bg-color) 0%, var(--bg-color) 50%, var(--white) 70%, var(--white) 100%);
}直角の背景
直角にした背景を入れてもおしゃれですね！
直角の背景
- CSSコピペ
- セクション枠にクラス「bg-square」追加
<div class="bg-square"></div>/* 直角にした背景 */
.bg-square {
--bg-color:#D8E4E5;
--white: #fff;
background-image: linear-gradient(-90deg, var(--bg-color) 0%, var(--bg-color) 60%, var(--white) 50%, var(--white) 100%);
}カラーの他に、linear-gradientの％部分の数字を変えると、ぼかしや色をつける範囲などを調整できます。いろいろ試してみてください。
【clip-path】で画像を切り抜いてみる
以下は画像をclip-pathで任意の形に切り抜く例です。
Clippy — CSS clip-path maker で自由にレイアウトが作れるのでいろいろ試してみてください。
三角形に切り抜き-1
逆三角形に切り抜いています。
CONTENTS
<div class="clip-path-img-1"></div>/*三角形に切り取り-1*/
.clip-path-img-1{
clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
}三角形に切り抜き-2
三角形に切り抜いています。
CONTENTS
<div class="clip-path-img-2"></div>/*三角形に切り取り-2*/
.clip-path-img-2{
clip-path: polygon(100% 0, 100% 100%, 50% 85%, 0 100%, 0 0);
}斜めに切り抜き-1
右上がりに切り抜いています。
CONTENTS
<div class="clip-path-img-3"></div>/*斜めに切り取り-1*/
.clip-path-img-3{
clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
}斜めに切り抜き-2
右下がりに切り抜いています。
CONTENTS
<div class="clip-path-img-4"></div>/*斜めに切り取り-2*/
.clip-path-img-4{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}ブロック下の余白消す方法
カラムの上下に境界線として要素を追加する場合、要素下に行間の余白が入るので、余白を0にするCSSを追加すると綺麗に表示されます。
/*要素下の余白を0にする*/
.entry-content>*{
margin-bottom:0!important;
}このコードはすべてのページに適用されるため、トップページにのみ反映する場合は先頭に.homeをつけるか、固定ページ下部の「カスタムCSS」をご利用ください。
まとめ／【clip-path】で作る境界線を利用してオリジナルトップページに
スキン「grayish」の「フロントページ向けのブロックパターン詰め合わせ」記事から、境界線に使えそうなおすすめを抜粋して紹介させていただきました。「grayish」は他にも豊富な情報満載なのでチェックしてみてください。
また、当サイトではテーマCocoonのサイト型トップページの作り方を紹介しています。当記事の境界線と組み合わせると、アクセントのあるオリジナルトップページが作れますよ。
この記事は以上です。
Comment コメントはこちらへ