ワードプレスのテーマの追加CSSの使い方、編集、カスタマイズする方法を紹介!追加CSS、テーマエディターの違いは?

ワードプレスのテーマの追加CSSの使い方、編集、カスタマイズする方法を紹介!追加CSS、テーマエディターの違いは?

はじめに

こんにちは!

本日はワードプレスを使っている方で、ネットで拾ったCSSのデザインを自分のテーマにも表示をさせたい人向けの記事になります!

例えば、いちいち<h1>のデザインを毎度CSSを記入してデザインを変更するのは大変ですよね。

この方法を用いれば、一括でブログのタグのデザインを変更することができます!

もちろん途中でデザインを変えたい場合は一つのCSSを編集するだけで一括ですべてのデザインを変更することができます!

また、もしもアフィリエイトなどのかんたんリンク、どこでもリンクのデザインなどもCSSを追加するだけで変更することができます!

非常に便利ですので、使い方をマスターしましょう!

ただ、CSSを追加する場所としては、”追加CSS”、”テーマエディターのStylesheet or Style.css”と大きく分けて2つ存在しております。

その2つの違いについても紹介できればと思います。

こんな方向け

1. WordpressのテーマのCSSを直接編集したい!

2. 拾ってきたCSSを追加しておきたい!

3. 追加CSSとテーマエディターの違いを知りたい

ワードプレスのテーマエディターを利用してCSSを編集する方法

まずは、ワードレプスのテーマのCSSを直接編集してデザインを変更する方法を紹介いたします。

こちらを利用していただくと、例えばLion blogの文字サイズや、横幅、色、見出しなどを編集することができます!

テーマエディターを選択

最初に外観→テーマエディターを選択しましょう。

wordpress-css-customize1

次に右側のStylesheetをクリックしましょう

Stylesheetを選択していただくと、テーマの中にCSSを記述することができます!

ちなみに私がこの記事を書いているときは、Lion blogのテーマをつかっておりまして、その中のul Liタグの点の編集をしたかったので、追加CSSを入れております。

wordpress-css-customize2

 

おまめの余談

モバイルバッテリーでパソコンが充電できるのご存知でしょうか?
USB PD(45W)ポートがあるAnkerの下記
モバイルバッテリーですとパソコンの充電も可能の
超超超高性能になります!
さらにPC充電用のコードもついているため
こちらを購入するだけまる1日外でパソコン、スマホ生活ができてしまいます!

Anker PowerCore+ 26800 PD 45W (26800mAh 2ポート 超大容量 モバイルバッテリー)【PSE認証済 / Power Delivery対応 / USB-C入出力ポート / USB-C急速充電器付属】iPhone / iPad / Android 他各種対応
created by Rinker

WordPressの追加CSSの使い方、編集方法

つぎにテーマエディターではなく、テーマの追加CSSの使い方、編集方法を紹介いたします。

こちらも非常に簡単になります。

外観→CSS編集をクリックしましょう

wordpress-css-customize3

次に追加CSSをクリックしましょう。

クリックしていただくと左側にCSSの編集、追加ができるテキストエディターがでてきますので、ネットなどで拾ったCSSをこちらに貼っていただくだけになります。

ちなみにあとで編集がしやすいように、/* コメント*/でコメントを入れておくと後々それがなんのCSSのデザイン編集をしているのかがわかりやすくなります。

wordpress-css-customize4

テーマエディターと追加CSSの違いについて

この記事では2つのCSSの編集する場所と使い方を紹介いたしました。

そうするとでてくるのが、 テーマエディターと追加CSSはどう使い分ければいいの?

という疑問になります。ここでは、それぞれの使い分けについて紹介させていただきます。

違いについて

まずは違いについてですが、厳密に言いますと

どちらを使っても問題はありません。

特にどちらかを使わないといけないという決まりはありませんので、極論どちらを使っても問題はありません。

では、どう使い分けるのが良いのかを紹介いたします。

使い分ける方法

では、テーマエディターと追加CSSの使い分けに関して紹介いたします

(あくまで個人の見解になりますので、ご了承ください)

まずは、追加CSSの方で編集する大きなメリットを紹介いたします。

追加CSSを利用する場合、左側に細くエディターがでてきます。その隣に実際のページが表示されているので、

追加CSSを使うとリアルタイムでデザインの変更が確認することができます。

つまり、いちいち更新&ページを見に行くという手間がなくなります。

ただ、見ていただくと分かる通り、テキスト入力するには少し細く感じてしまいます。

その点、テーマエディターの方はテキストエディターが大きくあるので、CSSの編集はしやすいです。

wordpress-css-customize5

上記を踏まえますと

テーマエディターを使う時

大掛かりなCSSの編集、追記、直接入力をしたい時

追加CSSを使う時

ネットで落ちているものを貼り付け、追加する時

デザインの変更を細かく確認しながら、CSSを編集をしたい時

になります。

ドコモアフィリエイトというASPはご存知ですか?
2020年からドコモが公式で始めたアフィリエイトサービスになります!
まだ認知度は低いですが、他には提供していないドコモのアフィリエイトが多数掲載されているのでおすすめです!

新サービスドコモアフィリエイトの記事はこちら!

 

最後に

いかがでしたでしょうか?

意外とテーマエディターと追加CSSの使い分けに関しての記事はなかったので、

使い方に加えて紹介させていただきました!

私もまだまだ初心者ですので、記事を執筆しながら詳しくなれたらと思います!

またブログ執筆をしている方でもHTML、CSS、Javascriptの基礎的な知識はもっていただくことをおすすめしております。下記記事で詳しく紹介しておりますので、気になる方は御覧ください!

TechAcademy(テックアカデミー)のプログラミング無料体験の内容・評価、メリットからできることを紹介いたします!
TechAcademy(テックアカデミー)のプログラミング無料体験の内容・評価、メリットからできることを紹介いたします!
目次 1. はじめに2. TechAcademyとは?2.1. 運営会社2.2. TechAcade […]

 

人生が変わるかも?本気でプログラミング教室に関して解説しております。


知ってる人はやっている・・・・・
ネットショッピングでポイントを+1%貰う方法はこちらを登録するだけ!

WordPressカテゴリの最新記事