はじめに
こんにちは!
本日はワードプレスを使っている方で、ネットで拾ったCSSのデザインを自分のテーマにも表示をさせたい人向けの記事になります!
例えば、いちいち<h1>のデザインを毎度CSSを記入してデザインを変更するのは大変ですよね。
この方法を用いれば、一括でブログのタグのデザインを変更することができます!
もちろん途中でデザインを変えたい場合は一つのCSSを編集するだけで一括ですべてのデザインを変更することができます!
また、もしもアフィリエイトなどのかんたんリンク、どこでもリンクのデザインなどもCSSを追加するだけで変更することができます!
非常に便利ですので、使い方をマスターしましょう!
ただ、CSSを追加する場所としては、”追加CSS”、”テーマエディターのStylesheet or Style.css”と大きく分けて2つ存在しております。
その2つの違いについても紹介できればと思います。
1. WordpressのテーマのCSSを直接編集したい!
2. 拾ってきたCSSを追加しておきたい!
3. 追加CSSとテーマエディターの違いを知りたい
ワードプレスのテーマエディターを利用してCSSを編集する方法
まずは、ワードレプスのテーマのCSSを直接編集してデザインを変更する方法を紹介いたします。
こちらを利用していただくと、例えばLion blogの文字サイズや、横幅、色、見出しなどを編集することができます!
テーマエディターを選択
最初に外観→テーマエディターを選択しましょう。
次に右側のStylesheetをクリックしましょう
Stylesheetを選択していただくと、テーマの中にCSSを記述することができます!
ちなみに私がこの記事を書いているときは、Lion blogのテーマをつかっておりまして、その中のul Liタグの点の編集をしたかったので、追加CSSを入れております。
モバイルバッテリーでパソコンが充電できるのご存知でしょうか?
USB PD(45W)ポートがあるAnkerの下記
モバイルバッテリーですとパソコンの充電も可能の
超超超高性能になります!
さらにPC充電用のコードもついているため
こちらを購入するだけまる1日外でパソコン、スマホ生活ができてしまいます!
WordPressの追加CSSの使い方、編集方法
つぎにテーマエディターではなく、テーマの追加CSSの使い方、編集方法を紹介いたします。
こちらも非常に簡単になります。
外観→CSS編集をクリックしましょう
次に追加CSSをクリックしましょう。
クリックしていただくと左側にCSSの編集、追加ができるテキストエディターがでてきますので、ネットなどで拾ったCSSをこちらに貼っていただくだけになります。
ちなみにあとで編集がしやすいように、/* コメント*/でコメントを入れておくと後々それがなんのCSSのデザイン編集をしているのかがわかりやすくなります。
テーマエディターと追加CSSの違いについて
この記事では2つのCSSの編集する場所と使い方を紹介いたしました。
そうするとでてくるのが、 テーマエディターと追加CSSはどう使い分ければいいの?
という疑問になります。ここでは、それぞれの使い分けについて紹介させていただきます。
違いについて
まずは違いについてですが、厳密に言いますと
どちらを使っても問題はありません。
特にどちらかを使わないといけないという決まりはありませんので、極論どちらを使っても問題はありません。
では、どう使い分けるのが良いのかを紹介いたします。
使い分ける方法
では、テーマエディターと追加CSSの使い分けに関して紹介いたします
(あくまで個人の見解になりますので、ご了承ください)
まずは、追加CSSの方で編集する大きなメリットを紹介いたします。
追加CSSを利用する場合、左側に細くエディターがでてきます。その隣に実際のページが表示されているので、
追加CSSを使うとリアルタイムでデザインの変更が確認することができます。
つまり、いちいち更新&ページを見に行くという手間がなくなります。
ただ、見ていただくと分かる通り、テキスト入力するには少し細く感じてしまいます。
その点、テーマエディターの方はテキストエディターが大きくあるので、CSSの編集はしやすいです。
上記を踏まえますと
テーマエディターを使う時
大掛かりなCSSの編集、追記、直接入力をしたい時
追加CSSを使う時
ネットで落ちているものを貼り付け、追加する時
デザインの変更を細かく確認しながら、CSSを編集をしたい時
になります。
ドコモアフィリエイトというASPはご存知ですか?
2020年からドコモが公式で始めたアフィリエイトサービスになります!
まだ認知度は低いですが、他には提供していないドコモのアフィリエイトが多数掲載されているのでおすすめです!
最後に
いかがでしたでしょうか?
意外とテーマエディターと追加CSSの使い分けに関しての記事はなかったので、
使い方に加えて紹介させていただきました!
私もまだまだ初心者ですので、記事を執筆しながら詳しくなれたらと思います!
またブログ執筆をしている方でもHTML、CSS、Javascriptの基礎的な知識はもっていただくことをおすすめしております。下記記事で詳しく紹介しておりますので、気になる方は御覧ください!
人生が変わるかも?本気でプログラミング教室に関して解説しております。
知ってる人はやっている・・・・・
ネットショッピングでポイントを+1%貰う方法はこちらを登録するだけ!
[…] NEW ARTICLE ワードプレスのテーマの追加CSSの使い方、編集、カスタマイズする方法を紹介!追加CSS、テーマエディターの違いは? […]
[…] ワードプレスのテーマの追加CSSの使い方、編集、カスタマイズする方法を紹介!追加CSS、テーマエディターの違いは? 目次 1. はじめに 2. ワードプレスのテーマエディターを利用し […]
[…] ワードプレスのテーマの追加CSSの使い方、編集、カスタマイズする方法を紹介!追加CSS、テーマエディターの違いは? 目次 1. はじめに2. ワードプレスのテーマエディターを利用して […]
[…] ワードプレスのテーマの追加CSSの使い方、編集、カスタマイズする方法を紹介!追加CSS、テーマエディターの違いは? 目次 1. はじめに 2. ワードプレスのテーマエディターを利用し […]
[…] ワードプレスのテーマの追加CSSの使い方、編集、カスタマイズする方法を紹介!追加CSS、テーマエディターの違いは? 目次 1. はじめに 2. ワードプレスのテーマエディターを利用し […]