Snow Monkeyの使い方・ホームページを作る方法(動画解説版)です。
動画のデモ環境は下記の通りです。ご利用の環境によって本動画とは画面・操作方法が違う場合があります。
あくまで特定の環境下における操作方法の一例をご紹介したもので、ご利用の環境によっては設定箇所が異なる場合や、公式サイトに記載されている方法と必ずしも一致しない場合があることをご了承の上ご参考下さい。
(1)テーマインストール〜初期設定編
テーマインストール〜初期設定編までの動画です。
- Snow Monkey テーマおよび関連プラグインの適用 02:13
- 固定ページの作成 05:20
- メニューバーの設定 06:48
- トップページの設定 10:14
- 外観>カスタマイズ>サイト基本情報>ロゴやフッター設定 13:30
(2)トップページ作成編
トップページの作成の動画です。
- ブロックエディターの基本 01:15
- Snow Monkey Blocks 01:57
- 画像ブロックを利用してメインビジュアル作成 03:10
- 上下の余分な余白を削除 03:50
- セクションブロック 05:04
- パターンの利用 09:03
- ボタンブロック 12:14
- セクションブロック色々な設定 13:30
- メディアとテキスト 17:49
- 最近の投稿・お知らせ一覧 25:00
- セクション(背景画像/動画) 27:10
- まとめ 30:37
(3)固定ページ作成・レイアウト編
固定ページ作成・レイアウト調整の動画です。
- 固定ページのサイドバーなし(1カラム設定) 01:43
- 固定ページのアイキャッチレイアウト設定 03:16
- 会社情報のテーブルの作成(情報ブロック) 04:18
- 情報ブロックとテーブルブロックの違い 09:12
- ギャラリーブロック 12:29
- セクションブロックの余白調整(スマホ時に余白無くす)14:40
- まとめ 17:47
(4)投稿・一覧ページレイアウト編
投稿・投稿一覧アーカイブページのレイアウト調整の動画です。
- 投稿の追加方法 01:27
- 投稿ページのアイキャッチ設定 02:50
- この記事を書いた人を消す 05:02
- コメント受付欄を消す設定 06:02
- 投稿のパーマリンク・URL設定 08:26
- ブログ上のユーザー表示名変更 10:50
- 投稿カテゴリーの設定方法 12:05
- 任意のタクソノミーの投稿 17:26
- 投稿サイドバーの設定 20:58
- アーカイブ一覧ページのレイアウト設定 24:23
- まとめ 27:35
(5)Snow Monkey Forms問い合わせフォーム編
Snow Monkey Forms問い合わせフォーム作成の動画です。
- 問い合わせフォーム作成基本編 00:50
- フォームデザイン調整 03:32
- メール送信調整 07:20
- フォーム部品追加(テキスト・TEL・ラジオボタン・チェックボックス) 16:32
- 問い合わせ完了画面調整 27:22
- スパム対策(Google recaptcha設定) 29:00
- まとめ 31:58
(解説記事)【Snow Monkey Forms】使い方・お問い合わせフォームの作成方法
(6)カスタマイザー・デザイン編
カスタマイザー・デザイン調整の動画です。
- ロゴ・フッターコピーライト・サイトアイコンの設定 00:38
- トップページの上下余白調整 01:31
- デザイン>ヘッダーレイアウト・スマホドロワー・色・フォントなど 01:59
- デザイン>投稿ページ・固定ページ設定 10:38
- お知らせバー 12:44
- SEO・その他設定 13:18
- まとめ 14:17
(7)カスタム投稿・商品情報作成編
カスタム投稿・商品情報作成の動画です。
- カスタム投稿・カスタムタクソノミーとは 00:30
- プラグインCPT UIのインストール 02:20
- カスタム投稿「商品情報」の作成 03:31
- カスタムタクソノミー「商品カテゴリー」の作成 07:20
- レイアウト調整 10:22
- スライダーを利用した商品情報の作成 13:27
- 情報ブロックを利用した商品情報の作成 14:52
- メニューバーへ商品情報一覧を追加する 17:36
- 商品情報の一部をトップページに掲載する 20:46
- 追加CSSで表示をカスタマイズ 23:04
- まとめ 24:58
(8)便利なブロック・Snow Monkey Blocks前編
便利なブロック・Snow Monkey Blocks前編の動画です。
- パネル(水平パネル・垂直パネル)ブロック 02:08
- 項目(スタンダード・ブロックリンク・バナー)ブロック 09:18
- メディアとテキストブロック 18:30
- FAQ(よくある質問)ブロック 22:59
- アコーディオンブロック 24:44
- 吹き出しブロック 27:09
- 目次ブロック 28:13
- まとめ 30:04
(9)便利なブロック・Snow Monkey Blocks後編
便利なブロック・Snow Monkey Blocks後編の動画です。
- スライダーブロック 01:19
- コンテンツスライダーブロック 04:53
- 情報ブロック 11:48
- 最近の投稿ブロック 16:06
- 任意のタクソノミーの投稿一覧ブロック 18:06
- タブブロック 19:19
- ステップブロック 22:21
- セクション・セクション背景画像・コンテナーブロック 24:30
- パターン 35:15
- まとめ38:04
(10)メニュー・ウィジェット編
スマホ固定メニュー・フッターウィジェットなどの解説動画です。
- フッターサブナビゲーションの設定 00:58
- スマホ用固定フッターメニューの設定 03:10
- フッターウィジェットの設定 13:15
- まとめ 21:52
(11)カスタマイズ補足編
追加CSSでスタイルを調整する方法や、My Snow Monkeyを使ったカスタマイズ方法の解説動画です。
- 主なカスタマイズ方法(追加CSSとMy Snow Monkey) 01:00
- 追加CSSによるカスタマイズ(ヘッダー高さ調整とタイトルに影) 01:53
- My Snow Monkeyによるカスタマイズ(ドロワーメニューにHTML追加) 06:32
- まとめ14:48
■追加CSS
1 2 3 4 5 6 7 8 |
/* ヘッダー高さのカスタマイズ */ .c-page-header[data-has-image=true] { height: 300px; } /* ヘッダーテキストに影をつける */ .c-page-header[data-has-image=true] h1.c-page-header__title { text-shadow: 1px 1px 2px #666; } |
■My Snow Monkey
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//スマホメニューの上部にロゴをつける例 add_action( 'snow_monkey_prepend_drawer_nav', function() { ?> ここにHTMLを記述 <?php } ); //スマホメニューの下部にバナーをつける例 add_action( 'snow_monkey_append_drawer_nav', function() { ?> ここにHTMLを記述 <?php } ); |
今回は以上になります。最後までご覧いただきありがとうございました。
あわせて読みたい記事
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました!
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。