＼＼ Snow Monkey のショーケースに掲載されたよ！／／
在宅ワーク主婦・ゆっぱーです。
そうです！
私が制作したWeb制作事業のサイトが Snow Monkey の使用事例であるショーケースにUPされました！！
※Snow Monkey とは…
フリーランスのWordPress テーマ / プラグイン開発者キタジマタカシさんが開発されたWordPressの有料テーマです。
¥16,500 / 1年で、試用版もあります。購入について詳しくはコチラ。
やったあやったあ！！
「 Snow Monkey のショーケースに載せてもらう」のはひとつの目標だったので、達成できて非常に嬉しいとです！嬉しすぎて博多弁が出てしまうとです！
※2022/1追記）
2021年12月にホームページリニューアル案件も掲載していただきました！自信作！！
ということで、ショーケース掲載記念！【初心者さん向け】Snow Monkey基礎マスターロードマップ をお届けします。
※子テーマを使用したり、プラグインの My Snow Monkey を使用したりする高度なカスタマイズまではカバーできておりません。そこまでマスターしたらまた記事にしますね。
０）まずはWordPressの基礎を学習
ご存知のとおり Snow Monkey はWordPressのテーマですので、WordPressを扱えないと Snow Monkey も使用できません。
WordPressの基礎を学習済みの方は「１）Snow Monkey の公式ページで学習」へGOGOGO！
WordPressまだマスターしていない方！
ご安心ください。こちらでWordPress基礎完全攻略方法をご用意しておきました。
▶︎【WordPressって何？という方向け】 WordPress基礎完全攻略！
Snow Monkey は「HTMLとCSS」と「WordPress の基本」のスキルがあれば使えるので、↑の記事の「２）教科書を購入してHTMLの静的サイトをWordPress化する」はスキップしてもOKです。
ただ、仕事としてWeb制作で Snow Monkey をガンガン使っていきたい、という場合は、静的サイトのWP化もわかっていたほうが理解が早いと思います。
「３）WordPressのテーマをカスタマイズしてサイトを作る」は１つでも経験しておくと、Snow Monkey でのカスタマイズが楽々スムーズに理解できます。
「さらに前進！） Udemyの講座で完全マスター」も Snow Monkey 使用のWeb制作に必須とはいいません。（がやっぱりマスターしておいたほうが断然いいと思います）。
とにかくブロックエディターでの入力だけわかればいい！という方へ、こんなサイトもあります。
▶︎WordPressの基本的なブロックエディターを習得できる「ブロックエディター80問ドリル」
Snow Monkey を使用していくにあたってSnow Monkey エキスパートのオレインさんが素敵なブログを書かれています。
Snow Monkey でWebサイトを制作されたお客様、制作する我々、Snow Monkey 開発者のキタジマさん…全方向に気づかった愛あふれるブログです。
１）Snow Monkey の公式ページで学習
ではさっそく Snow Monkey の学習をはじめましょう。
まずは Snow Monkey の公式ページへ行ってみます。
あちこちひととおり見たら以下の順番で見てみてください。
▶︎スタイルガイド
「コアブロック」と「Snow Monkey Blocks ブロック一覧」をみてどういうスタイルがあるのか把握しましょう。
▶︎ショーケース
ショーケース（使用事例）です。そうです、ここに私のサイトが掲載されたのです！
たくさんあるので、こういうWebサイトができるんだな〜と眺めてみてください。
和風のサイトやかわいいサイト、リッチな雰囲気のサイト等 Snow Monkey でこんな素敵なサイトができるんだ！とワクワクが止まりません♪
ショーケースを一個戻ったページに「WordPress Theme Detector」があり、Snow Monkey をつかったサイトが確認できますね。外部サイトとのことですが、今回私も初めて拝見しました。
今後の Snow Monkey 使用のためにもじっくり見てみます！
２）Snow Monkey を動画で学習
Snow Monkey に関する動画も結構本数があって、どれから見たらいいか迷われる方もいらっしゃるかもしれません。
以下の順番で①〜④の動画を見ていくと少しずつ理解できて、無理なく Snow Monkey 使用のWebサイト制作にとりかかれると思います。
①Snow Monkey 初心者向け動画講座
現在この講座の動画はないのですが（え …現在企画制作中です！
以前じゃんきーさん（あとでまた出ていただきます笑）の「Snow Monkey 動画講座」があったのですが、現在は一般に公開されていないとのこと。
それならこの在宅ワーク主婦・ゆっぱーが作っちゃるけん！と急に博多っ子パワー出してきて企画制作中です。
（追記：2021/6/7 はじめてのスノモン記念日）
↓↓Snow Monkey 初心者向け動画作りました！↓↓
はじめての Snow Monkey 動画用デモサイト全解説！
気づいたらむっちゃ丁寧な長編動画になってしまいました！
Snow Monkey 初心者にも、WordPress初心者にもオススメしたい動画になりました！
ぜひご覧いただき、感想をTweetいただけると嬉しいです♪
ハッシュタグは 「#はじめてのスノモン」 で！
②キタジマさんとオレインさんが使用事例を探っている動画
「Snow Monkey ショーケース事例の作られ方を探ってみよう」
ショーケース事例をお二人が見ながらいろいろお話しされています。
１）で見たサイトをデベロッパーツールで中身を見たりして、作られ方を一緒に把握していきます。
初心者にやさしい動画です。
③ゼロイチラボちづみさんの生配信アーカイブ３本
「Snow Monkeyでサイトを生配信で作ってく会」
「Snow Monkeyでサイトを作ってく会Part3」
Snow Monkeyでサイトを生配信で作ってく会
ゼロイチラボの ちづみさん が、ショーケースでも紹介されている可愛くてデザイン性が高いサイトを生配信で作っている動画です。
仕切りの使い方、レスポンシブで違うスタイルにする方法、アニメーションの使い方等々…
あー！こんなふうに作っているのか！Snow Monkey のスタイルはこうやって使うのか！と一番頭に入ってきた超おすすめ動画です。
このサイトからたくさん真似させていただいています。
④キタジマさんとオレインさんがCSSカスタマイズをしている動画
「Snow Monkey の簡単なCSSカスタマイズに挑戦してみよう！」
③の動画でちづみさんがちゃちゃっと追加CSSを使っていた内容がじっくり見られます。
Snow Monkey を使ってサイト構築をする上で追加CSSは必ず使用すると思いますのでしっかりマスターしましょう。
全４回）キタジマさんとオレインさんが Snow Monkey Blocks を１つ１つ解説している動画
「Snow Monkey Blocks を舐め回す会 vol.1」
このスタイルはこういうデザインに使えるな〜と考えながら見ていると楽しいです。
これも見ておく）たにぐちまことさんの Snow Monkey 動画
「WordPress + SnowMonkey ブログ制作講座」
たにまこさんも Snow Monkey 動画を公開されています。
WordPressでブログ制作をする際の手順が中心です。後半には高度なカスタマイズについても解説されています。
以上の動画学習で Snow Monkey を使用したWebサイトを制作する知識はつくと思います。
他にもたくさん動画あるので見てみてくださいね。
３）Snow Monkey を使用してWebサイトを作ってみる
いよいよ Snow Monkey を使用してサイトを作ってみます。
まずは公式サイトから申し込める試用版で作ってみるといいと思います。
試用版で作ったサイトに、購入した Snow Monkey テーマをインストールしたら、作っていたサイトはそのままにテーマだけ有料版に上書きされましたのでそこはご安心を（ローカル環境でやりましたが）。
▶︎サイトを作る前にチェックしておきたいブログ
副業でWebサイト制作をされているじゃんきーさんの「じゃんきーブログ」！
Snow Monkey でのサイト制作に役立つ記事がたくさん。
サイトを作っていて、ここをこうしたい！と思った時にブログに戻ってやり方をチェックしましょう。
じゃんきーさんと接したことがある方はおわかりかと思いますが、Snow Monkey に関して質問したらむっちゃくちゃ優しい対応をしてくれる超ナイスガイです。
Web制作界隈はナイスガイむっちゃ多いですが、じゃんきーさんはトップクラスに優しくできたお方です！Twitterフォローしてツイート見るだけで癒されること間違いなし。
▶︎レンタルサーバーや写真・画像素材の準備が必要な場合
【WEB制作】ゼロから始めるプログラミング独学〜基礎の６STEP〜
「６）ポートフォリオ（自己紹介サイト）を作成する」に「初めてのポートフォリオを作成するために使用する無料ツール」としてレンタルサーバーや写真・画像素材を紹介しています。
上記内容を確認後、Snow Monkey でサイトを作ってみてください！
私は頭の中でだいたいのイメージを描いて、サイト構築をしながら作っていきましたが、手書きでもいいのでデザインを決め、写真・画像を揃えてから制作が効率よくサイト制作ができると思います！
４）ゆっぱー的 Snow Monkey の便利ポイント
０）〜３）まで進んでサイト制作をしてこれはポイント！と思ったところを列挙します。
今後気づいた点があったら随時追加していきます♪
◆ページ内リンクのスムーススクロール
私のサイトのTOPページで「料金表をみる」ボタンをクリックするとページ内の料金表にスムーススクロールします。設定手順は以下のとおり。
１）「料金表」のタイトルのHTMLアンカーに「price」と設定。
２）メインビジュアルのボタンのリンクに「#price」と設定。追加CSSクラスに「u-smooth-scroll」と設定。
→スムーススクロールが設定されます。
◆問い合わせフォームの編集
Snow Monkey Forms を使用します。
問い合わせページを作りSnow Monkey Formsの欄からお問い合わせページを開き、「フォーム設定を開く」で設定していきます。プレビューを確認しながらスタイルを決めていきます。
（最初ここがわからなくてデフォルトのままにしていました）
◆お知らせバーの設定
私のサイトでは使用していませんが、他のサイトでメニューの下にお知らせバーが入っているのをよく見かけます。どこで設定するのかわからなかったので記載しておきます。
「外観」→「カスタマイズ」→下の方（デザインの下）に「お知らせバー」があります。ここで設定します。
◆空のボタンが出てきちゃう問題
ボタンを設置すると、編集ページに入るたびにボタンの下に空のボタンが出てきて、毎回削除しなければならず面倒だなと思っていました。
これはボタン自体ではなく「ボタン要素を包んでいるwrapperごと削除する」と解決しました。
編集ページに入っても空のボタンは出てきません。
前述の動画「Snow Monkey Blocks を舐め回す会 vol.1」でおっしゃっていたのでご確認を。
Snow Monkey 基礎マスターロードマップはここまでです！
アクションフックやフィルターフック等を使った高度なカスタマイズができるようになったら、また記事を作りますのでお楽しみに。
この記事で不明な点、気になる点がありましたらお気軽にTwitterでリプぶっ飛ばしてください！
記事の感想もいただけると嬉しいです♪
＼お読みいただきありがとうございました／
