総仕上げのステップです。
テーマの「身分証」と「顔を整える」
テーマの「身分証」を整える(style.css)
テーマの名前や作者情報を定義します。管理画面に表示されます。
/*
Theme Name: my-theme ← テーマ名
Author: kk ← あなたの名前
Description: Simple blog theme
Version: 1.0
License: GNU General Public License v2 or later
*/
※ License:「自由に使っていいけど、同じ自由を次の人にも渡してね」というライセンスです。
テーマの「顔」を作る(screenshot.png)
管理画面の「テーマ」で表示される画像です。
自分のサイトをブラウザで表示して、スクリーンショットを撮るだけでOK。ファイル名を間違えないようにしましょう。
| ファイル名 | screenshot.png |
|---|---|
| 推奨サイズ | 1200 × 900 px |
| 保存場所 | テーマフォルダの直下(ルート) |
theme.json で定義する 4つの場所(おすすめ)
theme.json に書いておけば、テーマをインストールした瞬間にサイトの基本設定が出来上がった状態になります。
settings/typography/(フォントサイズ)
フォントサイズが13px → 20px → 36px → 42pxでは使い勝手がわるいので"defaultFontSizes": falseで使わない設定にして、実用的なサイズに変更します。
"typography": {
"defaultFontSizes": false,
"fontSizes": [
{ "slug": "small", "size": "14px", "name": "小" },
{ "slug": "medium", "size": "17px", "name": "中" },
{ "slug": "large", "size": "20px", "name": "大" },
{ "slug": "x-large", "size": "24px", "name": "特大" }
]
}settings/typography/(フォント)
なにも指定しないと、ブラウザ任せになるので、最低限のセリフ(明朝体)とサンセリフ(ゴシック体)を定義しておきましょう。
フォントを変えたい「段落」や「見出し」ブロックをクリックしてそこだけ変更もできます。
"typography": {
"fontFamilies": [
{
"fontFamily": "\"Noto Sans JP\", sans-serif",
"name": "ゴシック体",
"slug": "sans-serif"
},
{
"fontFamily": "\"Noto Serif JP\", serif",
"name": "明朝体",
"slug": "serif"
}
]
}styles/(背景色・フォント)
サイト全体のテキストの色と背景色を指定します。薄いグレーを指定すると高級感が出ます。
フォントのデフォルトは、ゴシック体にしています。
"styles": {
"color": {
"background": "var(--wp--preset--color--gray-light)" ,
"text": "var(--wp--preset--color--base)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--sans-serif)"
}
}styles/elements/(リンクの色)
パレットで決めた「サブカラー」などをリンクに適用して、ホバー時のエフェクトも追加しておきます。
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--secondary)"
},
"typography": {
"textDecoration": "none"
},
":hover": {
"color": {
"text": "var(--wp--preset--color--accent)"
},
"typography": {
"textDecoration": "underline"
}
}
}
}上書き用(全体のコードです)
{
"version": 3,
"settings": {
"appearanceTools": true,
"useRootPaddingAwareAlignments": true,
"layout": {
"contentSize": "800px",
"wideSize": "1200px"
},
"color": {
"defaultPalette": false,
"palette": [
{ "slug": "primary", "color": "#4a7c7e", "name": "メイン" },
{ "slug": "secondary", "color": "#c8956c", "name": "サブ" },
{ "slug": "accent", "color": "#e8b4a0", "name": "アクセント" },
{ "slug": "base", "color": "#333333", "name": "ベーステキスト" },
{ "slug": "white", "color": "#ffffff", "name": "白" },
{ "slug": "gray-light", "color": "#f8f9fa", "name": "薄灰(背景)" },
{ "slug": "gray-medium","color": "#e9ecef", "name": "中灰(枠線)" },
{ "slug": "ui-info", "color": "#eef7f8", "name": "情報" },
{ "slug": "ui-success", "color": "#eff3ef", "name": "おすすめ" },
{ "slug": "ui-warning", "color": "#fcf8ed", "name": "注意" },
{ "slug": "ui-danger", "color": "#f9efee", "name": "危険" }
]
},
"typography": {
"defaultFontSizes": false,
"fontSizes": [
{ "slug": "small", "size": "14px", "name": "小" },
{ "slug": "medium", "size": "17px", "name": "中" },
{ "slug": "large", "size": "20px", "name": "大" },
{ "slug": "x-large", "size": "24px", "name": "特大" }
],
"fontFamilies": [
{
"fontFamily": "\"Noto Sans JP\", sans-serif",
"name": "ゴシック体",
"slug": "sans-serif"
},
{
"fontFamily": "\"Noto Serif JP\", serif",
"name": "明朝体",
"slug": "serif"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--gray-light)",
"text": "var(--wp--preset--color--base)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--sans-serif)"
},
"spacing": {
"padding": {
"top": "0px",
"right": "20px",
"bottom": "0px",
"left": "20px"
}
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--secondary)"
},
"typography": {
"textDecoration": "none"
},
":hover": {
"color": {
"text": "var(--wp--preset--color--accent)"
},
"typography": {
"textDecoration": "underline"
}
}
}
}
},
"templateParts": [
{ "name": "header", "title": "ヘッダー", "area": "header" },
{ "name": "footer", "title": "フッター", "area": "footer" },
{ "name": "sidebar", "title": "サイドバー", "area": "uncategorized" }
]
}アーカイブ・フロントページ・404ページについて
index.html のコードをそのまま流用して作ってみましょう。クエリループブロックさえ入っていれば、あとは自分の好きなデザインで一覧を表示させるだけでOKです。
ここはサイトの顔です。通常の投稿ページを表示させず(コンテンツブロックを入れず)、大きなバナー画像や、特定のカテゴリーだけを集めたカスタムクエリループを並べるなど、自由な発想で構成できます。
「ページが見つかりません」の時に出る場所です。検索ブロックを置いて「こっちで探してみてね」と案内したり、ちょっと遊び心のあるイラストを置いたりと、読者をガッカリさせない演出を考えてみましょう。
これらのファイルがなくても index.html が身代わりになってくれるので、サイトが壊れることはありません。こだわりたくなった時に1つずつ追加して、ゆっくり自分のサイトを育ててみてください。
💡 AI × HTMLブロック活用術
ブロックだけではどうしても実現できない「ちょっと凝ったデザイン」や「特殊な動き」を加えたい時、最強の味方になるのが「カスタムHTMLブロック」です。CSSもJavaScriptも埋め込めるので思いのままです。
🛠 カスタムHTMLブロックの使い方イメージ
- AIに「WordPressで使えるおしゃれな404ページ用のHTMLとCSSを書いて」と頼む
- 生成されたコードをコピーする
- エディターで「カスタムHTMLブロック」を追加して貼り付ける
- 「プレビュー」を押して、動いたら完成!
本番前のチェック
手元のバックアップ
テーマフォルダはFTPを使ってダウンロード、または手元ファイルにコピペしておくと安心です。
テスト投稿の整理
不要な「Hello World!」などのテスト記事を削除または下書きにしましょう。
ログイン制限の解除
functions.phpに書いたコードを削除して、一般ユーザーがサイトをみられるようにする。
<?phpナビゲーションの整備
読者がサイトを歩き回れるように「地図(メニュー)」を整備しましょう。
WordPressナビゲーションブロック攻略|UIの変化に惑わされない「考え方」の基本
目次ナビゲーションブロックは「中身が入れ替わる箱」と考えるメニュー選択:2つの組み立てルート「リスト」と「リンク」の違いスマホ表示(オーバーレイ)の正体コラム:「メニュー選択」はどこ? WordPressのバージョンによ […]
CSSを一行も書かずに、ブロックテーマが完成しました。でもこれは「完成」であり「スタート」です。記事を書きながら、少しずつ自分好みに育てていってください😊
最後まで読んでいただき、ありがとうございました。
おつかれさまでした 🍵
