ワードプレスのテーマ、Cocoon 2.6.9で追加されたスキン「grayish」をご存じですか？
ななふさんが制作された、これまでのCocoonのイメージとは少し違ったシンプルでスタイリッシュなデザイン。とても人気のあるスキンです！
このスキン「grayish」のページでトップページ（フロントページ）向けのブロックパターンを紹介されており、特にHTML・CSSで作る境界線スタイルはオリジナルトップページ作成のアクセントとしておすすめ。
いくつかのスタイルを抜粋して当サイトで紹介させていただきます。（ななふさんに掲載の了承をいただいています）
Cocoon以外でも使えますよ。
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- JavaScriptを勉強中
- ドメインパワー35
- ワードプレスで複数サイトを運営しています
です
HTML・CSSで作る境界線をカラムブロックと組み合わせる
さっそく冒頭で使ってみたのはお気づきでしょうか？
カラムブロックの下にHTML・CSSで作る逆三角形をつけています。
このようにカラムブロックと組み合わせると使いやすいです。
当記事で紹介している「とにかく簡単！Cocoonブロック機能でサイト型トップページを作ってみる」は、セクション枠にカラムを使用しているので、当記事の境界線を組み合わせると個性をプラスしたトップページが作れますよ。
それでは、境界線スタイルのサンプルとコードを掲載します。
トップページへの応用方法などは詳しく記載していませんので、HTMLとCSSの使い方を理解されている方向けの記事となります。
共通CSS
共通CSSはグラデーション以外のすべてのスタイルに使用するのでこちらに記載しておきます。カラーコードをお好みで指定して追加してくださいね。
.box{
width:100%;
background:#ebf1f2;/*カラーコード*/
}角度を変更する方法
以下に記載するCSSの「height:5vw;」の数字を大きくするほど、角度が急になります。
HTML・CSSで作る境界線／三角形
↑カラム上に追加用
↓カラム上に追加用
三角形／カラム上に追加用
<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;
}HTML・CSSで作る境界線／斜め（右上がりタイプ）
↑カラム上に追加用
↓カラム下に追加用
斜め（右上がりタイプ）／カラム上に追加用
<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;
}HTML・CSSで作る境界線／斜め（右下がりタイプ）
↑カラム上に追加用
↓カラム下に追加用
斜め（右下がりタイプ）／カラム上に追加用
<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;
}背景に斜めのグラデーション
以下は境界線ではありませんが、セクション内の背景として使うとアクセントが効いてオシャレです。
斜めのグラデーション背景
- CSSコピペ
- セクション枠にクラス「gradation-diagonal」追加
/* 背景に斜めのグラデーション */
.gradation-diagonal {
--g-color:#ebf1f2;
--white: #fff;
background-image: linear-gradient(-45deg, var(--g-color) 0%, var(--g-color) 60%, var(--white) 50%, var(--white) 100%);
}背景にぼかしを入れたグラデーション
背景をぼかしたスタイルも可能です。
ぼかしたグラデーション背景
- CSSコピペ
- セクション枠にクラス「gradation」追加
/* 背景にぼかしたグラデーション */
.gradation {
--g-color:#ebf1f2;
--white: #fff;
background-image: linear-gradient(-45deg, var(--g-color) 0%, var(--g-color) 50%, var(--white) 70%, var(--white) 100%);
}カラーの他に、linear-gradientの％部分の数字を変えると、ぼかしや色をつける範囲などを調整できます。いろいろ試してみてください。
ブロック下の余白消す方法
カラムの上下に境界線として要素を追加する場合、要素下に行間の余白が入るので、余白を0にするCSSを追加すると綺麗に表示されるかと思います。
/*要素下の余白を0にする*/
.entry-content>*{
margin-bottom:0!important;
}このコードはすべてのページに適用されるため、トップページにのみ反映する場合は先頭に.homeをつけるか、固定ページ下部の「カスタムCSS」をご利用ください。
まとめ／境界線を利用してオリジナルトップページに
スキン「grayish」の「フロントページ向けのブロックパターン詰め合わせ」記事から、境界線に使えそうなおすすめを抜粋して紹介させていただきました。
「grayish」は他にも豊富な情報満載なのでチェックしてみてください。
また、当サイトではテーマCocoonのサイト型トップページの作り方を紹介しています。
当記事の境界線と組み合わせると、アクセントのあるオリジナルトップページが作れますよ。
この記事は以上です。
Comment