当サイトについて
ねこの手ラボは、WordPressテーマ「Snow Monkey(スノーモンキー)」でサイトを作れるようになることを目的にした情報サイトです。
このページでは、どんな人に向けて書いているのか、どんな前提で解説しているのかをまとめています。記事を読み始める前に、ご自身に合うかどうかの判断材料にしてください。
なお、当サイトは Snow Monkey の開発元および公式サイトとは一切関係ありません。Snow Monkeyテーマについて情報発信を行っている個人運営サイトです。
運営者プロフィール
ルカ
WordPressでサイト制作を仕事にしているフリーランスのコーダーです。
フリーランスを一度挫折し、6年の会社員生活を経て2023年に再スタート。
以前は全て自作のオリジナルテーマで制作していましたが、復帰した頃にはモダンデザイン&爆速制作が主流になっており、完全に浦島太郎状態で絶望。(あんな爆速ムリ…)
そんな中でSnow Monkeyに出会い、「これなら作れる」と感じて再スタート。
当初より実装時間がかなり短くなり、現在はSnow Monkeyを使った実装や、サイト制作を行っています。
そのため記事は「教科書的に網羅する」よりも「現場で実際に困ったところを掘り下げる」内容に寄っています。
体系立てて順番に学びたい方は、入門シリーズからお読みいただくのがおすすめです。
このような方に向けて書いています
- Snow Monkeyを買ってはみたものの、どこから手をつければいいのか分からない方
- デザインは作れるけれど、WordPressへの実装でつまずいてしまう方
- コーポレートサイトなどの小規模サイトをSnow Monkeyで実装したいと考えている方
- Web制作を学び始めて、これから仕事にしていきたい駆け出しのWebデザイナーの方
- 自作テーマではなく、既製テーマを使って堅実に納品したいと考えている方
- 制作の現場で実際にどう作られているのか、その手順を知りたい方
ひとことで言えば、「デザインから実装まで、ひとりで完結できるようになりたい方」です。
このような方には向いていません
- テーマをはじめから自作したい方
- Snow Monkey以外のテーマの使い方や情報を探している方
- ブロックエディタそのものの開発(ブロック自作、React周辺)を深く学びたい方
- 大規模サイトや大人数のチーム開発を前提としたノウハウを探している方
このあたりのテーマは扱っていないか、扱っていても踏み込みが浅くなります。あらかじめご了承ください。
前提としている知識
当サイトは、次のくらいの知識がある方を想定して書いています。
- HTMLとCSSの基本的な書き方や使い方が分かる
- WordPressの管理画面を触ったことがあり、初期設定や、投稿や固定ページの新規投稿を作れる
上記に関する事前準備や設定方法については、基本知識として割愛しています。
当サイトで扱うカスタマイズのレベル感
「カスタマイズ」という言葉の定義はひろく、設定画面をいじることをカスタマイズと呼ぶ人もいれば、コードを書いて拡張することをカスタマイズと考える人もいます。
どちらも間違いではありませんが、その前提がズレたまま記事を読むとズレが生じてしまいます。
ここではSnow Monkeyのカスタマイズを5つの段階に整理した上で、ねこの手ラボがどこを扱うサイトなのかをはっきりさせておきます。
Snow Monkeyカスタマイズの5段階
ねこの手ラボでは、入門~中級を中心に扱います。
基本の作り方、およびロードマップ的に入門~初級を扱い、個別カスタマイズの記事は中級がメインとなります。(ときどき筆者の備忘録として上級もまじります)
| 段階 | 区分 | 触る場所 | 扱えるもの |
|---|---|---|---|
| 入門 | ノーコード | 設定画面 | なし |
| 初級 | 簡単なCSSでカスタマイズ | WPのカスタマイザーの追加CSS | CSS |
| 中級 | CSSやJS、フック、PHPでしっかりカスタマイズ | My Snow Monkey (または子テーマ) | CSS、JS(アニメーションなど)、フック、PHP |
| 上級 | CSS、JS、フック、PHP、部品化・拡張 | My Snow Monkey カスタム投稿、カスタムポスト カスタムブロック プラグイン | CSS、JS、フック、PHP、React(ブロック開発)、WordPress API、プラグイン設計 ※上級のJavaScriptは、中級で扱うアニメーション用のJSとは別物です。ブロックエディタの部品そのものを作るための開発で、Reactとビルド環境が必要になります。 |
以下、それぞれを見ていきます。
入門 — 設定画面だけで作る
ブロックエディタ、カスタマイザー、Snow Monkeyの設定画面。触るのはこの3つだけで、コードは1行も書きません。
色、フォント、ヘッダーのレイアウト、各ページの設定。ここまでで、実はかなりのサイトが作れます。Snow Monkeyの設計思想がそもそも「設定で完結させる」方向を向いているからです。
この段階を飛ばして先に進むと、あとで必ず遠回りになります。 設定でできることをCSSで無理やり実現してしまい、テーマの更新で壊れるなどが発生するので、まずは基本の扱い方を知っておきましょう。
初級 — CSSを足す
WordPressにあるカスタマイザーの「追加CSS」欄にCSSを書いて、見た目を上書きします。
「あと8px余白が欲しい」といった、設定画面には項目がない細かい調整がここで自力解決できるようになります。
WordPressの管理画面からの更新になるため、たくさんのCSSを書くには向いていないのと、テーマ更新時に消える可能性があるのが欠点です。
中級 — CSSやJS、フック、PHPでしっかりカスタマイズ
ねこの手ラボは、この中級クラスをメインに扱っています。
CSSが数百行に育ってくると、カスタマイザーの追加CSS欄では管理しきれなくなります。
中級からは my snow monkey を使ってカスタマイズを行っていきます。
中級はかなり幅が広く、CSSやJSをファイルで管理するところから、フックを使って出力そのものを変えるところまで扱います。
ここから難易度があがっていきますが、ここでしっかりカスタマイズをできるとオリジナルデザインのサイトを実装できるようになります。
上級 — 開発の領域
独自ブロックの作成、プラグイン化、カスタム投稿タイプの設計などを行う段階です。
JSやWordPress本体のAPI、Snow Monkeyの内部構造への理解が必要になります。
個人のWeb制作レベルでは、ここまでやらなくてもOKな案件も多いです。
検証環境について
記事内のコードや手順は、原則として執筆時の最新版Snow Monkeyおよび WordPress で動作を確認しています。
ただしSnow Monkeyは更新の頻度が高いテーマです。記事の内容が現在の仕様と合わなくなっている可能性もありますので、記事の更新日を確認したうえでお読みください。
免責事項
記事の内容は、できるかぎり正確であるよう努めていますが、その動作や結果を保証するものではありません。
とくに、既存サイトへの変更を伴う作業を行う場合は、必ずバックアップを取ってからお試しください。
当サイトの情報を利用したことによって生じた損害について、責任を負いかねます。
お問い合わせ
サイトに関するご質問やご相談がありましたら、お問い合わせフォームよりご連絡ください。
