【WordPress, The Thor)】 『追加CSS』以外でcssを追加する

wordpressにcssの追加するとき、この狭い『追加CSS』に頑張って入力していませんか?

うまく保存されない、入力しにくいなど、何かと使いにくい。。と感じていませんか?

実は、the thorでは、”style-user.css” を使用することで、『追加CSS』と同様にcssの編集ができます。

比較的書きやすく、保存されないトラブルも少ないので、この方法でのCSSの編集を紹介します。

style-user.cssの編集方法

Point!

  • 子テーマ(the thor child)を編集すること
  • style.cssではなく、style-user.cssを編集すること

style-user.cssの場所

スタイルシート編集用のファイルがthe thor内にあります。

外観 ⇒⇒ テーマファイルエディター を選択。

次に編集するテーマを選択。今回の ”The thor child” を選択。

間違って親テーマを選択しないように注意してください

The thor childの、”styele-user.css” を選択。間違って、”style.css”を選択しないようにしてください。

style.cssにも注意書きで以下のように書いてあります。

独自のスタイル(CSS)を追加する場合は、
現在開いている「style.css」ではなく、
style-user.cssを編集してください。

styele-user.cssは、何もcssを追加していいなければ、コードが何も書かれていないファイルが表示されると思います。

以下で、このstyele-user.cssにコードを追加していきます。

style-user.cssにcssの追加

後は、基本的に『追加CSS』の使い方と同じです。

一部のtagにcssを追加する場合は、タグ名.class名{}で記述します。

その後、各ブロックの『追加 CSS クラス』にclass名を書いて、更新します。

私の例で行くと、<h2>と<h3>にcss を追加するためにstyle-user.cssに以下のように記載しています。

以下のようにcssを追加したいブロックの高度な設定『追加CSSクラス』にclass名を記述すると、cssが追加されます。

まとめ

あんな狭いところにひたすら打ち込むより遥かに楽だと思います。笑

ぜひこの方法でのcss追加してみてください。

最新情報をチェックしよう!