当サイトはエックスサーバーを利用しています お得な友達紹介特典を見る

HTML・CSSで作るオシャレな境界線スタイル/トップページ作りのアクセントにおすすめ

アイキャッチ/境界線 テーマ共通
テーマ共通
記事内に広告が含まれています
スポンサーリンク

ワードプレスのテーマ、Cocoon 2.6.9で追加されたスキン「grayish」をご存じですか?

ななふさんが制作された、これまでのCocoonのイメージとは少し違ったシンプルでスタイリッシュなデザイン。とても人気のあるスキンです!

このスキン「grayish」のページでトップページ(フロントページ)向けのブロックパターンを紹介されており、特にHTML・CSSで作る境界線スタイルはオリジナルトップページ作成のアクセントとしておすすめ。

いくつかのスタイルを抜粋して当サイトで紹介させていただきます。(ななふさんに掲載の了承をいただいています)

Cocoon以外でも使えますよ。

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー38
  • 有料記事、累計190件購入いただいています
はっちゃん
です
プロフィール

HTML・CSSで作る境界線をカラムブロックと組み合わせる

さっそく冒頭で使ってみたのはお気づきでしょうか?

カラムブロックの下にHTML・CSSで作る逆三角形をつけています。

このようにカラムブロックと組み合わせると使いやすいです。

それでは、境界線スタイルのサンプルとコードを掲載します。

トップページへの応用方法などは詳しく記載していませんので、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;
}
スポンサーリンク

背景にグラデーション

以下は境界線ではありませんが、セクション内の背景として使うとアクセントが効いてオシャレです。

背景に斜めのグラデーション

イメージ画像

斜めのグラデーション背景

  1. CSSコピペ
  2. セクション枠にクラス「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%);
}

背景にぼかしを入れたグラデーション

背景をぼかしたスタイルも可能です。

イメージ画像

ぼかしたグラデーション背景

  1. CSSコピペ
  2. セクション枠にクラス「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のサイト型トップページの作り方を紹介しています。当記事の境界線と組み合わせると、アクセントのあるオリジナルトップページが作れますよ。

この記事は以上です。

よろしければシェアお願いします
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/
Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

タイトルとURLをコピーしました