【追加CSSのみ】WordPressテーマ『SnowMonkey』をカスタマイズしてお洒落なウェブサイトを作ろう

どうも、たっくん(@wakutakublog)です。

今回はWordPressテーマ『SnowMonkey』をカスタマイズして、お洒落なWEBサイトを作っていきます。

こちらが完成イメージ↓(クリックで拡大表示できます)

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

たっくんのアイコン画像たっくん

ぜひ一緒に作りましょう…!

※ 動画を見ながら進めたい方はこちらの「再生リスト」をご覧ください↓

※ WordPress環境をまだ用意していない方は、『 Local by Flywheel 』でWordPressローカル環境を作って初期設定をしよう を参考に環境構築をしておきましょう。

※ SnowMonkeyをまだインストールしていない方は、【無料お試し可】SnowMonkey のテーマとプラグインを導入しよう を三顧王にWordPressテーマを有効化しておきましょう。

あわせて読みたい
【無料お試し可】SnowMonkey のテーマとプラグインを導入しよう
【無料お試し可】SnowMonkey のテーマとプラグインを導入しようブロックエディタ完全対応のWordPressテーマ『Snow Monkey』をインストールする手順を解説しています。また、SnowMonkeyのプラグイン『Snow Monkey Blocks』と『Snow Monkey Editor』についても、どんな機能があるのか紹介しました。『Snow Monkey』は ホームページやウェブサイトを作るのには非常に便利ですので、せひ使ってみてください!
対象読者
  1. SnowMonkeyを使うと、どんなサイトが作れるのか知りたい
  2. 実際にSnowMonkeyでサイトを作る流れを知りたい
  3. 既存のSnowMonkeyブロックを使うだけじゃなく、少しカスタマイズしたい
目次

SnowMonkeyカスタマイズ①:ホームページを「固定ページ」に変更しよう

その前に、現段階でのホームページを見てみましょう。

画面左上にある「サイト名」をクリックすると、ホームページを見ることができます。

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

では、ホームページ設定を変更していきましょう。

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

次に、管理画面の「設定」から表示設定 → ホームページの表示を「固定ページ」に変更します。

その下にある「ホームページ」で先ほど追加した固定ページを選択しましょう。

「変更を保存」するのもお忘れなく…!

ではもう一度、ホームページを見てみましょう。

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

たっくんのアイコン画像たっくん

これでホームページの設定変更ができました!

SnowMonkeyカスタマイズ②:ヘッダーメニューの作成&フォント変更をしよう

この部分を作っていきます

管理画面の「外観」からメニューを開きましょう。

メニュー名を「ヘッダーメニュー」として、メニューを作成します。

メニューには「MISSION・NEWS・WORKS・ABOUT」の4つを置くので、それぞれの固定ページを作成しましょう。(トップページを作った時と同様に)

4つの固定ページが作れたら「メニュー項目を追加」の固定ページから4つを選択し、メニューに追加しましょう。

下にある「メニューの設定」では「グローバルナビゲーション」と「ドロワーナビゲーション」を選択します。

ここまで出来たら「メニューを保存」をクリック。

では、どのようにメニューが追加されているか確認してみましょう。

このように、サイト名の下に4つのメニューが並んでいる感じですね。

次は見本のように、サイト名とメニューが横一列になるように設定していきます。

管理画面の「外観」からカスタマイズ → デザイン → ヘッダーを開きましょう。

ヘッダーレイアウトを「1行」に変更します。

たっくんのアイコン画像たっくん

これでヘッダーメニューが完成!

最後にフォントを変更しておきましょう。

カスタマイズ → デザイン → 基本デザイン設定 から「基本フォント」を「Noto Serif JP」に変更します。

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

たっくんのアイコン画像たっくん

では次からメインとなるコンテンツを作っていきましょう…!

↑ここまでの内容はこちらの動画でも解説しています↑

SnowMonkeyカスタマイズ③:キービジュアルを作ろう

この部分を作っていきます

手順は以下の通り↓

  1. セクション(背景画像/動画)で基本デザインを作る
  2. 余白やヘッダーメニューを調整する
  3. 「左20%は背景色、右80%は背景画像」のレイアウトにする
  4. CSSで最後の調整(高さ・字の大きさ・装飾)
たっくんのアイコン画像たっくん

1つずつ順に解説していきますね…!

セクション(背景画像/動画)で基本デザインを作る

では、ホームページに設定した固定ページの編集画面を開きましょう。

右にある+マークを押して、Snow Monkey Blocks[セクション] の中から「セクション(背景画像/動画)」を選択します。

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

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

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

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

たっくんのアイコン画像たっくん

ここからは少しずつデザインを整えていきます!

余白やヘッダーメニューを調整する

次に行うのは以下の3点↓

  1. 左右の余白をなくす
  2. ヘッダーメニューとセクション間の余白をなくす
  3. ヘッダーメニューと画像が被るようにする

まずは左右の余白をなくすため、ブロックを「全幅」に変更しましょう。

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

これでメニューとセクション間の余白がなくなりましたね。

最後に カスタマイズ → デザイン → ヘッダー から「ヘッダー位置」と「PC用ヘッダー位置」をオーバーレイに変更しましょう。

これでメニューが画像と被るようになりました。

左20%は背景色、右80%は背景画像のレイアウトにする

手順は以下の通り↓

  1. CSSで画像を横幅80%&右寄せにする
  2. 背景色を青緑にする

ここからは少しずつ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点↓

  1. 高さが足りない
  2. フォントが小さい
  3. タイトルの下線がいらない
  4. 横幅がすこし広い

先ほど同様に カスタマイズ → 追加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カスタマイズ④:ニュース一覧を作ろう

↑この部分を作っていきます↑

手順は以下の通り↓

  1. 投稿を作成する(10件ほど)
  2. カラムで「タイトル」と「最近の記事一覧」を横並びにする
  3. CSSでデザインを整える(縦書き・配置など)
  4. ピックアップ記事一覧を作る
たっくんのアイコン画像たっくん

では1つずつ解説していきます…!

投稿を10件ほど作成しよう

管理画面の「投稿」から新規追加して、タイトルだけ入力して公開しておきましょう。

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

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

↑最初にこの部分を作っていきます↑

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

  1. 大きいセクションが1つ
  2. セクションの中に「2カラム割り」と「ピックアップ記事一覧ブロック」
  3. 「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カスタマイズ⑤:事業紹介セクションを作ろう

↑この部分を作っていきます↑

手順は以下の通り↓

  1. セクションに背景色をつける
  2. パネル(水平方向)を設置する
  3. 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」というクラスを書いておきます。

※パネル2つともに設定しましょう

CSSクラスを追加できたら更新して「外観 > カスタマイズ > 追加CSS 」に下のコードをコピペしましょう。

/*ワークセクション*/
.works .work-panel .smb-panels__item__figure{
	max-width: 60%;
}
たっくんのアイコン画像たっくん

これで「事業紹介セクションを作ろう」は完成です…!

↑ここまでの内容はこちらの動画でも解説しています↑

SnowMonkeyカスタマイズ⑥:アバウトセクションを作ろう

この部分を作っていきます

手順は以下の通り↓

  1. セクションと2分割カラムを用意する
  2. バナーを設置する
  3. CSSで余白を調整する
たっくんのアイコン画像たっくん

では1つずつ解説してきます…!

セクションと2分割カラムを用意する

まずはこれまで同様に「 Snow Monkey Blocks[セクション] > セクション 」を追加し、タイトルを入力します。

あわせて配置を「全幅」に変更しておきましょう。

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

すると1:1のボックスが用意されるので、ボックス作りは完成です。

バナーを設置する

ボックスができたら左側に「 Snow Monkey Blocks[共通ブロック] > 項目 」を追加します。

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

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

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

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

右側も同じようにバナーを設置していきます。

ただ1つ注意点があり、画像の高さを「左の画像の高さ÷2−2」にしましょう。(例:左が740×454px 右は740×225px

「行あたりのカラム数」を「1」にするのも忘れずに!

これで型は完成したので、もう少し細かい設定をしていきます。

バナーのタイトルの「文字サイズ」を「中」にして、さらに「太字」にしておきましょう。

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

会社概要と代表挨拶は「0.9」にしています

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

こんな感じになっていれば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カスタマイズ⑦:フッターメニューを作ろう

この部分を作っていきます

手順は以下のとおり↓

  1. セクションと4分割カラムを作る
  2. 見出しとリストでメニューを作る
  3. CSSでデザインを変える
たっくんのアイコン画像たっくん

では1つずつ解説していきます…!

セクションと4分割カラムを作る

今まで通り「 Snow Monkey Blocks[セクション] > セクション 」を追加して「全幅」に変更しましょう。

あわせて背景色は「最も明るいグレー」にしておきます。

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

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

たっくんのアイコン画像たっくん

これでカラムが4分割になりました!

見出しとリストでメニューを作る

ではカラム内にメニューを1つずつ追加していきます。

まずは「見出し」を設置しましょう。

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

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

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

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

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

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

たっくんのアイコン画像たっくん

これでOKですね…!

CSSでデザインを変える

見本デザインと違うのは以下の2点↓

  1. 見出しの下線がみにくい
  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はここに記述↓/の下に

キービジュアル

サイズの都合上90度回転させています

ここはスマホ用のみ↓

/*キービジュアル*/
	.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はここに記述↑*/
}
↑ここまでの内容はこちらの動画でも解説しています↑

この記事が気に入ったら
いいね または フォローしてね!

目次
閉じる