実はこのテーマを作る前、私は過剰なCSSでガチガチに作り込み、身動きが取れなくなっていました。WordPressのアップデートも恐怖。ちょっとしたレイアウト変更でコードを書き直すことになり、一番大切な「記事を書くこと」が後回しに……。
その反省から、「Naniwa-No-Code」ではガチガチのデザインを手放し、ブロック本来の柔軟さを活かせる設計にしました。
このロードマップで手に入るもの
このシリーズを完結させる頃には、あなたは以下のものを手にしています。
既製品ではない、あなたのこだわりが詰まった唯一無二のテーマです。
CSSを1行も書かずに、WordPressのエディター操作だけでデザインを完結させるスキルが身につきます。
theme.jsonを活用した、色や幅を一括でスマートに管理できる最新の仕組みを理解できます。
PCでの2カラムやスマホでの縦並びなど、レスポンシブ対応もブロックの標準機能だけで自在に操れます。
冒険のステップ（全10回）
※このテーマはコアブロックだけでシンプルに組んでいます。
より細かい調整をしたい方向けに、今後カスタムCSS編を公開予定
『PCでは余白あり、スマホでは画面いっぱい』のような、ブロックだけでは難しい調整は別記事でご紹介します
各回のポイントを簡単におさらいしておきましょう
PHPやローカル環境不要！5つのファイルからスタートします。
ブログ型かホームページ型か、目的に合わせたファイル構成を決めます。
サイト全体の幅（contentSize/wideSize）や共通パーツを登録します。
あとから一括で着せ替えができるよう、色の「住所（slug）」を決めます。
背景色を広げるための「3層の入れ子構造」の考え方をマスターします。
ヘッダーと同じ要領で、サイトの足元を整えます。
投稿内容を自動で表示させる「post-content」ブロックを配置します。
データベースから記事を呼び出し、カード型に並べる魔法のブロックを使います。
日本のブログに欠かせないサイドバーを、カラムブロックで実装します。
スクリーンショットを登録し、本番公開前の最終チェックを行います。
配布用テーマ ＆ デモサイト
🎁 配布テーマ「Naniwa-No-Code」 ＆ デモサイトのご案内
本ロードマップの集大成として作成した、ブログ型テーマ「Naniwa-No-Code（ナニワ・ノーコード）」を公開します。難しい設定を省き、インストールしたその日からすぐにブログを書き始められる構成に仕上げました。
【こだわりのテンプレート設計】
- 投稿ページ（2カラム）： 日本のブログで親しまれている、サイドバー付きのレイアウト。他の記事への回遊性を高めています。
- 固定ページ（1カラム）： 大切なコンテンツをじっくり読んでいただくための、ノイズのないスッキリした設計です。
※これらのレイアウト切り替えも、CSSを一切使わずブロックの標準機能のみで構築しています。
⚠️ ご利用前に必ずお読みください
本テーマはプロの制作会社ではなく、Web制作を学ぶ個人の学習成果物です。そのため、本テーマの利用によって生じたいかなる不具合についても責任を負いかねます。「自己責任」にてご利用ください。また、不具合修正や機能追加等の「アップデート」の予定はございませんので、あらかじめご了承ください。
私自身も、2026年9月頃には本ブログをこの「Naniwa-No-Code」に切り替える予定です
「便利なプラグインの導入」や「より細かい調整をする方法」などは、今後もブログ記事として発信していきますので、一緒にサイトを育てていきましょう！