【はじめての Snow Monkey】動画用デモサイト全解説！

↓動画を見る↓

【予習不要！】はじめてのSnow Monkey 〜ゼロからサイトをつくろう〜

↑こちらの動画でつくったデモサイトの作り方をすべて解説します！

2021/10/12追記）フッターのウィジェットがブロックエディタ形式になったので、対応方法を追記しました。→フッターエリア（ウィジェット）

この動画で学べること

　✔️ Snow Monkeyテーマを使用したサイトの制作
　✔️ WordPressブロックエディタの基本的な使い方
　✔️ WordPressテーマの簡単な追加CSS

この動画は「【初心者さん向け】Snow Monkey 基礎マスターロードマップ」の
２）Snow Monkey を動画で学習＞ ①Snow Monkey 初心者向け動画講座 ←ココ！！
の動画です。

この動画で作っているWebサイトは、ベイジ社のこのワイヤーフレームを参考に、独学応援サロンのゆうきさん（ゆうき@ママwebデザイナー）にデザインを依頼し制作しました。
架空のオンライン英会話教室「yuppar English」のデモサイトです！！！

yuppar English_demo

お家にいながら格安留学！Snow Monkeyを使用したデモサイトです。

※細かい設定の方法は動画をご覧ください。
※今回は「HOME」「お知らせ」「お問い合わせ」のページを作ります。
※動画撮影時のSnow Monkey は「Version: 14.0.2」です。
　（購入時のバージョンのまま撮影。改良され続けているので皆さんはアップデートして制作してください！）

制作前の準備

WordPressでサイトを構築する環境を準備する

【ローカル環境でサイト構築】
無料のツールlocal by flywheelをインストールし、ローカル環境でWordPressサイトを制作します。

▶︎たにぐちまことさんのLocal解説動画
▶︎LocalbyFlywheelの使い方

【レンタルサーバーでサイト構築】
エックスフリー
無料なのに高機能。十分WordPressサイトを構築できます。
こちらで制作しておいて、実際の仕事になった時↓のエックスサーバーに移行するとスムーズです。

エックスサーバー
Web制作界で多くの方が使用している有名レンタルサーバー。私もこちらです。
わかりやすい手順書やトラブル解決法がたくさんネット上にあります。
ドメイン永久無料、初期費用０円のキャンペーンを実施中。

ロリポップ！
とにかく低コストで抑えたい方にはこちら。
おすすめのハイスピードプランは月額５５０円〜という安さ。
クライアントへ提案するサーバーのリストにも入れておいていいかもしれません。
（たにぐちまことさんも動画でオススメされていました！）

使用するテーマ「Snow Monkey」を購入 or 試用版を入手

WordPressテーマ「Snow Monkey 」¥16,500 / 年で、試用版もあります。
購入前の方は試用版を申請して入手してください。
購入や試用版について詳しくはコチラ。

ロゴ・画像データ

デモサイトで使用したロゴ・画像です。

▶︎こちらからダウンロードしてください。

ご自分で準備されたものでもOKです。

サイト制作

Snow Monkey テーマとプラグインのインストール

WordPressの最初の設定（言語や時間等）後、テーマとプラグインをインストールします。

【Snow Monkeyテーマ】
購入か試用版申請で入手したSnow MonkeyテーマをZipファイルのままインストールし、「有効化」します。

【プラグイン】
・Snow Monkey Blocks
・Snow Monkey Editor
・Snow Monkey Forms（お問い合わせページ用）
・All-in-One WP Migration（Localで作成後Web上にUP用）
・Really Simple SSL（公開後の常時SSL化用）
これらのプラグインをインストールし、「有効化」します。

▶︎完成後の作業はこちらをご覧ください！
【WordPress案件】テーマ作成〜納品完全フロー！

ロゴ・画像をアップロード

ダウンロードしたロゴと画像を「メディア」にアップロードします。

ロゴ・メインカラー・基本デザイン等の設定

サイト基本情報

［外観］ > ［カスタマイズ］>［サイト基本情報］

「ロゴ」、「サイトのタイトル」、「キャッチフレーズ」、「コピーライト（試用版は変更不可」、「サイトアイコン」を設定する。

【内容】
サイトのタイトル：yuppar English
キャッチフレーズ：お家にいながら格安留学！Snow Monkeyを使用したデモサイトです。
コピーライト：© yupper English. All Rights Reserved.

メニュー

［外観］ > ［カスタマイズ］>［メニュー］

メニュー名設定、メニュー項目を追加する。
HOME、特徴、事例、セミナー／イベント、お知らせ、お問い合わせ

メニューの位置：
グローバルナビゲーション（PC用） (現在: MENU)
ドロワーナビゲーション（モバイル用） (現在: MENU)

【ポイント】
「お問い合わせ」を強調する。
［外観］ > ［メニュー］
「メニュー構造」の「お問い合わせ」を開き「このメニュー項目を強調する。」にチェックを入れる。

ホームページ設定

［外観］ > ［カスタマイズ］>［ホームページ設定］

ホームページの表示：固定ページ

ホームページ：HOME

デザイン

［外観］ > ［カスタマイズ］>［デザイン］

【基本デザイン設定】
アクセントカラー：#ffda17
サブアクセントカラー：#e7acb9
モバイル端末時のカスタムロゴの拡大率：50%
PC 時のカスタムロゴの拡大率：80%
コンテンツの最大幅：1600px
パンくずリストの表示位置：コンテンツの上
記事一覧レイアウト：リッチメディア
モバイル端末時に記事一覧を1列にする：チェック

【ヘッダー】
ヘッダーレイアウト：中央ロゴ
モバイル用ヘッダー位置：上部固定
PC 用ヘッダー位置：ノーマル
ヘッダーコンテンツ：ヘッダー右上のボタンと電話番号の部分の設定

<div class="header-info">
<div class="header-info_left">
<i class="fas fa-phone-alt"></i> <b>0000-000-0000</b><br>平日00:00〜00:00</div>
<div class="header-info_right">
<a href=# class="c-btn" target="_blank" rel="#">
<b>無料体験を申し込む</b></a></div>
</div>

【追加CSS】

/*ヘッダーコンテンツ*/
.header-info {
	font-size: 0.9rem;
	display: flex;
}

.header-info_left {
	text-align: right !important;
	line-height: 1.4rem;
	padding-top: 0.34rem;
}

/*ヘッダーボタン*/
a.c-btn {
	padding: 0.7rem ;
	margin: 0.3rem 0.5rem ;
	box-shadow: 2px 4px 4px lightgray;
}

【SEO】
OGPを設定する

↓↓ここから実際のWebページをつくります。↓↓

フロントページ作成

メインビジュアル

【使用ブロック】
PCサイズ：カバー
タブレット・スマホサイズ：画像

【ポイント】
カバー（PCサイズ）の焦点ピッカー：左90・上45

【追加CSSクラス】
コピーのグループ：main-copy_box
格安留学！のコピー：main-copy_middle

【追加CSS】

/*メインビジュアル*/
.c-section.p-section-front-page-content {
	padding: 0;
}

/*メインコピー*/
.main-copy_box {
	margin: -10rem 8rem !important;
	line-height: 1.8rem;
}

.main-copy_middle {
	background-color: #E7ACB9;
	text-shadow: 4px 4px  gray;
	text-align: center;
	padding: 2rem 0 1rem;
}

yuppar Englishが選ばれる３つの理由

【使用ブロック】
セクションー［項目（自由入力）ー画像ー段落ー段落］
ボタン

【追加CSSクラス】
テキスト：reason-text
無料体験ボタン：free-btn

【追加CSS】

/*理由*/
.reason-text{
	padding: 0 0.6rem;
}

/*無料体験ボタン*/
a.smb-btn {
	box-shadow: 2px 4px 4px lightgray;
}

.free-btn a.smb-btn {
		padding: 1rem ;
}

【ポイント】
セクションを全幅にする。
項目の画像と段落２つをグループ化してから、画像を全幅にする。

yuppar Englishの魅力的な講師陣

【使用ブロック】
セクションー段落ーメディアと文章

【追加CSSクラス】
テキスト：teacher-text

【追加CSS】

/*講師*/
.teacher-text {
	margin-left: 5rem !important;
}

@media (max-width: 600px) {
	.teacher-text {
	margin-left: 1.5rem !important;
}
}

【ポイント】
モバイルの並び順：画像→文章
セクションの背景色：#fef4f4
セクションの上下の仕切りを「波」設定。

受講生の声

【使用ブロック】
セクションー段落ーお客様の声

【ポイント】
セクションを全幅にする。

導入事例

【使用ブロック】
セクションー段落ースライダーー［項目（自由入力）ー画像ー段落ー段落］
ボタン

【追加CSS】

/*スライダー*/
.spider__slide{
	padding: 2rem;
}

【ポイント】
スライダーの画像サイズ：中
画像のアスペクト比：デフォルト
表示するスライド数：PC４、タブレット３、スマホ２
セクションの背景色：#fffdf1
セクションの上下の仕切りを「波」設定。

セミナー／イベント

【使用ブロック】
セクションー段落ー［項目（自由入力）ー画像ー段落ー段落ー情報ー段落ーリストーボタン］
ボタン

【追加CSSクラス】
イベント画像のサイズ：幅400／高さ215
イベント項目のグループ：event-box
イベントタイトル：event-title
イベントの情報項目：event-item

【追加CSS】

/*イベント*/
.event-box {
	line-height: 0.1rem ;
	padding: 0 0.5rem;
}

.event-title {
	margin: 1rem 0 !important;
}

.event-item {
 margin:  1.6rem 0  !important;
}

【ポイント】
セクションを全幅にする。

お知らせ

【使用ブロック】
セクションー最近の投稿ーボタン

【ポイント】
セクションの背景色：#fef4f4
セクションの上下の仕切りを「波」設定。
最近の投稿の［モバイル端末時の表示カラム数］：１カラム

バナー

【使用ブロック】
カバーー段落ーボタン

【ポイント】
カバーの焦点ピッカー：左60・上45
カバー画像の最小の高さ：554px
テキスト：PC表示とタブレット・スマホ表示を作る

コンテンツ幅

コンテンツの横幅を揃える

【追加CSS】

/*コンテンツ幅*/
@media (min-width: 801px) {
	.c-container {
		margin: auto  3rem;
	}
}

投稿ページ

［投稿］で記事を作成する。

【設定】
［外観］>［カスタマイズ］>［デザイン］>［投稿ページ設定］※投稿ページを開くと出てくる

【ポイント】
ページレイアウト：１カラム
アイキャッチ画像：コンテンツの上
関連記事のレイアウト：デフォルト

フッターエリア（ウィジェット）

【設定】
［外観］>［カスタマイズ］>［ウィジェット］>［フッター］

【HTMLアンカー】
「yuppar Englishが選ばれる３つの理由」：reason

【ポイント】
一番左のロゴの部分はウィジェットの「WPAW：サイトブランディング」を挿入。
「選ばれる理由」は同じページ内なので「カスタムリンク」を追加しURLに「reason」と入力。
メニューの設定でフッターエリアに表示するメニューを作成する。
「選ばれる理由」のURL：#reason

メニューの同一ページ内リンクをスムーススクロール

動画内では設定しておりませんが、フッターエリアのメニュー「選ばれる理由」のリンクにスムーススクロールを設定できます。
［外観］>［メニュー］
①右上の「表示オプション」を開き、「CSSクラス」にチェックを入れます。

②メニュー「選ばれる理由」設定欄の「CSS class（オプション）」に「u-smooth-scroll」と入力します。

＼スムーススクロール設定完了／

ウィジェットエリアがブロックエディタ形式に！

WordPress 5.8にバージョンアップしたことにより、ウィジェットエリアがブロックエディタ形式になりました。
動画で作成したフッター部分の作り方を解説します。

フッターに掲載するメニュー２つは、動画のとおり［外観］>［カスタマイズ］>［メニュー]で作成。

［外観］>［ウィジェット］
①フッター部分に「ブロックを追加」で画像を挿入、ロゴを選択し任意の大きさに。リンク先をトップページに設定。

②「ブロックを追加」で「従来のウィジェット」を選択。
→「ナビゲーションメニュー」を選択。
→ タイトル：「MENU」メニューを選択：「フッター１」
→「INFO」も同様に作成

⬇︎

③「ブロック追加」で「見出し H2」を選択、「ABOUT US」と入力
→「ブロック追加」で「段落」を選択、住所を入力
→「見出し H2」と「段落」をグループ化する

⬇︎

＼フッターエリア完了／

お問い合わせ

１）「Snow Monkey Forms」でお問い合わせページを作成する。

【設定】
［Snow Monkey Forms］

【ポイント】
フォーム設定を開く

自動返信メールの設定
確認画面を使用する：ON
フォームスタイル：Business

〈自動返信メール〉
件名：
【yuppar English】お問い合わせありがとうございました

Body：

このメールはシステムからの自動返信です。
 {fullname}　様
 お世話になっております。
 お問い合わせいただきありがとうございました。
 以下の内容でお問い合わせを受付いたしました。
 3営業日以内にご連絡いたしますので今しばらくお待ちくださいませ。
 ※営業メールには返信いたしません。ご了承ください。
 ▼お問い合わせ内容▼
-------------------------------------------------------
 {all-fields}

２）固定ページの「お問い合わせ」を作成
【使用ブロック】
セクションーSnow Monkey forms

３）デザイン設定
［外観］>［カスタマイズ］>［デザイン］>「固定ページ設定」※お問い合わせページを開くと出てくる
ページレイアウト：ランディングページ（ヘッダー・フッターあり）
アイキャッチ画像の位置：ページヘッダーの上にタイトル表示

フッターのコピーライト

【追加CSS】

/*コピーライト*/
.c-copyright {
	background-color: #E7ACB9;
	color: white;
	text-align: center; 
}

メニューのお問い合わせを目立たせる

【設定】
［外観］>［メニュー］※カスタマイズの中のメニューではないので注意！

「メニューを編集」の「編集するメニューを選択」を「MENU」に設定。
「メニュー構造」の「お問い合わせ」のタブを開く。
「このメニュー項目を強調する。」にチェックを入れる。

＼＼デモサイト yuppar English の完成です！／／

設定していないページも作成してみてください！

この動画は私の師匠めがねんさん主宰の独学応援サロンの協力で制作しました。

デザイン：ゆうきさん
企画・進行・動画編集：けいぷろさん
参加協力：みゆきさん、えいちわいさん、もとろんさん

皆さんお忙しい中、ありがとうございました！！

他のはじめてシリーズ