style.cssの基本!Arkhe子テーマで最初に書くべきコードとは?

眼鏡をクイッと上げる銀髪の執事ウィンが登場する「style.css講座」のアイキャッチ画像

ブログのカスタマイズを始めるとさ〜、最初に立ちはだかるのが……そう、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の書き方をマスターしよう♡

👉 functions.phpの基本!Arkhe子テーマで親テーマのCSSを読み込む方法