WordPressテーマのSnowMonkeyでWEBサイト制作をする方法

投稿日 2020年11月30日
更新日 2021年7月30日
著者じゃんきー
カテゴリー SnowMonkey

こんにちは！じゃんきーです！

以前Twitterにてこんな企画をさせていただきました。

以前お知らせしました、デモサイトの制作マニュアル完成しました✨

・WordPressを勉強したい
・SnowMonkeyで制作したい
・営業で実績として使える
・祐太さん@haraponta1496 の企画に応募できる(かも⁇😊)

こんな風に考えてる方は無料なのでぜひ使ってみてください☺️

DMもらえれば配布します🙇 https://t.co/pYvqDoCwT3
— じゃんきー@副業お助けマン (@thumiage_ot) November 24, 2020

SnowMonkeyで制作したデモサイトのマニュアルを作成し、配布するというものでしたが、
3日で101件のDMをいただき、
僕が想像していたより多くの方にご連絡をいただきました。
そして、見て頂いた方に大変好評いただきました！

スノーモンキー学習スタートしはじめの方に最高に嬉しい企画ですね！

じゃんきーアニキありがとうございます😊 https://t.co/Gqok1gL61m
— 祐太@はらブログ🐮 (@haraponta1496) November 24, 2020

実績として使えて、しかもSnow Monkeyを勉強でできるなんて、初学者のわたしには神！素晴らしい企画ありがとうございます🙇‍♀️✨ https://t.co/5Zaq3HAcZh
— はるか@Web制作×福祉用具専門相談員 (@h5r_dm) November 24, 2020

じゃんきーさんが、SnowMonkeyのデモサイトマニュアルを無料配布してくださってます！😭
SnowMonkeyどうやって勉強しようか悩んでいたので、ほんとにありがとうございます！🙇‍♂️🙇‍♂️ https://t.co/lHXEHXYG4x
— taku / NoCode Designer (@takuNoCode1) November 24, 2020

これまた素敵企画すぎる！
本当にこの通りでコーポレートサイトが制作できる😳🙌
付録のプラグイン使ってないのあったので試してみます✨
さすがじゃんきーさん！！！ https://t.co/dmRWEn02qq
— あやね🍒オンラインアシスタント (@aya_pt_644) November 24, 2020

感想いただけた全員を紹介できずすいませんm(_ _)m
みなさん、本当にありがとうございました！！！

そこで、今回は企画で配布したマニュアルを
ブログで制作し公開させていただくことにしました。

このマニュアルをみて

・WordPressを使ってWEBサイトを作ってみたい
・SnowMonkeyに触れたことがないので触れてみたい
・案件獲得に向けて営業したいけど、提案できる制作物がない
・祐太さん@haraponta1496の企画に参加したい

というような方の手助けになると思います。

初心者の方でも1からWEBサイトを制作できるようにお伝えしますので、ぜひご覧ください！！！

作ってみたら、営業活動をしてみることをオススメします！！！

クラウドワークスなどの提案型のものもありますが、
ココナラでの営業もオススメです。

制作したデモサイトを商品パッケージにして提案してみるといいと思いますよ〜^_^

サクッと登録＆出品して稼ぐための一歩を踏み出しちゃってください！！！

内容はけっこーボリューミーなので、少しずつ時間のあるときに進めていただければ幸いですm(_ _)m

準備するもの

制作にあたって準備するものは以下の通りです。

⑴WordPressをインストールできる環境
⑵SnowMonkeyテーマ
⑶ロゴ素材
⑷画像素材

⑴WordPressをインストールできる環境（①or②）

①local by flywheel

テスト環境でWordPressをインストールできます。

こちらを参考に

②レンタルサーバーを契約してWordPressをインストール

月々1000円くらいで使用できますし、営業などで制作物を見せるときにURLを添付するだけで共有できちゃうので、サクッと契約しちゃった方がいいですね。

オススメレンタルサーバーは

・エックスサーバー

エックスサーバーはマナブさんなど数多くのインフルエンサーが紹介している有名なレンタルサーバーなのでまず間違いないと思います。
※8/26まで初期費用無料、ドメイン永久無料キャンペーンみたいなので、この機会にどうぞ〜

・ConoHa WING

僕はこのConoHa WINGを使用しています。ヒトデブログのヒトデさん、両学長などYoutubeで活躍されている方もオススメしていましたよ〜

月額891円から使えて独自ドメインも2つ永年無料みたいなのでコスパもいいと思います。

⑵SnowMonkeyテーマ

SnowMonkeyは上記から試用版を申請してダウンロードしてください。

「触って機能を体感したい」という方はぜひ使ってみてください！

試用版SnowMonkeyには以下のような制限があります

・コピーライトの編集

・バージョンのアップデート

・セキュリティ問題の修正

・機能の追加

やはり使ってみて「いいな」を思れば、購入して使用していくのがいいかと思います。

国産テーマで100％GPL、開発者のキタジマさんのサポートも受けられるのでWEB制作がかなり充実すると思います！

⑶ロゴ素材

https://drive.google.com/file/d/11TJxJMAVDwyssfkVA_D77rtqxsG8yg8I/view?usp=sharing

⑷画像素材

https://drive.google.com/file/d/1OD1wfD_LAEB7i-a3Wgz3ITCxhIAGQO1y/view?usp=sharing

ロゴや画像は何を使ってもらっても大丈夫ですが、上記からダウンロードして使ってもらっていいですよ〜。

それでは次からWEBサイト制作を開始していきます！

制作したデモサイトがこちらです↓↓↓

コーポレートデモサイト

Just another WordPress site

fukugyo-th.com

制作時の文章はこちらからコピペしちゃってください。

※今回は参考サイトのトップページのみの構築です。またいつか下層ページの制作マニュアルもやってみます！

管理画面へのログイン

設定したユーザー名、パスワードの入力でログインします。

SnowMonkeyテーマのインストール

①WordPress管理画面の左側にある「外観」→「テーマ」へ

②「新規追加」をクリック

③「テーマをアップロード」をクリック

④「ファイルを選択」をクリック

⑤ダウンロードしたテーマファイルをzipのまま「開く」

⑥「今すぐインストール」をクリック

⑦テーマを「有効化」する

プラグインのインストール

①管理画面左側の「プラグイン」→「新規追加」

②検索で”Snow Monkey Blocks”の検索をする

③「今すぐインストール」→「有効化」をクリック

④同じ手順で”Snow Monkey Editor”も有効化する

ダウンロードした画像をアップロード

①管理画面左側の「メディア」→「新規追加」をクリック

②「ファイルを選択」から、お渡ししている画像を選択してアップロード

　※ドラック＆ドロップでも大丈夫です。

サイトの制作していきます！！！

サイト基本情報の設定

①管理画面左側の「外観」→「カスタマイズ」をクリック

②カスタマイズ画面の左側にある「サイト基本情報」をクリック

③「サイトのタイトル」「キャッチフレーズ」にご自分の好きなものを入力
※ブラウザの検索結果などに表示されるものです。

ロゴの設定

①「ロゴを選択」→左上にある「メディアライブラリ」タブをクリック

②画像をクリックして右下にある「選択」をクリック

③「画像切り抜き」をクリック

ファビコンの設定

①「サイトアイコンを選択」をクリック

②ファビコン用の画像（小さいやつ）をクリックして右下にある「選択」をクリック

③「切り抜かない」をクリック

コピーライトの設定

①すでに入力されているコードを消去

②　©corprate-demo2020　と入力
※©から後はご自分で好きなテキストにして大丈夫です。

③左上にある「公開」をクリックしてサイトのリロードをするとコピーライトが変更されている

基本デザインの設定

①カスタマイズ画面の左側にある「デザイン」→「基本デザイン設定」をクリック

②「アクセントカラー」は「黒」を選択

③「ロゴの拡大率」はPC、モバイル共に「15％」に設定

※編集後は「公開」を押すと保存ができます。

固定ページ編集

①カスタマイズ画面の左上にある「×」をクリックしWordPress管理画面に戻る

②左側にある「固定ページ」→「新規追加」をクリック

③タイトル入力に”HOME”と入力し、右上の「公開」をクリック

④左上にあるWordPressロゴをクリックし管理画面に戻る

⑤左側のメニュー「設定」→「表示設定」をクリック

⑥「ホームページの表示」を「固定ページ」にして、「ホームページ」のドロップダウンから「HOME」を選択し、「変更を保存」をクリック

⑦「固定ページ」→「固定ページの一覧」から「HOME」の「編集」をクリックして固定ページの編集へ戻る

ヘッダーセクション

①黒い＋をクリック

②「すべて表示」をクリック

③左側に項目が出てくるので、その中の「SNOW MONKEY BLOCKS【セクション】」にある「セクション（背景画像/動画）」をクリック

④画面右側にある「メディアライブラリ」をクリックして「トップ動画」を選択

これで動画が挿入されました。

ただ、動画が小さいのでサイズの調整をします。

⑤右側にある「高さ」のドロップダウンから「広め」を選択

⑥編集画面の動画の上にあるリストから赤丸のアイコンをクリック

⑦「全幅」を選択

これで画面いっぱいに動画が広がりました！

ここでワンポイントレッスン①

・基本的に編集をするときは、セクション（１つのかたまり）ごとに区切るといいです。

・１つのセクションを編集したら、そのセクションの外にある「黒い＋」をクリックして新たなセクションを作る

・セクションがごちゃごちゃになってないか左上にあるタブから確認をするクセをつけるといいと思います！

ワンポイントレッスン②

黒い＋をクリックしても、セクション外が選択されてしまうことがあります。

そんな時は、、、

①追加したい黒い＋の横（赤丸）付近をクリック

②左上にある青い＋（青丸）をクリック

この手順でセクションやブロックが追加できますよ〜

ABOUTセクション

①黒い＋をクリック

②左側の項目の「SNOW MONKEY BLOCKS【セクション】」にある「セクション」をクリック

③「タイトル」「リード文」の入力

④黒い＋をクリック

⑤左側の項目の「メディア」にある「ギャラリー」をクリック

⑥「メディアライブラリ」から画像の選択

⑦「ギャラリーのキャプションを入力」へテキストの入力

⑧黒い＋をクリック

⑨左側の項目の「SNOW MONKEY BLOCKS【共通ブロック】」にある「ボタン」をクリック

⑩ボタン内をクリックしてテキストを「ABOUT」にする

11.ボタンの右あたりをクリックすると、赤丸のようになる

12.３本線のアイコンをクリックし、「テキスト中央寄せ」にする

13.ボタンをクリックし、右側の項目「角丸半径」を「０」に設定する」

14.セクション全体の「コンテンツの幅をスリム幅にする」を有効化

パララックス部分

①ABOUTセクション（かたまり）の外にある黒い＋をクリック

②左側の項目の上部にある「パターン」タブをクリック

③「Heading1」を選択

④タイトルと文章をそれぞれ編集

⑤画像を変更するため、画像上をクリック

⑥「置換」をクリック

⑦「メディアライブラリを開く」から画像を選択して「選択」をクリック

⑧右側の項目「高さ」のドロップダウンから「フィット」を選択

⑨「パララックス」を有効化する

⑩「背景マスクの設定」→「背景マスクの色」の青を選択

11.「背景マスクの透明度」を「0.8」に設定

12.同じ手順を繰り返し、その下にもパララックス画像を追加する

※同じものを追加する時は、画像の点３つをクリック→「複製」でもできます。こっちの方が楽ですよー。

WORKSセクション

①黒い＋をクリック

②左側の項目の「SNOW MONKEY BLOCKS【セクション】」にある「セクション」をクリック

③タイトルなどは入力しない

④セクション内で黒い＋をクリック

⑤左側の項目の「SNOW MONKEY BLOCKS【共通ブロック】」にある「パネル」をクリック

⑥「メディアライブラリ」から画像を選択

⑦タイトル、内容を入力

⑧黒い＋をクリック

⑨「項目（垂直レイアウト）」を選択

⑩これを繰り返して項目を追加していく

11.並べたパネル全体が選択された状態にする

12.右側の設定メニューの「行あたりのカラム数（ラージウインドウ）」を「３」に設定

13.タブレット・スマホではカラム数を「１」にしたいので、赤丸のそれぞれのアイコンタブから設定する

14.パネルの下にABOUTセクションで設置したボタンと同じように「WORKS」ボタン設置する

15.セクション全体の「コンテンツの幅をスリム幅にする」を有効化

人物の画像スライダー部分

※ここは画像を並べ、スライダーとしての見た目だけになります。リンクはできないのでご周知ください。

①黒い＋をクリック

②左側の項目の「SNOW MONKEY BLOCKS【共通ブロック】」にある「スライダー」をクリック

③「メディアライブラリ」から画像を選択

※一度に複数選択できます

④「ギャラリーを作成」→「ギャラリーを挿入」をクリック

⑤右側の項目「矢印を表示」を有効にする

⑥「自動再生の間隔」を「３」にする

⑦「表示するスライド数」を「３」にする

⑧タブレット・スマホではスライド数を「２」にしたいので、それぞれのアイコンタブから設定する

⑨スライダーコンテンツをクリックし、幅を調整できるアイコンをクリック

⑩スライダーコンテンツの幅を「全幅」にする

ENTRYセクション

①黒い＋をクリック

②左側の項目の「SNOW MONKEY BLOCKS【セクション】」にある「セクション」をクリック

③「タイトル」「リード文」を入力

④黒い＋をクリック

⑤左側の項目の「SNOW MONKEY BLOCKS【セクション】」にある「セクション（背景画像/動画）」をクリック

⑥右側の設定項目「Media」→「メディアライブラリ」をクリック

⑦画像を選択して「選択」をクリック

⑧テキストを入力

⑨テキストを「中央寄せ」にする

⑩SnoeMonkeyアイコンをクリックして、文字色を「白」、文字サイズを「中」にする

11.入力したテキストでENTERを押すと、新たに黒い＋が出る

12.それをクリックして左側の項目「SNOW MONKEY BLOCKS【共通ブロック】」にある「ボタン」をクリック

13.ボタンのテキストを「ENTRY」に変更

14.「ボタン」を「中央寄せ」にする

15.右側の項目からボタンの「角丸半径」を「０」にする

16.「背景マスクの設定」をクリック

17.「背景マスクの色」の「水色」をクリック

18.「背景マスクの不透明度」を「0.5」に設定

19.セクション全体の「コンテンツの幅をスリム幅にする」を有効化

MESSAGE部分

※ここは「ENTRYセクション」と同じような内容なので、画像は割愛させていただきます。

①画像下の「文章を入力〜」にテキストを入力

②入力したテキストからクリックすると右下に黒い＋出る

③黒い＋をクリック

④それをクリックして左側の項目「SNOW MONKEY BLOCKS【共通ブロック】」にある「ボタン」をクリック

⑤ボタンのテキストを「MESSAGE」に変更

⑥「ボタン」を「中央寄せ」にする

⑦右側の項目からボタンの「角丸半径」を「０」にする

フッターセクション（画像部分）

①前のセクション外の黒い＋をクリック

②左側の項目の上にある「パターン」タブをクリック

③「Feature6」を選択

④タイトル、テキストの例文は消去する

※テキストは「ブロックを削除」から消しちゃった方がいいです

⑤画像を選択して２つ「複製」する

⑥画像をクリック→「置換」→「メディアライブラリを開く」から選択

⑦セクションの幅を「全幅」にする

⑧画像のコンテンツ自体は、右側の設定「コンテンツの幅をスリム幅にする」を有効化

フッターセクション（ロゴ部分）

①画像の枠外にある右下の黒い＋をクリック

②左側の項目の「メディア」から「画像」を選択

③ロゴを「選択」

④画像の上にある項目の「切り抜き」→「縦横比」から「16:9」を選択

⑤青いバーを動かしてロゴを小さくする

⑥ロゴを「中央揃え」にする

⑦ロゴをクリックし「リンクを挿入」をクリック

⑧入力欄に「#」を入れる（ホームのトップに戻れる）

フッターセクション（住所部分）

①ロゴの下に住所を入力

フッターセクション（SNSアイコン部分）

①入力したテキストからクリックすると右下に黒い＋出るのでクリック

②左側の項目「ウィジェット」から「ソーシャルアイコン」を選択

③Twitter,facebook,YouTube以外は「ブロックを削除」する

④それぞれアイコンをクリックしてリンク先を「アドレスを入力」に入力する
※今回はそれぞれ「https://facebook.com/」「https://twitter.com/」「https://youtube.com/」にしました。

⑤「配置の変更」から「中央揃え」に変更
※編集画面上では変化ないかもです。プレビューとかで状況見てもいいかもですね。

⑥右側の設定項目「スタイル」から「ロゴのみ」を選択

ホームページ設定

①WordPress管理画面に戻って左側にある「外観」→「カスタマイズ」クリック
※右側にデモサイトが表示されていると思いますが、ヘッダーとフッターに余分な余白があることがわかると思います。それを修正します。

②左側の「ホームページ設定」をクリック

③「ホームページのコンテンツエリアに上下余白を追加する」のチェックを外す

④左上にある「公開」をクリック

これで余白は無くなりました！

メニューの設定

①カスタマイズ画面から「メニュー」→「メニューを新規作成」クリック

②メニュー名を入力。ご自分でわかれば何でも大丈夫ですが、ここでは「グローバルナビ」にしておきます

③チェックリストの「グローバルナビゲーション」「ドロワーナビゲーション」「フッターサブナビゲーション」にチェック→「次」をクリック

④「項目を追加」をクリック

⑤「固定ページ」の「HOME」をクリックするとメニューに追加される

⑥「新規固定ページを追加」に”ABOUT”を入力し「追加」をクリック

⑦同じ要領で”WORKS””MESSAGE””RECRUIT”を追加

⑧次に「投稿」から「新規投稿を追加」に”BLOG”を入力し「追加」

⑨左上にある「公開」をクリックし設定完了

※メニュー項目は本来であれば「固定ページ」や「投稿ページ」を作成すれば、自動的に赤丸の中に追加されます。今回は、他のページを作成していないので、このような形で作成しました。

ヘッダーレイアウトの変更

①カスタマイズ画面から「デザイン」→「ヘッダー」をクリック

②「ヘッダーレイアウト」を「1行」

③「モバイル用ヘッダー位置」を「上部固定」

④「PC用ヘッダー位置」を「オーバーレイ（上部固定/スクロール時背景白）」

⑤それぞれ設定して「公開」をクリック

追加CSSでサイトの修正

①カスタマイズ画面から「追加CSS」をクリック

②下記コードを入力

/* フォントの変更 */
.l-body, .block-editor-block-list__block {
    font-family: 'Arial',YuGothic,'Yu Gothic',sans-serif;
}
/* モバイル表示の時のセクションタイトル文字サイズ変更 */
@media (max-width: 480px){
.smb-section__title {
    font-size:18px;
 }
}

お疲れ様でした！！！

以上でデモサイトの制作は終了です。

参考サイトのようなWEBサイトの制作ができたと思います。

これをきっかけにして、営業活動を開始できたり案件獲得につながればすごく嬉しく思います。

最後になりますが、TwitterのリプやDMなどで感想をいただければ幸いです。

最後までありがとうございました！！！

この記事を書いた人

じゃんきー

病院で10年以上医療職として勤務する傍ら、副業に取り組む。
副業で5〜10万を得られることで生活やメンタルが豊かになることを実感。
同じように感じてもらえる仲間を増やすため、副業お助けブログを運営。
夢は副業で得た収入で家族とのハワイ旅行。
自分の強みや目標、やりたいことを一緒に見つけませんか？

記事一覧