Xeory_Extensionのカスタマイズ CSS編

前回子テーマを作成したので、今回は子テーマを作成していきます。親テーマの読み方など色々ありますが、現在は下記の記述で動作させています。

/*親テーマのスタイル読込*/
/*@import url(“../xeory_extension/style.css”);*/

/*トップページヘッダー画像*/
#header #logo {
  padding: 0 0;
}

/*ブログアイキャッチ画像の調整*/
.post-thumbnail img {
  padding-top: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

まずCSSの上書きについてですが、親テーマにあるCSSのファイル名だけ同じにして、中身はコピーしなくて大丈夫です。

WordPressの機能で子テーマのファイルを見て、子テーマに描写に必要なファイルが存在しない場合、親テーマのファイルを使用する様になっています。

次にCSSの特性ですが、CSSは何重にも上書き出来て、基本的に一番最後に指定した命令に従います。そのため、僕のやり方ですが、セレクタ名を追加して部分ごとに変更させていきます。(色とか幅とかを指定するという事です。)

まだ調べきれていませんが、インクルードについては、上記のソースコードの1,2行目でも一応試してみたのですが、エラーになってしまうのでコメントアウトしています。まだ勉強不足なので分かれば解決したいですが、今のところ動作に問題は無いので放置しています。

実際にCSSを書き換えているのが4行目以降です。４行目のCSSはヘッダーの右上の画像の隙間を消しています。

修正前

f:id:hpptms:20170921220710p:plain