ベクトルパスポートを購入して無料で Evergreen をダウンロードしよう

詳しくはこちら
English

ベクトルパスポートを購入して無料で Evergreen をダウンロードしよう

詳しくはこちら
English

404ページをCSSのみでクリスマスバージョンにしてみた

久納 美幸

  1. HOME
  2. Staff Blog
  3. WordPress
  4. 404ページをCSSのみでクリスマスバージョンにしてみた

アドベントカレンダー参加中！

この記事は「Vektor WordPress Solutions Advent Calendar 2022」の12月13日の記事になります。

【この記事について】

こんにちは、スタッフの久納です。
前回の、ベクトルスタッフの丸山さんによる「WordPressのプラグインやテーマの利用者数ってどうやって調べているのかとか、裏で行われている更新情報のチェック間隔を調べてみた。」の記事は読まれましたか？実際にどんな風にカウントしているのか知らなかったので勉強になりました！そしてオフィスで動物を飼うの夢ですね〜最近はドンキの中のペットショップで心を癒しています。

さて引き続き、「 404ページをCSSのみでクリスマスバージョンにしてみた」を紹介していきたいと思います。
クリスマスも近づいてきましたので季節感を出したいなーと思い、404ページをクリスマスっぽくしてみましたので、その方法を書いていきたいと思います。

目次

完成イメージ

※ブラウザを再読み込みすると始まります（1度だけサンタが空を駆けていきます）。

完成イメージはこんな感じです。テーマによってデザインが違ってきます。（このサイトは現時点ではKatawaraテーマを使用）
1度だけサンタが空を駆けていき、背景は雪が降ります。コンテンツ下に雪っぽいウェーブの画像を入れています。

404

ページが見つかりません

下記のページをご覧いただくか、検索してみてください

トップページ
製品一覧
ニュース
会社概要

VK パターンライブラリ

パターンを404ページにコピペ

あらかじめデザインされたパターンをコピー＆ペーストできる「VK パターンライブラリ」から404ページのパターンをコピーします。
Lightning の Pro版「 Lightning G3 Pro Unit」には、404ページ書き換え機能がありますので、404ページを新規追加して、そこへペーストします。

ページが見つかりません
Lightning G3 Pro Unit の404ページ

Lightning側の設定

Lightning レイアウト設定

今回は1カラムなので、【カスタマイズ】→【Lightningレイアウト設定】→【404ページ】を「1カラム」にしてください。

追加CSSなどに以下を追加

今回は404ページのサイトコンテントの上下の余白を無しにしたいので、以下を追加します。ページヘッダーも今回は不要なので非表示にします。

/*404のサイト余白*/
.error404 .site-body{
padding:0;
}
/*404サイトのページヘッダー非表示*/
.error404 .page-header{
display:none;
}

通常の404ページでは上記のCSSが不要になりますので、通常の404に戻す時は削除かコメントアウトしてください。
もしくは通常の404ページも新規追加で準備しておき（通常版とクリスマス版の2つ用意する）、余白などを追加で調整してください。

ブロックの構成

赤い文字の部分は、今回追加したブロックや追加した内容です。参考にしてみてください。

  • グループ ←ここを全幅幅に変更してカスタムCSSを追加
    • カスタムHTML(雪用のspanタグを追加)
    • グループ
      • カスタムHTML(サンタクロース&トナカイのsvgコードを追加)
    • グループ ←グループを追加して囲み、ここにカスタムCSSを追加
      • 見出し（404のテキスト部分）
      • 区切り←削除
      • 横並び←ここにカスタムCSSを追加
        • アイコン
        • 見出し（ページが見つかりませんのテキスト部分）
        • アイコン
      • 段落
      • 横並びボタン
        • ボタン
        • ボタン
        • ボタン
        • ボタン
      • 検索 ←ここにカスタムCSSを追加
    • グループ
      • カスタムHTML(下部分の雪風ウェーブのsvgコードを追加)

画像ではなくsvgコードにした理由（深い意味はないです）

今回、コピペで貼り付けられるようにしたいなと思い、SVGコードにしました。この辺はお好みで変えてください。

クリスマスバージョンへ装飾

背景を変更

外側に 「グループブロック」がありますので今回は1カラムの想定のため「全幅」幅へ変更します。
背景色はお好きなクリスマスカラーに変えます。（今回は#193052 を入れています。お好みのクリスマスカラーに変えてください。）

見出しのiconをクリスマスiconに変更

上の「ブロックの構成」の「横並び」部分の「ページが見つかりません」の見出しは、「横並び」ブロックで「アイコン」と「見出し」ブロックを入れています。ここのアイコンをクリスマスっぽいアイコンに変えます。「横並び」の中の横並びアイテムをもう一つ追加してそこにも同じクリスマスっぽいアイコンを入れました。

「横並び」ブロックには、カスタムCSSに以下を追加します。

/*見出しサイズ*/
selector .vk_icon_font{
font-size:min(32px,6vw);
}
selector .is-style-vk-heading-plain{
font-size:min(32px,4.8vw);
}

親のグループを全幅サイズにして雪用のCSSを追加

上の「ブロックの構成」の「グループ ←ここを全幅幅に変更してカスタムCSSを追加」の部分は、全幅サイズに変更します。
雪用のCSSは「TOKYO CSS」さまの「画面に雪を降らせるアニメーション」を参考にさせていただきました！少しのhtmlタグで、CSSのbox-shadow を複数設定して、位置をずらして、落下していくアニメーションで雪が降っているように見せています。

TOKYO CSS のサイトを見る

404ページ用に調整して、グループブロックに以下のカスタムCSSを追加します。

selector {
  overflow:hidden;
  position:relative;
}
selector.has-background{
  padding-top:0;
  padding-bottom:0;
}

/* 共通 */
selector .vkp-snow{
  position: absolute; 
  top: -50px; 
  left: 0;
  border-radius: 50%; 
  background: #fff;
  opacity: 0.5;
}

/* 小雪 */
selector .vkp-snow:nth-child(1){
  width: 10px;
  height: 10px;
  box-shadow:
    5vw -40px 0 #fff,
    10vw -150px #fff,
    15vw -430px #fff,
    22vw -240px #fff,
    30vw -120px #fff,
    35vw -180px #fff,
    39vw -350px #fff,
    44vw -240px #fff,
    50vw -30px #fff,
    60vw -180px #fff,
    74vw -230px #fff,
    81vw -300px #fff,
    88vw -40px #fff,
    95vw -580px #fff;
    animation: fall 10s linear infinite backwards;
}

/* 小雪遅め */
selector .vkp-snow:nth-child(2){
  width: 12px;
  height: 12px;
  box-shadow:
    7vw -280px 0 #fff,
    22vw -120px #fff,
    42vw -180px #fff,
    68vw -540px #fff,
    70vw -44px #fff,
    93vw -190px #fff;
  animation: fall 12s linear infinite;
  animation-delay: 5s;
}


/* 中雪 */
selector .vkp-snow:nth-child(3){
  width: 14px;
  height: 14px;
  box-shadow:
    12vw -180px #fff,
    32vw -60px #fff,
    45vw -180px #fff,
    50vw -540px #fff,
    68vw -340px #fff,
    77vw -465px #fff,
    94vw -230px #fff;
  animation: fall 9s linear infinite backwards;
  animation-delay: 3s;
}

/* 大雪 */
selector .vkp-snow:nth-child(4){
  width: 20px;
  height: 20px;
  box-shadow:
  25vw -340px #fff,
  40vw -300px #fff,
  55vw -400px #fff,
  70vw -580px #fff,
  80vw -280px #fff;
  animation: fall 8s linear infinite backwards;
  animation-delay: 2s;
}

/* アニメーション */
@keyframes fall{
  0%{
    top: -50px;
  }
  100% {
    top: calc(100% + 580px); 
  }
}

box-shadowを複数設定できることは知っていたのですが、こんな使い方もできるのか！なるほどー！と思いました。
htmlのタグも少なくて済むので、ごちゃつかずにスッキリしました！

雪用のタグをカスタムHTMLに追加

上の「ブロックの構成」の「カスタムHTML(雪用のspanタグを追加)」の部分は、「カスタムHTML」ブロックを追加して、以下のタグを入れます。

<!-- 雪用のタグ -->
<span class="vkp-snow"></span>
<span class="vkp-snow"></span>
<span class="vkp-snow"></span>
<span class="vkp-snow"></span>

サンタクロースのsvgコードを追加

上の「ブロックの構成」の「カスタムHTML(サンタクロース&トナカイのsvgコードを追加)」の部分に「カスタムHTML」ブロックを追加して、以下のsvgコードを入れます。

<svg width="200" height="110" viewBox="0 0 200 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1701_3089)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M199.67 26.8134C199.341 26.264 195.824 23.7365 194.945 23.187C194.066 22.7475 190.22 23.2969 189.231 23.2969C189.451 23.0772 189.67 22.8574 189.78 22.6376C190.989 21.6486 191.978 20.9892 193.297 21.209C193.517 21.209 195.824 21.7585 196.154 22.3079C196.484 22.9673 196.264 22.9673 196.593 23.4068C196.813 23.7365 199.451 24.5057 199.451 23.9563C199.451 23.4068 199.341 22.0881 198.571 21.3189C198.132 20.8794 194.286 19.5607 193.297 19.3409C192.528 19.231 190.549 19.8903 189.121 20.4398C189.121 19.6706 189.121 18.9013 189.011 18.1321C188.462 15.275 185.604 13.0772 186.154 11.4288C186.593 9.78045 187.473 10.3299 189.121 9.12111C189.451 8.90133 189.67 8.35188 189.56 7.80243C189.78 7.69254 189.89 7.47276 189.89 7.14309C189.89 6.70353 189.56 6.37386 189.121 6.37386C188.681 6.37386 188.462 6.59364 188.352 7.0332C188.242 7.0332 188.022 7.0332 187.912 7.0332C185.604 7.14309 186.374 6.92331 184.945 6.92331C182.747 6.15408 181.429 6.37386 180.549 6.81342C180.44 6.59364 180.22 6.37386 179.89 6.15408C181.648 5.38485 183.407 3.84638 182.967 1.20902C182.967 0.879352 182.637 0.659571 182.198 0.659571C181.868 0.659571 181.648 0.989242 181.648 1.4288C181.758 2.19803 181.648 2.85737 181.319 3.40682C181.209 1.64858 179.89 0.329901 179.78 0.220011C179.56 0.000230733 179.121 0.000230733 178.901 0.220011C178.681 0.439791 178.681 0.879352 178.901 1.09913C178.901 1.09913 180.549 2.63759 179.78 4.50572C179.78 4.61561 179.78 4.61562 179.78 4.72551C179.011 5.16507 178.132 5.38485 177.802 5.49474C176.703 5.38485 175.934 5.71452 174.945 6.04419C174.506 6.15408 174.066 6.37386 173.517 6.48375C173.187 6.59364 172.967 6.59364 172.637 6.70353C171.758 6.59364 170.989 6.04419 170.44 5.16507C169.89 4.17605 169.78 3.18704 169.78 3.18704C169.78 2.85737 169.451 2.63759 169.121 2.63759C168.791 2.63759 168.571 2.96726 168.571 3.29693C168.571 3.29693 168.681 4.61561 169.451 5.71452C169.78 6.26397 170.11 6.59364 170.44 6.92331C170.33 6.92331 170.11 6.92331 170 6.92331C169.67 6.92331 169.341 7.0332 169.011 7.0332C166.374 6.15408 166.593 1.53869 166.593 1.53869C166.593 1.20902 166.374 0.879352 166.044 0.879352C165.714 0.879352 165.385 1.09913 165.385 1.4288C165.385 1.64858 165.165 5.27496 167.033 7.25298C166.374 7.25298 165.714 7.0332 165.275 6.70353C164.286 5.9343 164.176 4.61561 164.176 4.61561C164.176 4.28594 163.846 3.95627 163.517 4.06616C163.187 4.06616 162.857 4.39583 162.967 4.72551C162.967 4.8354 163.077 6.59364 164.506 7.69254C165.165 8.24199 166.154 8.57166 167.143 8.57166C167.473 8.57166 167.912 8.57166 168.352 8.46177C168.901 8.35188 169.451 8.35188 170.11 8.24199C170.879 8.1321 171.758 8.02221 172.637 7.91232C172.747 7.91232 172.857 7.91232 172.967 7.80243C173.187 7.80243 173.517 7.69254 173.736 7.58265C174.286 7.47276 174.835 7.25298 175.275 7.14309C176.044 6.81342 176.703 6.70353 177.473 6.70353C177.582 6.70353 177.582 6.70353 177.692 6.70353H177.802C177.802 6.70353 177.802 6.70353 177.912 6.70353C179.011 6.81342 179.451 7.47276 179.451 7.58265C179.341 7.69254 179.341 7.80243 179.341 7.91232C179.011 7.69254 178.681 7.47276 178.352 7.47276C178.022 7.47276 177.473 7.58265 176.923 7.80243C176.154 7.91232 175.385 8.1321 175.385 8.46177C175.385 9.01122 177.143 10.0002 177.802 10.0002C178.132 10.0002 178.571 9.89034 179.011 9.78045V10.0002C179.011 10.0002 180.549 11.7585 181.648 14.2859C181.648 14.2859 182.747 17.8024 181.209 19.4508C179.67 21.0991 171.868 20.6596 169.56 21.4288C169.341 21.5387 169.121 21.6486 168.901 21.6486L168.791 21.5387C168.681 21.6486 168.462 21.8684 168.352 21.9783C167.363 22.5277 167.143 22.7475 165.714 22.7475C163.846 22.7475 163.407 20.4398 163.077 20.6596C162.747 20.8794 161.758 23.5167 163.187 23.9563C164.615 24.3958 164.945 24.2859 164.945 24.2859C164.945 24.2859 164.615 24.6156 164.396 25.275C160.33 28.242 154.615 31.5387 147.912 35.0552C147.143 35.4947 146.374 35.8244 145.495 36.264C144.506 34.1761 142.857 32.5277 143.187 31.209C143.626 29.5607 144.506 30.1101 146.154 28.9013C146.484 28.6815 146.703 28.1321 146.593 27.5826C146.813 27.4728 146.923 27.253 146.923 26.9233C146.923 26.4837 146.593 26.1541 146.154 26.1541C145.714 26.1541 145.495 26.3739 145.385 26.8134C145.275 26.8134 145.055 26.8134 144.945 26.8134C142.637 26.9233 143.407 26.7035 141.978 26.7035C139.78 25.9343 138.462 26.1541 137.582 26.5936C137.473 26.3739 137.253 26.1541 136.923 25.9343C138.681 25.1651 140.44 23.6266 140 20.9892C140 20.6596 139.67 20.4398 139.231 20.4398C138.901 20.4398 138.681 20.7695 138.681 21.0991C138.791 21.8684 138.681 22.5277 138.352 23.0772C138.242 21.3189 136.923 20.0002 136.813 19.8903C136.593 19.6706 136.154 19.6706 135.934 19.8903C135.714 20.1101 135.714 20.5497 135.934 20.7695C135.934 20.7695 137.582 22.3079 136.813 24.1761C136.813 24.2859 136.813 24.2859 136.813 24.3958C136.044 24.8354 135.165 25.0552 134.835 25.1651C133.736 25.0552 132.967 25.3848 131.978 25.7145C131.538 25.8244 131.099 26.0442 130.549 26.1541C130.22 26.264 130 26.264 129.67 26.3739C128.791 26.264 128.022 25.7145 127.473 24.8354C126.923 23.8464 126.813 22.8574 126.813 22.8574C126.813 22.5277 126.484 22.3079 126.154 22.3079C125.824 22.3079 125.604 22.6376 125.604 22.9673C125.604 22.9673 125.714 24.2859 126.484 25.3848C126.813 25.9343 127.143 26.264 127.473 26.5936C127.363 26.5936 127.143 26.5936 127.033 26.5936C126.703 26.5936 126.374 26.7035 126.044 26.7035C123.407 25.8244 123.626 21.209 123.626 21.209C123.626 20.8794 123.407 20.5497 123.077 20.5497C122.747 20.5497 122.418 20.7695 122.418 21.0991C122.418 21.3189 122.198 24.9453 124.066 26.9233C123.407 26.9233 122.747 26.7035 122.308 26.3739C121.319 25.6046 121.209 24.2859 121.209 24.2859C121.209 23.9563 120.879 23.6266 120.549 23.7365C120.22 23.7365 119.89 24.0662 120 24.3958C120 24.5057 120.11 26.264 121.538 27.3629C122.198 27.9123 123.187 28.242 124.176 28.242C124.506 28.242 124.945 28.242 125.385 28.1321C125.934 28.0222 126.484 28.0222 127.143 27.9123C127.912 27.8024 128.791 27.6925 129.67 27.5826C129.78 27.5826 129.89 27.5826 130 27.4728C130.22 27.4728 130.549 27.3629 130.769 27.253C131.319 27.1431 131.868 26.9233 132.308 26.8134C133.077 26.4837 133.736 26.3739 134.506 26.3739C134.615 26.3739 134.615 26.3739 134.725 26.3739H134.835C134.835 26.3739 134.835 26.3739 134.945 26.3739C136.044 26.4837 136.484 27.1431 136.484 27.253C136.374 27.3629 136.374 27.4728 136.374 27.5826C136.044 27.3629 135.714 27.1431 135.385 27.1431C135.055 27.1431 134.506 27.253 133.956 27.4728C133.187 27.5826 132.418 27.8024 132.418 28.1321C132.418 28.6815 134.176 29.6706 134.835 29.6706C135.165 29.6706 135.604 29.5607 136.044 29.4508V29.6706C136.044 29.6706 137.582 31.4288 138.681 33.9563C138.681 33.9563 139.78 37.4728 138.242 39.1211C136.703 40.7695 128.901 40.3299 126.593 41.0991C124.286 41.8684 124.506 42.4178 122.637 42.4178C120.769 42.4178 120.33 40.1101 120 40.3299C119.67 40.5497 118.681 43.187 120.11 43.6266C121.539 44.0662 121.868 43.9563 121.868 43.9563C121.868 43.9563 120.879 45.0552 121.099 47.3629C118.681 48.4618 116.264 49.4508 113.736 50.5497C110 52.0881 106.264 53.6266 102.528 55.1651C102.418 54.8354 102.418 54.3958 102.528 54.0662C102.967 52.4178 103.846 52.9673 105.495 51.7585C105.824 51.5387 106.044 50.9892 105.934 50.4398C106.154 50.3299 106.264 50.1101 106.264 49.7804C106.264 49.3409 105.934 49.0112 105.495 49.0112C105.055 49.0112 104.835 49.231 104.725 49.6706C104.615 49.6706 104.396 49.6706 104.286 49.6706C101.978 49.7804 102.747 49.5607 101.319 49.5607C99.1209 48.7914 97.8022 49.0112 96.9231 49.4508C96.8132 49.231 96.5934 49.0112 96.2638 48.7914C98.022 48.0222 99.7803 46.4837 99.3407 43.8464C99.3407 43.5167 99.011 43.2969 98.5715 43.2969C98.2418 43.2969 98.022 43.6266 98.022 43.9563C98.1319 44.7255 98.022 45.3848 97.6923 45.9343C97.5825 44.1761 96.2638 42.8574 96.1539 42.7475C95.9341 42.5277 95.4945 42.5277 95.2748 42.7475C95.055 42.9673 95.055 43.4068 95.2748 43.6266C95.2748 43.6266 96.9231 45.1651 96.1539 47.0332C96.1539 47.1431 96.1539 47.1431 96.1539 47.253C95.3847 47.6925 94.5055 47.9123 94.1759 48.0222C93.077 47.9123 92.3077 48.242 91.3187 48.5717C90.8792 48.6815 90.4396 48.9013 89.8902 49.0112C89.5605 49.1211 89.3407 49.1211 89.011 49.231C88.1319 49.1211 87.3627 48.5717 86.8132 47.6925C86.2638 46.7035 86.1539 45.7145 86.1539 45.7145C86.1539 45.3848 85.8242 45.1651 85.4945 45.1651C85.1649 45.1651 84.9451 45.4947 84.9451 45.8244C84.9451 45.8244 85.055 47.1431 85.8242 48.242C86.1539 48.7914 86.4836 49.1211 86.8132 49.4508C86.7033 49.4508 86.4836 49.4508 86.3737 49.4508C86.044 49.4508 85.7143 49.5607 85.3846 49.5607C82.7473 48.6815 82.9671 44.0662 82.9671 44.0662C82.9671 43.7365 82.7473 43.4068 82.4176 43.4068C82.0879 43.4068 81.7583 43.6266 81.7583 43.9563C81.7583 44.1761 81.5385 47.8024 83.4066 49.7804C82.7473 49.7804 82.088 49.5607 81.6484 49.231C80.6594 48.4618 80.5495 47.1431 80.5495 47.1431C80.5495 46.8134 80.2198 46.4837 79.8901 46.5936C79.5605 46.5936 79.2308 46.9233 79.3407 47.253C79.3407 47.3629 79.4506 49.1211 80.8792 50.22C81.5385 50.7695 82.5275 51.0991 83.5165 51.0991C83.8462 51.0991 84.2857 51.0991 84.7253 50.9892C85.2748 50.8794 85.8242 50.8794 86.4836 50.7695C87.2528 50.6596 88.1319 50.5497 89.011 50.4398C89.1209 50.4398 89.2308 50.4398 89.3407 50.3299C89.5605 50.3299 89.8901 50.22 90.1099 50.1101C90.6594 50.0002 91.2088 49.7804 91.6484 49.6706C92.4176 49.3409 93.077 49.231 93.8462 49.231C93.9561 49.231 93.9561 49.231 94.066 49.231H94.1759C94.1759 49.231 94.1759 49.231 94.2858 49.231C95.3847 49.3409 95.8242 50.0002 95.8242 50.1101C95.7143 50.22 95.7143 50.3299 95.7143 50.4398C95.3847 50.22 95.055 50.0002 94.7253 50.0002C94.3956 50.0002 93.8462 50.1101 93.2967 50.3299C92.5275 50.4398 91.7583 50.6596 91.7583 50.9892C91.7583 51.5387 93.5165 52.5277 94.1759 52.5277C94.5055 52.5277 94.9451 52.4178 95.3847 52.3079V52.5277C95.3847 52.5277 96.9231 54.1761 98.022 56.7035C91.9781 59.1211 85.8242 61.5387 79.8901 63.8464C79.6704 63.4068 79.5605 63.187 79.3407 63.187C79.2308 63.2969 79.011 63.6266 78.9011 64.1761C66.5934 68.9013 55.055 73.0771 45.8242 76.264C45.4945 76.0442 45.1649 76.0442 44.7253 76.0442C44.3956 76.0442 44.1759 76.0442 43.9561 76.1541C43.6264 75.9343 43.077 76.0442 42.7473 76.4837C42.5275 76.8134 42.5275 77.1431 42.5275 77.3629C42.4176 77.6925 42.3077 77.9123 42.3077 78.3519C42.3077 78.5717 42.3077 78.7914 42.4176 78.9013C42.3077 78.9013 42.1978 78.9013 42.0879 79.0112L40.3297 79.6706C40 79.1211 39.7803 78.5717 40.1099 78.0222C40.989 76.3738 40 73.7365 39.011 72.3079C38.3517 71.3189 37.033 71.4288 37.033 71.4288L35.6044 69.4508C35.9341 69.0112 36.1539 68.6815 36.2638 68.5717C37.033 67.8024 35.4945 67.0332 34.5055 66.7035C33.9561 66.4837 33.6264 66.7035 33.4066 66.9233C31.7583 66.1541 29.011 65.0552 26.9231 64.7255C23.7363 64.2859 20.6594 64.8354 20.6594 64.8354C20.6594 64.8354 20.6594 64.8354 20.5495 64.8354C20 64.8354 19.4506 66.5936 19.2308 67.9123C19.1209 67.9123 19.011 67.9123 18.9011 67.9123C18.022 67.9123 17.2528 68.6815 17.2528 69.5607C17.2528 70.4398 18.022 71.209 18.9011 71.209C19.7803 71.209 20.5495 70.4398 20.5495 69.5607C20.5495 69.231 20.4396 69.0112 20.3297 68.6815L22.5275 67.6925C23.5165 69.4508 24.7253 71.7585 25.2748 73.8464C25.1649 73.9563 25.055 74.0662 25.055 74.0662C24.9451 74.176 24.9451 74.2859 24.9451 74.5057C22.4176 74.0662 15.7143 73.187 11.7583 74.5057C10.5495 74.9453 9.34069 75.3848 8.35168 76.0442L4.72531 71.7585C4.72531 71.7585 2.96707 71.7585 2.85718 73.0771C2.74729 74.7255 1.20883 74.3958 1.09894 75.3848C0.989046 76.3738 1.31872 76.4837 1.09894 77.4728C0.989046 78.4618 -0.219745 78.7914 3.48396e-05 79.7804C0.219815 80.7695 1.20883 81.0991 1.09894 81.6486C1.09894 82.198 0.659376 83.187 1.20883 83.2969C1.5385 83.4068 3.95608 82.5277 5.82421 81.7585C5.82421 82.0881 5.82421 82.5277 5.82421 82.9673C6.26377 88.5717 6.92311 93.8464 11.2088 95.1651C11.2088 95.2749 11.2088 95.4947 11.3187 95.6046C12.5275 97.5826 15.7143 100.11 17.9121 100.769C18.7912 100.989 20.989 100.769 23.8462 100.11L24.5055 103.297C21.4286 104.176 18.2418 105.055 14.7253 105.934C13.6264 106.264 13.5165 106.264 13.4066 106.264C13.1868 106.374 11.4286 106.704 9.45059 104.616C8.79124 103.846 7.69234 103.846 6.92311 104.506C6.15388 105.165 6.15388 106.264 6.81322 107.033C9.01102 109.451 11.2088 110 12.7473 110C13.6264 110 14.1759 109.89 14.5055 109.78C14.6154 109.78 14.9451 109.671 15.6044 109.451C19.1209 108.462 29.8901 105.605 40 102.747C59.7803 97.0332 60.5495 96.0442 61.0989 95.2749C63.8462 91.6486 62.4176 86.0442 59.4506 83.7365C58.6814 83.187 57.5825 83.2969 56.9231 84.0662C56.3737 84.8354 56.4836 85.9343 57.2528 86.5936C58.4616 87.5826 59.7803 90.8793 58.2418 93.0771C57.4726 93.6266 54.1759 94.8354 47.9121 96.8134L46.7033 93.4068C49.5605 92.4178 51.5385 91.5387 51.7583 91.209C52.6374 90.0002 52.6374 86.4837 53.1869 84.8354C53.4066 84.176 54.6154 80.9892 54.6154 80.0002C54.6154 79.3409 53.8462 79.0112 53.4066 79.3409L50.4396 81.3189C49.7803 81.7585 49.4506 82.5277 49.4506 83.2969C49.4506 84.176 49.1209 85.3848 47.4726 87.0332C47.4726 87.0332 47.3627 87.0332 47.3627 87.1431C46.7033 86.1541 45.8242 84.2859 44.066 83.187C43.8462 83.0771 43.7363 82.9673 43.4066 82.7475L44.7253 81.6486C44.9451 81.4288 45.055 81.209 45.055 80.9892C46.1539 80.8793 47.033 80.1101 47.2528 79.1211C55.4945 77.0332 67.1429 73.9563 77.4726 70.9892C78.4616 70.6596 79.5605 70.4398 80.5495 70.1101C80.5495 70.4398 80.5495 70.8793 80.6594 71.209C80.4396 71.3189 80.1099 71.4288 79.8901 71.5387C78.6814 72.0881 77.6923 72.5277 77.5825 72.7475C77.2528 73.187 75.4945 75.6046 74.1759 75.9343C73.6264 76.0442 73.077 76.0442 72.7473 75.9343C72.3077 75.8244 72.1978 75.9343 71.9781 76.1541L70.4396 77.4728C70.2198 77.5826 70.3297 77.9123 70.5495 78.0222C71.6484 78.3519 74.3956 78.7914 76.2638 77.253C77.2528 76.4837 77.9121 75.7145 78.6814 75.1651C78.2418 77.9123 76.9231 78.7914 76.4836 79.3409C76.1539 79.7804 75.4945 79.7804 74.9451 79.8903C74.7253 79.8903 74.5055 80.0002 74.3956 80.22L72.9671 81.7585C72.7473 82.0881 72.9671 82.3079 73.2967 82.3079C74.3956 82.4178 75.6044 82.6376 77.2528 81.5387C78.3517 80.7694 80 77.6925 81.5385 76.4837C82.5275 75.6046 85.8242 75.8244 86.5934 75.4947C88.2418 74.8354 89.6704 74.2859 90.7693 71.9782C90.7693 71.9782 94.6154 72.198 98.5715 71.209C98.5715 71.209 100.22 71.0991 101.648 70.8793C101.758 70.8793 101.758 70.8793 101.868 70.8793C104.506 71.4288 105.714 69.4508 107.143 68.6815C108.571 67.9123 109.78 67.5826 110.989 68.1321C111.209 68.242 113.407 69.3409 113.517 70.1101C113.736 70.8793 113.407 70.7695 113.626 71.3189C113.736 71.6486 116.154 73.2969 116.374 72.6376C116.593 72.0881 116.703 70.6596 116.154 69.5607C115.824 69.0112 112.418 66.4837 111.429 65.9343C110.549 65.4947 106.703 66.0442 105.714 66.0442C105.934 65.8244 106.154 65.6046 106.264 65.3848C107.473 64.3958 108.462 63.7365 109.78 63.9563C110 63.9563 112.308 64.5057 112.637 65.0552C112.967 65.7145 112.747 65.7145 113.077 66.1541C113.297 66.4837 115.934 67.253 115.934 66.7035C115.934 66.1541 115.824 64.8354 115.055 64.0662C114.615 63.6266 110.769 62.3079 109.78 62.0881C109.011 61.9782 107.033 62.6376 105.604 63.187C105.604 62.4178 105.604 61.6486 105.495 60.8794C105.165 59.1211 103.846 57.5826 103.077 56.264C106.813 54.7255 110.549 53.187 114.286 51.6486C115.495 51.0991 116.703 50.6596 117.912 50.1101C117.253 50.8793 115.934 52.6376 114.725 52.9673C114.176 53.0772 113.626 53.0772 113.297 52.9673C112.857 52.8574 112.747 52.9673 112.528 53.187L110.989 54.5057C110.769 54.6156 110.879 54.9453 111.099 55.0552C112.198 55.3848 114.945 55.8244 116.813 54.2859C117.802 53.5167 118.462 52.7475 119.231 52.198C118.791 54.9453 117.473 55.8244 117.033 56.3739C116.703 56.8134 116.044 56.8134 115.495 56.9233C115.275 56.9233 115.055 57.0332 114.945 57.253L113.517 58.7914C113.297 59.1211 113.517 59.3409 113.846 59.3409C114.945 59.4508 116.154 59.6706 117.802 58.5717C118.901 57.8024 120.549 54.7255 122.088 53.5167C123.077 52.6376 126.374 52.8574 127.143 52.5277C128.791 51.8684 130.22 51.3189 131.319 49.0112C131.319 49.0112 135.165 49.231 139.121 48.242C139.121 48.242 140.769 48.1321 142.198 47.9123C142.308 47.9123 142.308 47.9123 142.418 47.9123C145.055 48.4618 146.264 46.4837 147.692 45.7145C149.121 44.9453 150.33 44.6156 151.538 45.1651C151.758 45.275 153.956 46.3739 154.066 47.1431C154.286 47.9123 153.956 47.8024 154.176 48.3519C154.286 48.6815 156.703 50.3299 156.923 49.6706C157.143 49.1211 157.253 47.6925 156.703 46.5936C156.374 46.0442 152.967 43.5167 151.978 42.9673C151.099 42.5277 147.253 43.0772 146.264 43.0772C146.484 42.8574 146.703 42.6376 146.813 42.4178C148.022 41.4288 149.011 40.7695 150.33 40.9892C150.549 40.9892 152.857 41.5387 153.187 42.0881C153.517 42.7475 153.297 42.7475 153.626 43.187C153.846 43.5167 156.484 44.2859 156.484 43.7365C156.484 43.187 156.374 41.8684 155.604 41.0991C155.165 40.6596 151.319 39.3409 150.33 39.1211C149.56 39.0112 147.582 39.6706 146.154 40.22C146.154 39.4508 146.154 38.6815 146.044 37.9123C146.044 37.6925 145.934 37.4728 145.824 37.253C146.593 36.8134 147.473 36.3739 148.242 36.0442C154.506 32.8574 159.89 29.6706 163.956 26.9233C163.956 27.3629 163.956 27.9123 164.066 28.4618C163.846 28.5717 163.517 28.6815 163.297 28.7914C162.088 29.3409 161.099 29.7804 160.989 30.0002C160.659 30.4398 158.901 32.8574 157.582 33.187C157.033 33.2969 156.484 33.2969 156.154 33.187C155.714 33.0772 155.604 33.187 155.385 33.4068L153.846 34.7255C153.626 34.8354 153.736 35.1651 153.956 35.275C155.055 35.6046 157.802 36.0442 159.67 34.5057C160.659 33.7365 161.319 32.9673 162.088 32.4178C161.648 35.1651 160.33 36.0442 159.89 36.5936C159.56 37.0332 158.901 37.0332 158.352 37.1431C158.132 37.1431 157.912 37.253 157.802 37.4728L156.374 39.0112C156.154 39.3409 156.374 39.5607 156.703 39.5607C157.802 39.6706 159.011 39.8903 160.659 38.7914C161.758 38.0222 163.407 34.9453 164.945 33.7365C165.934 32.8574 169.231 33.0772 170 32.7475C171.648 32.0881 173.077 31.5387 174.176 29.231C174.176 29.231 178.022 29.4508 181.978 28.4618C181.978 28.4618 183.626 28.3519 185.055 28.1321C185.165 28.1321 185.165 28.1321 185.275 28.1321C187.912 28.6815 189.121 26.7035 190.549 25.9343C191.978 25.1651 193.187 24.8354 194.396 25.3848C194.615 25.4947 196.813 26.5936 196.923 27.3629C197.143 28.1321 196.813 28.0222 197.033 28.5717C197.143 28.9013 199.56 30.5497 199.78 29.8903C200 29.3409 200.22 27.9123 199.67 26.8134ZM44.6154 94.176L45.9341 97.1431C41.0989 98.5717 34.8352 100.44 26.7033 102.638L26.1539 99.5607C31.8682 98.242 39.2308 96.0442 44.6154 94.176ZM77.2528 69.8903C67.033 72.8574 55.4945 75.9343 47.2528 78.0222C47.1429 77.9123 47.1429 77.6925 47.033 77.5826C56.044 74.3958 67.1429 70.3299 79.011 65.8244C79.011 66.264 79.2308 66.7035 79.6704 66.8134C81.0989 67.253 81.4286 67.1431 81.4286 67.1431C81.4286 67.1431 80.8792 67.6925 80.7693 68.9013C79.5605 69.231 78.4616 69.5607 77.2528 69.8903ZM97.8022 62.3079C96.2638 63.9563 88.4616 63.5167 86.1539 64.2859C83.8462 65.0552 84.066 65.6046 82.1978 65.6046C81.5385 65.6046 81.0989 65.3848 80.7693 65.0552C86.5934 62.8574 92.5275 60.5497 98.4616 58.1321C98.6814 59.3409 98.9011 61.209 97.8022 62.3079Z" fill="white"></path>
</g>
<defs>
<clipPath id="clip0_1701_3089">
<rect width="200" height="109.89" fill="white"></rect>
</clipPath>
</defs>
</svg>

親のグループブロックにはカスタムCSSを追加

/*空駆けるサンタ*/
selector{
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-direction: normal;
  animation-duration: 4s;
  width:200px;
  height:110px;
  position:absolute;
  top:10px;
  left:0;
  animation-name: santa;
}

@keyframes santa {
  0% {
    top:150px;
    left: -200px;
  }

  100% {
    top: 5px;
    left: calc(100% + 400px );
  }
}

404見出しから検索ブロックまでをグループブロックで囲みカスタムCSS追加

上の「ブロックの構成」の「グループ ←グループを追加して囲み、ここにカスタムCSSを追加」 の部分は、内側の余白を追加したいので該当の箇所をグループ化します。そしてグループブロックにカスタムCSS機能でCSSを挿入します。数値はお好みで変えてください。

/*内側上下余白*/
selector{
padding-top:6rem !important;
padding-bottom:4rem !important ;
}

雪の地面のsvgコードを追加

上の「ブロックの構成」の「カスタムHTML(下部分の雪風ウェーブのsvgコードを追加)」の部分は、グループブロックを追加してその中にカスタムHTMLブロックを入れます。

<svg preserveAspectRatio="none" width="1440" height="216" viewBox="0 0 1440 216" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 55.4402L60 50.1402C120 44.4402 240 34.4402 360 44.7402C480 55.4402 600 87.4402 720 76.7402C840 66.4402 960 12.4402 1080 2.14016C1200 -8.55984 1320 23.4402 1380 39.4402L1440 55.4402V215.44H0V55.4402Z" fill="white"></path>
</svg>

グループブロックのカスタムCSSに以下のCSSを追加します。

selector{
 line-height:0;
 padding-left:0 !important;
 padding-right:0 !important;
}
/*theme.json オフ用*/
selector .wp-block-group__inner-container{
 max-width: 100% !important;
 width: 100vw;
 padding-left:0 !important;
 padding-right:0 !important;
}
selector svg{
 max-width: 100%;
 width: 100vw;
 margin-left:0 !important;
 margin-right:0 !important;
}

以上になります。これで完成イメージの404ページができると思います。

コードエディタ

一応、コードエディタを貼っておきます。ご利用の際はエディタを「コードエディタ」にして、コピペしてください。

まとめと次回予告

いかがでしたか？わたしは（テストも兼ねて）早速自分のサイトに設置しました🎅
404ページでちょっとでも楽しい気持ちになったらいいなと思います！CSSをいろいろカスタマイズして遊んでみてください。

そういえばもうすぐクリスマスですね。うちの年長さんの息子氏はロブロックスというゲームにハマりまくっていて、サンタさんにはお金かロブロックスコイン（ロブロックスゲーム内で使えるお金）が欲しいと言っていました。時代ですねぇ。

 明日は対馬さんによる「VK パターンライブラリをもっと楽しむカスタマイズレシピ」です！レシピめっちゃ楽しみですね！！

それではまた。

この記事を書いた人

久納 美幸
デザインやCSSコーディング、フォーラム対応を担当しています。フォーラムでは「うなこ」という名前で投稿しています。

WordFes Nagoya（2013-2017）では、名古屋版わぷーを制作しました。
フルサイト編集に対応したブロックテーマ X-T9

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

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

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。

PAGE TOP

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