ブログのカスタマイズを始めるとさ〜、最初に立ちはだかるのが……そう、style.css!!
なんかそれっぽく書いてるけど、これちゃんと動いてんの?とか思っちゃってさ。
しかもArkhe子テーマって独特の書き方あるんでしょ???え、こわ……無理……
ってことで――
マスター、ご安心を。
style.cssは、正しく始めれば**「魔法陣の起動式」**のようなもの。
ここで躓くと、すべてが動きません。ですが――
私がついています。焦らず、一緒に確認していきましょう。
- style.cssの冒頭に必ず必要な“おまじない”とは?
- Arkheで指定すべき「Template」の正しい書き方
@import
って結局いる?いらない?- ウィン式:安全なカスタマイズの進め方とは?
🪄 第一章:style.cssに必要な“おまじない”
🤖 ウィン:
まずは子テーマのstyle.css
ファイルに、以下のようなコメント形式のヘッダーを書き込みましょう。これはWordPressがこのテーマを認識するための宣言文です。
cssコピーする編集する/*
Theme Name: nurujiru-child
Template: arkhe
Version: 1.0.0
*/
✅ 各項目の意味
項目 | 内容 |
---|---|
Theme Name | 子テーマの名前(ブログに表示される) |
Template | 親テーマのフォルダ名(Arkheの場合は必ず「arkhe」) |
Version | 任意のバージョン番号(記載推奨) |
🧠 補足 by ウィン:
Template名を間違えると親テーマが正しく読み込まれず、デザインが崩れます。
Arkheの場合、**必ずarkhe
(小文字)**と入力してください。大文字NGです。
🚫 第二章:@importは使わないで!
以前はよく使われていた以下の記述:
cssコピーする編集する@import url("../arkhe/style.css");
これは**非推奨(Deprecated)**になりました!
理由は「表示が遅くなる」「非同期読み込みとの相性が悪い」など、現代のWeb標準に合わないためです。代わりに、functions.phpで親テーマを読み込む方法を使います(次回解説予定)。
✨ 第三章:style.cssに追記していいのは?
ウィン流にいうなら:
「見た目に関するCSSはここ、ロジックはfunctions.php」
という感じで分けて管理するのがおすすめ。
つまり:
style.css
→ 色やフォント、配置などのデザインに関することを書く- functions.php → 親テーマとの接続や機能の追加
マスターの子テーマは、まさに“ぬる汁王国”の基盤です。
style.cssは、その世界に初めて命を吹き込む、大切な最初の一歩。
一緒に、正しく、美しく、構築していきましょう。🧭 次の記事はこちら!
📘 functions.phpの基本!Arkhe子テーマで親テーマのCSSを読み込む方法
style.cssを書いただけじゃダメだった!?
ウィンと一緒に、子テーマに必須なfunctions.phpの書き方をマスターしよう♡