コピペで簡単!CSSの小技8選!現場で使えるサンプル集


  1. Staff Blog
  2. WordPress
  3. コピペで簡単!CSSの小技8選!現場で使えるサンプル集

この記事は、CSSの基本的なことは知っているけど、自分で書くのが面倒だったり、CSSのアイディアが欲しい方へ向けて、コピペで簡単に装飾できるような記事になっています。

CSSの基本的なことを知りたい方は、「できる!WordPressカスタマイズ #01 簡単なデザイン(CSS)カスタマイズ方法徹底解説」をご確認ください。

VK Blocks Proのバージョン1.46.0.0から固有のブロックに対してCSSが設定できるカスタムCSS機能がつきました。
このカスタムCSSを利用して、現場ですぐ使えそうな便利なCSSの紹介をします。
プチ解説付きになっていますので、微調整したい場合にご確認ください。

無料版もコピペでご利用いただけます

今回は無料版の方にも使ってもらえるように、この記事で紹介しているサンプルをVK Pattern Libraryに登録しました!!

Pro版用はVK Blocks Proの「カスタムCSS」機能でCSSが書いてあります。
無料版用はWordPressが用意している「カスタムHTML」ブロックにCSSが書いてあります。

Pro版・無料版、それぞれ分けて登録してありますので「サンプル」の下にある[このパターンをコピー]ボタンからVK Pattern Libraryへリンクしますので、そこからパターンをコピーしてご利用ください。

【注意】この記事で紹介しているサンプルはLightningテーマを推奨しています。他のテーマでコピペして表示が崩れる場合は、フォーラムのVK パターンライブラリからご連絡ください。(調整が難しい場合もありますのでご了承ください。)

サンプルパターンのPro版と無料版の比較

Pro版(カスタムCSS機能にCSSを書く場合)無料版(カスタムHTMLにCSSを書く場合)
特定のブロックのみにCSSを適応する場合特定のブロックのみにCSSを適応する場合、selectorで書ける特定のブロックのみにCSSを適応する場合、セレクタ名を調べたり、自分で高度な設定から追加CSSクラスを追加する必要がある
CSSを設定している場所ブロックにCSS識別表示が出る(表示/非表示切り替え可能)のと、サイドパネルのアイコンが黒に変わるのでCSSが書いてある箇所がわかりやすい表示は何も出ないので、HTMLブロックを見ながらどこのブロックにCSSを設定しているのかを調べる必要がある
編集画面上の装飾の表示編集画面にも反映される。(ただしフロントと編集画面のHTML構造が違うので、完全には再現されない)編集画面には反映されない
CSSの書きやすさコード書くライブラリなので、cssが描きやすい(予測変換など)HTMLブロックなので、自分で書く必要がある

背景をすりガラス風

カバーブロックの中にカバーブロックを入れて、白半透明背景に設定して、カスタムCSSですりガラスっぽく表現しています。
一行追加するだけなのでとても簡単にぼかしたフィルターがかけられます。(iOSっぽくておしゃれですね)
メインビジュアルで大活躍しそうです。

サンプル

コンセプトやキャッチコピー


リード文章が入ります

この部分には、自社について説明が入ります。
自社のコンセプトや理念など、大切にしていることについて説明しましょう。
お客様に一番伝えたいことを書くことをおススメします。

サンプルの作り方

カバーブロックの中にカバーブロックを配置、内側のカバーブロックに見出しや段落ブロックを入れてください。
内側のカバーブロックに以下のカスタムCSSを追記します。

ブロックの構成

  • カバー(親)
    • レスポンシブスペーサー(余白用)
    • カバー ※ここに [カスタムCSS]を追加
      • 見出し
      • 区切り
      • 段落
      • ボタン
    • レスポンシブスペーサー(余白用)

カスタムCSSの例

selector{
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
background: rgba(255,255,255,0.3); /* 白半透明 */
border-radius: 2rem; /* 角丸 */
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; /* 影 */
max-width:600px; /* 最大幅 */
margin:0 auto; /* 中央揃え */
}

カスタムCSSプチ解説

backdrop-filter: blur(5px); の一行ですりガラスっぽくなります。数値はお好みで変えてみてください。
-webkit-backdrop-filter: blur(5px); はWebKitベースのブラウザ用です、こちらも一緒にいれてください。

タイピング風(アニメーション)

Vektor,Inc.

※ブラウザを再読み込みすると始まります。

サンプル

キービジュアルなどで、こんな感じで使用できそうですね。下のテキストにもフェードインのアニメーションを入れてあります。

Vektor,Inc.


リード文章が入ります

この部分には、自社について説明が入ります。
自社のコンセプトや理念など、大切にしていることについて説明しましょう。
お客様に一番伝えたいことを書くことをおススメします。

CSSだけでタイピング風のアニメーションもつけれます。複数行はできませんので、1行でちょっと目立たせたいテキストに使えます。
※細かい設定(例えばスクロールインして再生するなど)はJavaScriptが必要になると思います。

「animation」と「keyframes」についてはこちらが詳しく載っております。

animation は CSS の一括指定プロパティで、スタイルの間のアニメーションを適用します。これは animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state の一括指定です。

MDN Web Docs さまより

@keyframes は CSS のアットルールで、アニメーションの流れに沿ったキーフレーム(または中間地点)のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。これにより、アニメーションの中間ステップをトランジションよりも詳細に制御できます。

MDN Web Docs さまより

サンプルの作り方

ブロックの構成

  • カバー(親)
    • レスポンシブスペーサー(余白用)
    • グループ ※ここにタイピング風用の [カスタムCSS]を追加
      • 段落
    • グループ ※ここにフェードイン用の [カスタムCSS]を追加
      • 区切り
      • 段落
      • 段落
      • ボタン
    • レスポンシブスペーサー(余白用)

カスタムCSSの例

/* ---タイピング風--- */
/*水平垂直中央寄せ*/
selector {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* テキスト */
selector p{
  display: inline-block;
  font-size:min(32px,6.4vw);
  line-height:1.4;
  width: 10ch;
  border-right: 3px solid currentColor;
  overflow: hidden;
  white-space: nowrap;
  /*アニメーション*/
  animation: typing 3s steps(10), blinkcursor .4s step-end infinite alternate;
}

@keyframes typing {
	0% {
		width: 0;
	}
}
/*点滅カーソル*/
@keyframes blinkcursor {
  50% {
    border-color: transparent
  }
}
/* ---フェードイン--- */
selector{
animation-name: fadein;
animation-duration: 1s; /* アニメーションの時間 */
animation-delay:3s;  /* 3秒後に開始 */
animation-fill-mode:backwards;/*最初のキーフレームの状態*/
}
@keyframes fadein{
    0%{
    opacity: 0;
    transform: translatey(20px);
    }
    100%{
    opacity: 1;
    transform: translatey(0);
    }
}

カスタムCSSプチ解説

/* —タイピング風— */

selector {
display: flex;
justify-content: center;
align-items: center;
}

↑文字を中央寄せにするためのCSSです。

font-size:min(32px,6.4vw);

↑今回は1行のみになりますので、スマホサイズで大きくなりすぎないようにfont-sizeを指定しています。
32pxを超えないように、このように書いています。横幅が400pxの時に26pxで表示されます。任意で変えてみてください。

width: 10ch;

↑ch単位は、あまり見慣れない単位ですが、半角文字のだいたいの送り幅と覚えておくと良いかなと思います。
要素にwidth: 10ch と書くと10文字入る幅が設定できます。今回は10にしています。

white-space: nowrap;

今回は複数行にはできないので、改行禁止にします。テキストが長すぎるとスマホなどのサイズで見切れる可能性があります。

animation: typing 3s steps(10),

↑@keyframes typing を10段階を3秒で変化させています。

blinkcursor .4s step-end infinite alternate;

↑@keyframes blinkcursor の点滅カーソル部分を4秒で色付き透明を infinite で繰り返し点滅させています。

/* —フェードイン— */

animation-duration

↑アニメーション1回分が終了するまでの時間

animation-delay
↑アニメーションをいつ開始するかの指定

文字の後ろの背景色が流れる

文字の後ろの背景色が流れる

※ブラウザを再読み込みすると始まります。

サンプル

3つ設置して、1つづつ時間をずらして背景色を流しています。

ここはコンセプトや

キャッチコピーが

入ります。

ENTER LEAD TEXT HERE

サンプルの作り方

ブロックの構成

  • カバー(親)
    • レスポンシブスペーサー(余白用)
    • グループ
      • 段落 ※ここに流れる背景の [カスタムCSS]を追加
    • グループ
      • 段落 ※ここに流れる背景の [カスタムCSS]を追加
    • グループ
      • 段落 ※ここに流れる背景の [カスタムCSS]を追加
    • グループ ※ここにフェードイン用の [カスタムCSS]を追加
      • 段落
      • ボタン
    • レスポンシブスペーサー(余白用)

ブロックの構成プチ解説

グループブロックの中に段落ブロックを入れて、任意のテキストを入れます。
※段落ブロックにdisplay:inline-block;を指定しているので、今回は複数行の場合にテキストの回り込みを防ぐため、グループブロックの中に段落を入れています。

カスタムCSSの例

/* ---流れる背景1番目--- */
selector{
  font-size:min(32px,6.4vw);
  position: relative;
  display:inline-block;
  padding:0 10px;
}
/* 背景 */
selector::before {
  background-color:rgba(255,255,255,1);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  z-index: -1;
 animation: bg 1s ease-out backwards;
}

@keyframes bg {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(1);
  }
  50%, 100% {
    opacity: 1;
  }
}

※流れる背景2番目と3番目のカスタムCSSは上記と同じものを書きますが、流れる時間をずらしているので、before要素のanimationの部分のみ変わってきます

/* ---流れる背景2番目--- */ 
selector::before {
 animation: bg 1s ease-out 0.5s backwards;
}
/* ---流れる背景3番目--- */ 
selector::before {
 animation: bg 1s ease-out 1s backwards;
}

カスタムCSSプチ解説

【時間に関するプロパティ】

animation-durationはアニメーション1回分が終了するまでの時間

animation-delayはアニメーションをいつ開始するかの指定

animation: bg 1s ease-out 0.5s backwards; ←↑@keyframes bg を0.5秒後に1秒で終了という意味。 ease-out で徐々に減速。

※animationを一括指定する場合に間違えやすいので要注意

正方形画像を正円にする

画像ブロックのスタイルを「角丸」にしても、画像の比率が1:1ではない正方形の画像などでは、正円にはなりません。
CSSのobject-fitプロパティでcover を指定すると正円にすることができます。

CSS追加前
CSS追加後

サンプル

カードの中にまる抜き画像は、VK Blocks Proのカードブロックでもできますが、コアのカラムブロックとCSSで似たようなものが作れます。

見出しを入れてください

サブテキストです

テキストですテキストですテキストですテキストですテキストですテキストですテキストです

見出しを入れてください

サブテキストです

テキストですテキストですテキストですテキストですテキストですテキストですテキストです

見出しを入れてください

サブテキストです

テキストですテキストですテキストですテキストですテキストですテキストですテキストです

サンプルの作り方

画像ブロックのスタイルは「角丸」にします。角丸にすると.is-style-roundedというクラス名がつきます。

ブロックの構成

  • カラム(親)※ここに [カスタムCSS]を追加
    • カラム
      • 画像 ※ブロックのスタイルは「角丸」
      • 見出し
      • 段落
      • 段落
    • カラム
      • 画像 ※ブロックのスタイルは「角丸」
      • 見出し
      • 段落
      • 段落
    • カラム
      • 画像 ※ブロックのスタイルは「角丸」
      • 見出し
      • 段落
      • 段落

カスタムCSSの例

selector .is-style-rounded img{
width: 200px;
height: 200px;
object-fit: cover;
}

カスタムCSSプチ解説

object-fit: cover;で縦横比を保持しながらボックスが埋まるように拡大縮小されます。width・heightはお好みの数字にしてください。

テキストに線を引く

text-decoration の使いみちは下線だけと思いこんでいました。最近は波線にすることもできます。
このサンプルでブログの記事を、ぜひおしゃれにデザインしてみてください。

サンプル

明日のフォトウォークは、カメラを忘れないでください。

明日のフォトウォークは、カメラを忘れないでください。

明日のフォトウォークは、カメラを忘れないでください。

明日のフォトウォークは、カメラを忘れないでください。

明日のフォトウォークは、カメラを忘れないでください。

作り方

まず段落のなかで強調したい箇所に、ハイライトで色指定します。
色指定した箇所は has-inline-color というクラスで囲まれますので、次にこのクラスを利用して、text-decoration を指定します。

カスタムCSSの例

/* 単独線 */
selector .has-inline-color {
    text-decoration: underline solid;
    text-underline-offset: 5px;
}
/* 二十線 */
selector .has-inline-color {
    text-decoration: underline double;
    text-underline-offset: 5px;
}
/* 点線 */
selector .has-inline-color {
    text-decoration: underline dotted;
    text-underline-offset: 5px;
}
/* 破線 */
selector .has-inline-color {
    text-decoration: underline dashed;
    text-underline-offset: 5px;
}
/* 波線 */
selector .has-inline-color {
    text-decoration: underline wavy;
    text-underline-offset: 5px;
}

商品のおすすめタグを左上三角で表示

商品の新着や割引を、カラムの角に表示する三角形のタグです。
メッセージ性があるとともに、デザインのアクセントにもなりますね。

サンプル

コデマリ

あたたかくなるにつれて、どんどん咲きますよ。

600円 / 2本枝

おすすめ

デルフィニウム

新入荷!ギリシア語でイルカを意味する名前だそうです。

500円 / 3本

入荷

ミモザ

春のおとづれを告げる、フワフワのお花です。

サービス価格 500円 / 1枝

SALE

作り方

ここではまずカラムで商品一覧を作成します。
次に、カラム(子)のなかにおすすめタグにしたいテキストを段落で追加し、段落には追加CSSクラスを指定しておきます。

カスタムCSSは親カラムに書きます。

ブロックの構成

  • カラム(親) ※ここに [カスタムCSS] を追加
    • カラム(子)
      • 画像
      • 段落(説明)
      • 段落(おすすめタグ) ※ [高度な設定] より [追加 CSS クラス] を追加
    • カラム(子)
    • カラム(子)

カスタムCSSの例

selector .wp-block-column {
    position: relative;
    overflow: hidden;
}

selector .vkp_tips {
    position: absolute;
    top: -6px;
    left: -28px;
    width: 83px;
    height: 40px;
    padding: 24px 0 0 0;
    color: #FFF;
    font-size: 12px;
    line-height: 1;
    font-weight: bold;
    background: #227739;
    text-align: center;
    transform: rotate(-45deg);
}

selector .vkp_tips.blue {
    background: #2207E3;
}

selector .vkp_tips.yellow {
    background: #FF9C00;
}

カスタムCSSプチ解説

  • カラム(子)は position: relative; おすすめタグがはみ出ないように overflow: hidden; とします
  • おすすめタグは position: absolute; で、カラム(子)の左上に三角形が表示されるようにします
  • おすすめタグの段落に追加するクラス名を vkp_tips (例) として、ここに vkp_tips bluevkp_tips yellow のように組み合わせで色を変えられるスタイルを用意しておくと便利です。

応用:投稿リストブロックの「画像右上分類名」を左上の三角表示

★今回はカラムブロックにつけていますが、CSSを応用すれば、VK Blocks Proの投稿リストブロックの「画像右上分類名」を左上の三角にすることもできます。
Pro版をご利用の方は、是非お試しください。(※カテゴリー名が長いとはみ出して表示が崩れますのでご注意ください。)

WordPress
ブロックスタイルはここから設定できる -WordPressのブロックエディター
WordPress
WordPress ブロックテーマとアクセシビリティ
WordPress
VKパターンライブラリのクーポン券の活用アイディア5選!VK Dynamic If Blockで期間限定・会員限定表示を設定してセールを盛り上げよう
WordPress
ベクトル 2023 イチオシのアップデートまとめ!
WordPress
Gutenbergブロックエディタから設定値をカスタムストア経由で変更する
制作・運用ノウハウ
VSCodeの拡張機能『Project Manager』で複数のプロジェクトを簡単に切り替える

ブロックの構成

  • 投稿リスト※ここに [カスタムCSS] を追加

カスタムCSSの例

/*画像右上分類名を左上三角*/
selector .vk_post_imgOuter_singleTermLabel{
  position: absolute;
  top: -6px;
  left: -28px;
  width: 83px;
  height: 42px;
  padding: 24px 0 0 0;
  font-size: 11px;
  text-align: center;
  transform: rotate(-45deg);
}

吹き出しのテーブル

最初のセルに背景色がついていて、吹き出しになっているテーブルです。
吹き出しが不要な場合は、CSSの吹き出し三角の部分を削除すると消せます。

サンプル

住所〒000-0000
名古屋市中村区名駅1丁目 〇〇ビル2F
TEL000-0000-0000
営業時間11:00-21:00 (ラストオーダー 20:30)
定休日毎月 第1水曜日
座席数15席 (4名テーブル1席 / 2名テーブル3席 / カウンター5席)
支払い方法現金
クレジットカード (Visa、Mastercard)
電子マネー (PayPay、交通系IC)
アクセス名古屋駅 (JR / 地下鉄 / 名鉄) 徒歩10分

作り方

最初のセルにだけ吹き出しのような装飾をつけています。
テーブルブロックにカスタムCSSを追加しています。

ブロックの構成

  • テーブル ※ここに [カスタムCSS] を追加

カスタムCSSの例

selector table{
  border-collapse: separate;
  border-spacing: 0 10px;
  border:none;
}

/* tdの共通背景色 */
:root {
  --td-bg-color:rgba(0,0,0,0.05);
}

selector :is(td,th) {
  border: none;
  padding: 1rem;
  background:#fff;
}

/* 最初のtd */
selector tr td:nth-of-type(1)  {
  position:relative;
  background: var(--td-bg-color);
  vertical-align: middle;
  text-align: left;
  overflow: visible;
}
/* 最初のtdに吹き出しのしっぽ */
selector tr td:nth-of-type(1):after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  border-left-color: var(--td-bg-color);
  border-width: 10px;
  margin-top: -10px;
}

カスタムCSSプチ解説

  • tableのborder-spacing: 0 10px; でテーブルの間隔を上下に空けています。
  • td:nth-of-type(1) で1つめのtdに装飾をしています。

【:root でCSS変数の定義】

CSSでも変数を定義できます。変数で定義しておけば、他の場所からもその値を取り出して、繰り返し利用できるようになります。今回はtdの背景の色と吹き出しの三角の色が共通になりますので、変数で定義しました。色を変更したい場合は--td-bg-color:rgba(0,0,0,0.05); の rgba(0,0,0,0.05) の部分を変更してください。例えば#ffff00 にすると黄色になります

続きを見るリンクに矢印を追加

最近よく見かけるおしゃれな矢印です。シンプルな矢印なので、いろいろ使えます。

サンプル

矢印リンク

続きを見る

続きを見る

Hover時に矢印が動く

続きを見る

続きを見る

作り方

リンクに矢印を追加して、続きがあるように表現します。
アンカータグの疑似要素 beforeafter を利用してスタイルを指定します。

ブロックの構成

  • 段落 ※ここに [カスタムCSS] を追加

カスタムCSSの例

/*テキストのみ*/
selector a {
  position: relative;
  display: inline-block;
  padding-right: 40px;
  text-decoration: none;
  color:currentColor;
}

selector a::before {
  width: 38px;
  bottom: 50%;
  border-bottom: solid 1px currentColor;
}

selector a::after {
  width: 10px;
  background: currentColor;
  bottom: calc(50% + 2px);
  transform: rotate(30deg);
}
/*共通*/
selector a::before,
selector a::after{
  content: '';
  position: absolute;
  display: block;
  height: 1px;
 right:0;
 transition: all .2s linear;
}
/*背景あり*/
selector a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  background-color:#eee;
  padding:10px 60px 10px 30px;
  max-width:240px;
  color:currentColor;
}

selector a::before {
  width: 38px;
  bottom: 50%;
  border-bottom: solid 1px currentColor;
}

selector a::after {
  width: 10px;
  background: currentColor;
  bottom: calc(50% + 2px);
  transform: rotate(30deg);
}

/*共通*/
selector a::before,
selector a::after{
  content: '';
  position: absolute;
  display: block;
  height: 1px;
 right:10px;
}
/*テキストのみ:Hover時に矢印が動く*/
selector a {
  position: relative;
  display: inline-block;
  padding-right: 40px;
  text-decoration: none;
  color:currentColor;
}

selector a::before {
  width: 38px;
  bottom: 50%;
  border-bottom: solid 1px currentColor;
}

selector a::after {
  width: 10px;
  background: currentColor;
  bottom: calc(50% + 2px);
  transform: rotate(30deg);
}
/*共通*/
selector a::before,
selector a::after{
  content: '';
  position: absolute;
  display: block;
  height: 1px;
  right:0;
  transition: all .2s linear;
}
/*hover時*/
selector a:hover::before,
selector a:hover::after{
  right:-5px;
}
/*背景あり:Hover時に矢印が動く*/
selector a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  background-color:#eee;
  padding:10px 60px 10px 30px;
  max-width:240px;
  color:currentColor;
}

selector a::before {
  width: 38px;
  bottom: 50%;
  border-bottom: solid 1px currentColor;
}

selector a::after {
  width: 10px;
  background: currentColor;
  bottom: calc(50% + 2px);
  transform: rotate(30deg);
}

/*共通*/
selector a::before,
selector a::after{
  content: '';
  position: absolute;
  display: block;
  height: 1px;
  right:10px;
  transition: all .2s linear;
}

/*hover時*/
selector a:hover::before,
selector a:hover::after{
  right:5px;
}

カスタムCSSプチ解説

【矢印の作り方】

  • アンカータグに、矢印を入れるぶんの右余白を追加し、position: relative; を指定します
  • アンカータグの疑似要素 before で、position: absolute; とし矢印の横線を表示します
  • アンカータグの疑似要素 after も、position: absolute; とし矢印の終点を表示します。transform: rotate(30deg);で要素を30度回転して矢印の形にしています。

【transitionプロパティ】

transition: all .2s linear; ← 全てのプロパティ(all)を0.2秒で一定に変化(linear)します。

transitionプロパティで簡単なアニメーションの変化を調整できます。animationは@keyframesの設定が必要ですが、transitionでは@keyframesの設定は必要ありません。
transitionプロパティは:hoverなどの要素が変化するためのトリガーに対して、要素を変化させることができます。

「transition」についてはこちらが詳しく載っております。

transition は CSS のプロパティで、 transition-property、 transition-duration、 transition-timing-function、 transition-delay の一括指定プロパティです。

MDN Web Docs さまより
フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。


PAGE TOP

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。