どうも、たっくん(@wakutakublog)です。
今回はWordPressテーマ『SnowMonkey』をカスタマイズして、お洒落なWEBサイトを作っていきます。
こちらが完成イメージ↓(クリックで拡大表示できます)

『Snow Monkey』はかなり使い勝手のいいWordPressテーマで「少しでも多くの人に広まるといいな…」と思ったので、知識がなくても同じサイトを作れるよう、カスタマイズに使うCSSはコピペ可能にしておきました。

ぜひ一緒に作りましょう…!
※ 動画を見ながら進めたい方はこちらの「再生リスト」をご覧ください↓
※ WordPress環境をまだ用意していない方は、『 Local by Flywheel 』でWordPressローカル環境を作って初期設定をしよう を参考に環境構築をしておきましょう。
※ SnowMonkeyをまだインストールしていない方は、【無料お試し可】SnowMonkey のテーマとプラグインを導入しよう を三顧王にWordPressテーマを有効化しておきましょう。

- SnowMonkeyを使うと、どんなサイトが作れるのか知りたい
- 実際にSnowMonkeyでサイトを作る流れを知りたい
- 既存のSnowMonkeyブロックを使うだけじゃなく、少しカスタマイズしたい
SnowMonkeyカスタマイズ①:ホームページを「固定ページ」に変更しよう
その前に、現段階でのホームページを見てみましょう。
画面左上にある「サイト名」をクリックすると、ホームページを見ることができます。

こちらが何も変更していない時のホームページです↓(最新の投稿が一覧表示される設定になっています)

では、ホームページ設定を変更していきましょう。
まず管理画面の「固定ページ」から新規追加をしてタイトルだけ書き、公開しましょう。

次に、管理画面の「設定」から表示設定 → ホームページの表示を「固定ページ」に変更します。
その下にある「ホームページ」で先ほど追加した固定ページを選択しましょう。

「変更を保存」するのもお忘れなく…!
ではもう一度、ホームページを見てみましょう。

このように、最新の記事が消えているはずです。

これでホームページの設定変更ができました!
SnowMonkeyカスタマイズ②:ヘッダーメニューの作成&フォント変更をしよう

管理画面の「外観」からメニューを開きましょう。
メニュー名を「ヘッダーメニュー」として、メニューを作成します。

メニューには「MISSION・NEWS・WORKS・ABOUT」の4つを置くので、それぞれの固定ページを作成しましょう。(トップページを作った時と同様に)
4つの固定ページが作れたら「メニュー項目を追加」の固定ページから4つを選択し、メニューに追加しましょう。
下にある「メニューの設定」では「グローバルナビゲーション」と「ドロワーナビゲーション」を選択します。

ここまで出来たら「メニューを保存」をクリック。
では、どのようにメニューが追加されているか確認してみましょう。

このように、サイト名の下に4つのメニューが並んでいる感じですね。
次は見本のように、サイト名とメニューが横一列になるように設定していきます。
管理画面の「外観」からカスタマイズ → デザイン → ヘッダーを開きましょう。
ヘッダーレイアウトを「1行」に変更します。


これでヘッダーメニューが完成!
最後にフォントを変更しておきましょう。
カスタマイズ → デザイン → 基本デザイン設定 から「基本フォント」を「Noto Serif JP」に変更します。

スタイリッシュな雰囲気のあるフォントになりましたね。

では次からメインとなるコンテンツを作っていきましょう…!
SnowMonkeyカスタマイズ③:キービジュアルを作ろう

手順は以下の通り↓
- セクション(背景画像/動画)で基本デザインを作る
- 余白やヘッダーメニューを調整する
- 「左20%は背景色、右80%は背景画像」のレイアウトにする
- CSSで最後の調整(高さ・字の大きさ・装飾)

1つずつ順に解説していきますね…!
セクション(背景画像/動画)で基本デザインを作る
では、ホームページに設定した固定ページの編集画面を開きましょう。
右にある+マークを押して、Snow Monkey Blocks[セクション] の中から「セクション(背景画像/動画)」を選択します。

「セクション(背景画像/動画)」を挿入したら、タイトルと文章を入力しましょう。

次に、画面右側の メディア → アップロード から画像を設置します。

ではこの時点で一度、ホームページを確認してみましょう。

ここまで手順通りに行えていれば、このように表示されるはずです。

ここからは少しずつデザインを整えていきます!
余白やヘッダーメニューを調整する
次に行うのは以下の3点↓
- 左右の余白をなくす
- ヘッダーメニューとセクション間の余白をなくす
- ヘッダーメニューと画像が被るようにする
まずは左右の余白をなくすため、ブロックを「全幅」に変更しましょう。

次に、管理画面の「外観」から カスタマイズ → ホームページ設定 で「ホームページのコンテンツエリアに上下余白を追加する」のチェックを外しましょう。

これでメニューとセクション間の余白がなくなりましたね。
最後に カスタマイズ → デザイン → ヘッダー から「ヘッダー位置」と「PC用ヘッダー位置」をオーバーレイに変更しましょう。

これでメニューが画像と被るようになりました。
左20%は背景色、右80%は背景画像のレイアウトにする
手順は以下の通り↓
- CSSで画像を横幅80%&右寄せにする
- 背景色を青緑にする
ここからは少しずつCSSを追加していくので、その前に準備をしておきましょう。
セクションブロックを選択し、画面右の「高度な設定」から追加CSSクラスに「kv」(キービジュアルの略)を追加します。

これで、CSSを追加するための準備はOKです。
では早速、CSSを追加していきましょう。
管理画面の「外観」から カスタマイズ → 追加CSS を開いて下のCSSをコピペしてください。
.kv .smb-section-with-bgimage__bgimage{
width: 80%; /*画像の幅を80%に*/
margin:0 0 0 auto; /*画像を右寄せ*/
}

これで 背景色:背景画像=2:8になりました。
次に背景色を黒から青緑に変えていきます。
先程のコピペしたコードの下に以下のコードを追加すればOKです↓
.kv{
background-color: #29b7ae;
}

徐々に完成に近づいてきましたね…!
CSSで最後の調整(高さ・字の大きさ・装飾)
まだ見本デザインと異なるのは以下の3点↓
- 高さが足りない
- フォントが小さい
- タイトルの下線がいらない
- 横幅がすこし広い
先ほど同様に カスタマイズ → 追加CSS に以下のコードをコピペしましょう。
.kv{
height:100vh; /*高さを画面一杯に*/
}
.kv .smb-section__title{
font-size:90px; /*タイトルを大きく*/
line-height:1; /*行間を狭く*/
}
.kv .smb-section__title::after{
display:none; /*タイトルの下線を消す*/
}
.kv p{
font-size: 24px; /*テキストを大きく*/
}

では、実際のホームページを確認してみます。

このようになっていればOKです!
ほぼ完成しましたが、少し横幅が広いので狭めていきましょう。
カスタマイズ → デザイン → 基本デザイン設定 から「コンテンツの最大幅」を「1180」に変更します。

ではもう一度、ホームページを確認してみます。

背景画像などはそのまま、中身(メニューやテキスト)の幅だけが狭くなりました。

これで「キービジュアルを作ろう」は完成です…!
最後にキービジュアルの作成に使ったCSSをまとめておきます。
/* キービジュアル */
.kv{
height:100vh; /*高さを画面一杯に*/
}
.kv .smb-section-with-bgimage__bgimage{
width: 80%; /*画像の幅を80%に*/
margin:0 0 0 auto; /*画像を右寄せ*/
}
.kv .smb-section__title{
font-size:90px; /*タイトルを大きく*/
line-height:1; /*行間を狭く*/
}
.smb-section__title::after{
display:none; /*タイトルの下線を消す*/
}
.kv p{
font-size: 24px; /*テキストを大きく*/
}
SnowMonkeyカスタマイズ④:ニュース一覧を作ろう

手順は以下の通り↓
- 投稿を作成する(10件ほど)
- カラムで「タイトル」と「最近の記事一覧」を横並びにする
- CSSでデザインを整える(縦書き・配置など)
- ピックアップ記事一覧を作る

では1つずつ解説していきます…!
投稿を10件ほど作成しよう
管理画面の「投稿」から新規追加して、タイトルだけ入力して公開しておきましょう。

8〜 10件ほど投稿しておきます。

カラムを使って「タイトル」と「記事一覧」を横並びにする

その前に、パーツ構成を理解しておきましょう。(下の画像が図解イメージ↓)

- 大きいセクションが1つ
- セクションの中に「2カラム割り」と「ピックアップ記事一覧ブロック」
- 「2カラム割り」の中に「見出し」と「最近の記事一覧」
では作っていきましょう。
まず「 Snow Monkey Blocks > セクション」を選択します。

タイトルは入力せず、+マークから「レイアウト要素 > カラム」 を選択しましょう。

カラムを追加すると、5つのパターンが用意されているので「2カラム:1/3, 2/3に分類」を押します。

すると左右1:2のレイアウトが作られるので、左側に「一般ブロック > 見出し」を追加しましょう。

見出しには「NEWS RELEASE」と入れておきます。

次に右側です。ここには「Snow Monkey Blocks[共通ブロック] > 最近の投稿」を入れます。

すると自動で「最近の投稿」が6件追加されるはずです。
初期状態ではレイアウトが「リッチメディア」で投稿数が「6」になっているので、「テキスト」と「5」に変更しておきましょう。

これで基本となる型は完成です。
この時点でのホームページを確認しておきましょう。

こうなっていればOKです。
CSSを書いてく前に、もう少し見本に近づけていきましょう。
左のカラムを選択し、画面右の カラム設定 > パーセント指定幅を「5」にします。

右のカラムは「85」にしましょう。

では、ホームページを確認してみます。


少し見本に近づきましたね
CSSでデザインを整える(縦書き・配置など)
ここからCSSを書いていくので、キービジュアル作成時と同じように準備をしておきましょう。
セクション全体を選択し、高度な設定 > 追加CSSクラス に「news」を追加します。

左側のカラムには「section-title-wrap」と入れておきます。

左側のカラムの中の「見出し」には「section-title」を追加。

右側のカラムには「news-wrap」と入れておきましょう。

これで準備はOKです。
ではCSSを追加していきます。
「 外観 > カスタマイズ > 追加CSS 」に下のコードをコピペしましょう。
/*ニュースセクション*/
.news .section-title-wrap .section-title {
/*見出しを縦書きに*/
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
/*見出しのデザインを初期化*/
background-color: initial;
border: none;
/*字を大きく*/
font-size: 28px;
}
.news .news-wrap {
/*右側のカラムを右寄せ*/
margin: 0 0 0 auto;
}
ホームページを確認してみます。


これで見本と同じデザインになりました…!
ピックアップ記事一覧を作る

まずは、ピックアップ記事に設定したい投稿に「特定のカテゴリー」と「アイキャッチ画像」を設定しましょう。



カテゴリーとアイキャッチ画像を3つの記事に設定したら準備OKです。
ではトップページの編集画面に戻り、セクション内の+マークで「 Snow Monkey Blocks[共通ブロック] > 任意のタクソノミーの投稿 」を選択しましょう。

「任意のタクソノミーの投稿」を追加したら、右側のブロック設定からカテゴリーを選択し、投稿数を設定します。

これでトップページを確認してみます。


これで「ニュース一覧を作ろう」は完成です…!
SnowMonkeyカスタマイズ⑤:事業紹介セクションを作ろう

手順は以下の通り↓
- セクションに背景色をつける
- パネル(水平方向)を設置する
- CSSで画像サイズを60%に変更する

では1つずつ解説していきます…!
セクションに背景色を付ける
まずは「 Snow Monkey Blocks[セクション] > セクション 」を追加しましょう。

タイトルに「WORKS」と入力し、配置を「全幅」に変更します。

次に背景色を変更していきます。画面右の「 色設定 > 背景色 > カスタムカラー 」に「#d9f5f3」を入れましょう。

最後に右側20%は背景色をつけないように「 ブロック設定 > 背景位置(左/右)」を「-20」に変更します。


これで大枠のセクションが完成です!
パネル(水平方向)を設置する
次にセクションの中身を作っていきます。
まずは「 Snow Monkey Blocks[共通ブロック] > パネル 」を追加しましょう。

すると「上に画像・下にテキスト」のパネルが設置されます。

ただ今回は、画像とテキストを左右に並べたいので「項目(水平方向)」に変換しましょう。

水平方向になったら、画像とタイトル・テキストを入れていきます。

もう一つパネルを設置したいので、下の+マークから追加します。

2つ目のパネルにも画像とタイトル・テキストを入れましょう。

そして今回は1列に1パネルのレイアウトにしたいので「行あたりのカラム数」を「1」に変更します。

そして2つ目のパネルは、画像とテキストの配置を入れ替えたいので「 ブロック設定 > 画像位置 」を「左側」に変更しましょう

タイトルの大きさを変えるため、タイトルを選択し「Snow Monkey Editor コントロール > 文字サイズ 」を「中」に変更しましょう。

テキストは太字にしたいので、テキストを選択した状態で「B」をクリックします。

また、パネルから別ページへ移動できるようにしたい場合は「パネルを選択 → リンク → URLを入力 」の順に設定していきましょう。


これでパネルの設置ができました…!
CSSで画像サイズを60%に変更する
初期状態のパネル(水平方向)は、画像とテキストが1:1の比率になっています。
今回は「 画像:テキスト=6:4」にしたいので、CSSを使って比率を調整していきましょう。
まずは今までと同様にCSSを追加するための準備として、セクション全体に「works」、パネル個別に「work-panel」というクラスを書いておきます。


CSSクラスを追加できたら更新して「外観 > カスタマイズ > 追加CSS 」に下のコードをコピペしましょう。
/*ワークセクション*/
.works .work-panel .smb-panels__item__figure{
max-width: 60%;
}


これで「事業紹介セクションを作ろう」は完成です…!
SnowMonkeyカスタマイズ⑥:アバウトセクションを作ろう

手順は以下の通り↓
- セクションと2分割カラムを用意する
- バナーを設置する
- CSSで余白を調整する

では1つずつ解説してきます…!
セクションと2分割カラムを用意する
まずはこれまで同様に「 Snow Monkey Blocks[セクション] > セクション 」を追加し、タイトルを入力します。
あわせて配置を「全幅」に変更しておきましょう。

次は「 レイアウト要素 > カラム 」を追加し「2カラム:均等割 」を選択します。

すると1:1のボックスが用意されるので、ボックス作りは完成です。
バナーを設置する
ボックスができたら左側に「 Snow Monkey Blocks[共通ブロック] > 項目 」を追加します。

すると「上に画像、下にテキスト」の項目が設置されます。

ただ今回は、画像とテキストを重ねたいので「バナー」に変換しましょう。

バナーに変換したら、画像とタイトルを入力しておきます。

バナーを左カラムの全幅に広げたいので「行あたりのカラム数」を「1」に変更しておきましょう。

右側も同じようにバナーを設置していきます。
ただ1つ注意点があり、画像の高さを「左の画像の高さ÷2−2」にしましょう。(例:左が740×454px 右は740×225px)

これで型は完成したので、もう少し細かい設定をしていきます。
バナーのタイトルの「文字サイズ」を「中」にして、さらに「太字」にしておきましょう。

まだ文字が見にくい(特に右上)のでバナーを選択した状態で「背景マスクの透明度」を「0.7」にします。

では一度プレビューしてみます。

こんな感じになっていればOKです。
CSSで余白を調整する
ここからはCSSを追加していくので、準備をしていきます。
セクション全体に「about」、右上のバナーに「about-right-top」というクラスを追加しましょう。


CSSクラスが追加できたら更新して「 外観 > カスタマイズ > 追加CSS 」に下のコードをコピペしましょう。
/* アバウトセクション */
.about .c-container{
/*画面いっぱいに広げる*/
padding:0;
max-width:1480px;
}
.about .wp-block-snow-monkey-blocks-items--banner{
/*バナーの余白を削除*/
padding:0;
margin:0;
}
.about .about-right-top{
/*右上のバナーに下の余白*/
margin-bottom:4px;
}


これで「アバウトセクション」の完成です…!
SnowMonkeyカスタマイズ⑦:フッターメニューを作ろう

手順は以下のとおり↓
- セクションと4分割カラムを作る
- 見出しとリストでメニューを作る
- CSSでデザインを変える

では1つずつ解説していきます…!
セクションと4分割カラムを作る
今まで通り「 Snow Monkey Blocks[セクション] > セクション 」を追加して「全幅」に変更しましょう。
あわせて背景色は「最も明るいグレー」にしておきます。

「レイアウト要素 > カラム」を追加し「2カラム:均等割」を選択します。

カラム全体を選んで「カラム数」を「4」に変えましょう。


これでカラムが4分割になりました!
見出しとリストでメニューを作る
ではカラム内にメニューを1つずつ追加していきます。
まずは「見出し」を設置しましょう。

デフォルトの見出しは「H2」になってるので「H3」に変更します。

タイトルを入力して「文字サイズ」を「標準」に変えましょう。

見出しが作れたら「一般ブロック > リスト」を追加しましょう。

では「リスト」にテキストを入力していきます。

メニューをリンクにしたい場合は、テキストを選択した状態で「リンク」を押してURLを設定します。

では同じように他3カラムのメニューも完成させましょう。


これでOKですね…!
CSSでデザインを変える
見本デザインと違うのは以下の2点↓
- 見出しの下線がみにくい
- リストの・が不要
CSSを追加して修正していくので、セクション全体の追加CSSクラスに「footer」と入れておきましょう。

「外観 > カスタマイズ > 追加CSSクラス」に下のコードをコピペします。
/* フッターメニュー */
.footer h3{
border-color: #333; /*下線の色を変更*/
}
.footer ul{
margin:0; /*・があった分の余白を削除*/
}
.footer ul li{
line-height:2.5; /*行間を広く*/
list-style:none; /*メニューの・を削除*/
}


これでフッターメニューも完成です!
SnowMonkeyカスタマイズ⑧:レスポンシブ対応(スマホ対応)しよう
ここまででPC版のホームページは完成しましたが、スマホで見るとまだ微妙に整っていません。

ここからは、デバイスごとにCSSを追加していきます!
メディアクエリを用意しておく
まずはスマホ用とタブレット用の「メディアクエリ 」を用意して置きましょう。
下のコードを「 外観 > カスタマイズ > 追加CSS 」にコピペでOKです。
@media screen and (max-width:999px){
/*↓タブレット用CSSはここに記述↓*/
/*↑タブレット用CSSはここに記述↑*/
}
@media screen and (max-width:639px){
/*↓事業紹介はここに記述↓*/
/*↑事業紹介はここに記述↑*/
}
@media screen and (max-width:599px){
/*↓スマホ用CSSはここに記述↓*/
/*↑スマホ用CSSはここに記述↑*/
}
ここからCSSを追加していきますが、スマホ用と書かれたものは/↓スマホ用CSSはここに記述↓/の下に貼り付けてください。(タブレット用は/↓タブレット用CSSはここに記述↓/の下に)
キービジュアル


ここはスマホ用のみ↓
/*キービジュアル*/
.kv .smb-section-with-bgimage__bgimage{
/*背景画像を全幅に*/
width:100%;
}
.kv .smb-section__title{
font-size: 18vw; /*タイトル小さく*/
border-bottom: 10px solid #29B6AF; /*タイトルに下線*/
padding-bottom: 7px; /*タイトル下に余白*/
}
.kv p{
font-size:initial; /*テキスト小さく*/
}
ニュース一覧


CSSを追加する前に「追加CSSクラス」を用意しておきましょう。
「任意のタクソノミーの投稿」全体を選んだ状態で「pickup-news-wrap」としておきます。

タブレット用がこちら↓
/*ニュースセクション*/
.news .section-title-wrap{
/*縦書きタイトルを横幅5%で固定*/
-ms-flex-preferred-size: 5% !important;
flex-basis: 5% !important;
}
.news-wrap{
/*ニュースを横幅85%で固定*/
flex-basis: 85% !important;
-ms-flex-preferred-size: 85% !important;
flex-grow: initial;
-webkit-box-flex: initial;
-ms-flex-positive: initial;
}
.pickup-news-wrap .c-entries__item{
/*ピックアップ記事を横一列に*/
-ms-flex-preferred-size: calc(100% / 3);
flex-basis: calc(100% / 3);
max-width: calc(100% / 3);
}
スマホ用がこちら↓
/*ニュースセクション*/
.news .section-title-wrap{
/*タイトルを少し左に移動*/
transform: translate(-10px, 0);
-webkit-transform: translate(-10px, 0);
}
.news .section-title-wrap .section-title{
/*タイトル小さく*/
font-size: 22px;
}
.pickup-news-wrap .c-entries__item{
/*ピックアップ記事を縦一列に*/
flex-basis: 100%;
-ms-flex-preferred-size: 100%;
max-width: 100%;
}
事業紹介セクション


ここは/↓事業紹介はここに記述↓/の下に追加しましょう↓
/*ワークセクション*/
.works .smb-section__background{
/*背景色を全幅に*/
right: 0 !important;
}
.works .work-panel .smb-panels__item__figure{
/*パネル画像を全幅に*/
max-width: 100%;
}
.work-panel .smb-panels__item__body{
/*パネル画像を上に*/
order:2;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
}
アバウトセクション


タブレット用がこちら↓
/*アバウトセクション*/
.about .about-right-top{
/*右パネル間の余白を狭く*/
margin-bottom:2px;
}
スマホ用がこちら↓
/*アバウトセクション*/
.about .about-right-top{
/*採用情報の下の余白削除*/
margin-bottom: 0;
}
フッターメニュー


タブレット用がこちら↓
/*フッターメニュー*/
.footer .wp-block-column:not(:last-child):not(:nth-last-child(2)){
/*カラムの間に余白をつける*/
margin-bottom:50px;
}
スマホ用がこちら↓
/*フッターメニュー*/
.footer .wp-block-column:not(:last-child){
/*カラムの間に余白をつける*/
margin-bottom:50px;
}
レスポンシブCSSまとめ
最後にレスポンシブ化に使ったCSSをまとめておきます。
タブレット用がこちら↓
@media screen and (max-width:999px){
/*↓タブレット用CSSはここに記述↓*/
/*ニュースセクション*/
.news .section-title-wrap{
/*縦書きタイトルを横幅5%で固定*/
-ms-flex-preferred-size: 5% !important;
flex-basis: 5% !important;
}
.news-wrap{
/*ニュースを横幅85%で固定*/
flex-basis: 85% !important;
-ms-flex-preferred-size: 85% !important;
flex-grow: initial;
-webkit-box-flex: initial;
-ms-flex-positive: initial;
}
.pickup-news-wrap .c-entries__item{
/*ピックアップ記事を横一列に*/
-ms-flex-preferred-size: calc(100% / 3);
flex-basis: calc(100% / 3);
max-width: calc(100% / 3);
}
/*アバウトセクション*/
.about .about-right-top{
/*右パネル間の余白を狭く*/
margin-bottom:2px;
}
/*フッターメニュー*/
.footer .wp-block-column:not(:last-child):not(:nth-last-child(2)){
/*カラムの間に余白をつける*/
margin-bottom:50px;
}
/*↑タブレット用CSSはここに記述↑*/
}
事業紹介セクションがこちら↓
@media screen and (max-width:639px){
/*↓事業紹介はここに記述↓*/
/*ワークセクション*/
.works .smb-section__background{
/*背景色を全幅に*/
right: 0 !important;
}
.works .work-panel .smb-panels__item__figure{
/*パネル画像を全幅に*/
max-width: 100%;
}
.work-panel .smb-panels__item__body{
/*パネル画像を上に*/
order:2;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
}
/*↑事業紹介はここに記述↑*/
}
スマホ用がこちら↓
@media screen and (max-width:599px){
/*↓スマホ用CSSはここに記述↓*/
/*キービジュアル*/
.kv .smb-section-with-bgimage__bgimage{
/*背景画像を全幅に*/
width:100%;
}
.kv .smb-section__title{
font-size: 18vw; /*タイトル小さく*/
border-bottom: 10px solid #29B6AF; /*タイトルに下線*/
padding-bottom: 7px; /*タイトル下に余白*/
}
.kv p{
font-size:initial; /*テキスト小さく*/
}
/*ニュースセクション*/
.news .section-title-wrap{
/*タイトルを少し左に移動*/
transform: translate(-10px, 0);
-webkit-transform: translate(-10px, 0);
}
.news .section-title-wrap .section-title{
/*タイトル小さく*/
font-size: 22px;
}
.pickup-news-wrap .c-entries__item{
/*ピックアップ記事を縦一列に*/
flex-basis: 100%;
-ms-flex-preferred-size: 100%;
max-width: 100%;
}
/*アバウトセクション*/
.about .about-right-top{
/*採用情報の下の余白削除*/
margin-bottom: 0;
}
/*フッターメニュー*/
.footer .wp-block-column:not(:last-child){
/*カラムの間に余白をつける*/
margin-bottom:50px;
}
/*↑スマホ用CSSはここに記述↑*/
}