Yutabolg

Learning is the best asset

WordPress

WordPressでカスタマイズしよう!【CSS編】

投稿日:2020年6月14日 更新日:

初めて、WordPressを始めるとき、「どうやってWordPressをカスタマイズするの?」「別ファイルからカスタマイズできるの?」など、いろいろなことが分かりませんでした。。
おそらく、この記事を見てくださっている皆さんも「CSSカスタマイズの方法」で困っていらっしゃる方が多いと思いますので、上記の内容を紹介していきます!

対象となる読者

  • ✔ CSSカスタマイズの方法を知りたい!
  • ✔ そもそもHTMLとCSSが分からない
  • ✔ WordPressの見栄えを良くしたい!

読み終えるとどのような知識が手に入るか?

  • ✔ CSSによるカスタマイズ方法
  • ✔ HTML,CSSの基礎知識
  • ✔ 記事の見栄えが良くなる!

 

HTML,CSSとは?

WordPressで初めてCSSに出会った人は、「CSSってなんだ??」みたいな感じになると思います。
そもそもCSSとは、「見栄えをよくする」ための言語であり、「誰でもいじれるくらい簡単!」というのが特徴です!
それでは、まず初めに、HTML,CSSの特徴として、何点か上げていきたいと思います!

HTMLは画面に表示される文字を表しており、どんなものを作る場合でも必須の知識になります。
HTMLのマークアップの仕方を知っておくと、自由にタグの設定ができるので一度学んでおくことをお勧めします!

CSSはHTMLでマークアップしたもののスタイルを整える言語であり、簡単に言うと、色を変えたりフォントのサイズを変えたりすることができます!
簡単なCSSの知識をインプットとしておくと見栄えの良いサイトを作成できるので必須の知識であると思います!

  • HTMLは画面に表示される言語
  • CSSで見栄えをよくできる
  • WPでは初歩的な知識で大丈夫

ということで、HTMLやCSSはどうやって学べばよいのでしょうか?

HTML,CSSを学ぶには??

基礎的なHTML,CSSを学習するには、何個も方法がありますが、手っ取り早い方法として、3っつ紹介いたします!詳しくは、下記関連リンクより飛んでいただければ幸いです。

Progate

エディタがなくても学べる!

月額1,000円で学べる学習ツールで、丁寧な解説と分かりやすいイラストが特徴的です!
HTML,CSSの基本的な部分は無料で公開されているので、ほんとに入門的な部分だけやりたい!って方にお勧めです!

Dotinstall

3分動画で空き時間に学べる!

Progateとは異なり、動画を使ってやります!また、これも基礎的な部分は無料で学べるので、お金がかかりません!
しかし、動画がメインなので、自分でエディタを用意する必要があります!
※エディタの例として、「VSCode」「Atom」「Brackets」などがあります!インストールの仕方等についてもDotinstall内で紹介されているので、ご参考にしてください。

忍者コード

無料で基礎知識をつけられる!



忍者コードは最近(2020年度)できたばっかりの新しいツールであり、メインの教材は「模写教材」となっていますが、それとは別に、無料で学べるツールが沢山あります!
実際に使えることを意識した教材なので、とても実用的です!

これまでの内容を詳しく紹介した回があるので、ぜひそちらも見てみてください!

おすすめのWeb制作学習コンテンツ

ちなみに、「もう少し、基礎を固めたい!」って方は、これらをやってみてください!2冊とも実際に私が取り組んでわかりやすいと思ったものなので、是非お試しを~

1冊ですべて身につくHTML&CSSとWebデザイン

ちなみに、Progateが終了して、「もっとWebの勉強をしてみたい!」と思って取り組んだ参考書は、以下となります!

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

CSSカスタマイズ方法

お待たせしました!ここからが本記事の本題です!
どうやってWPのCSSカスタマイズをすればよいのでしょうか?
2つの手順を紹介いたします!

追加CSS

初歩的なカスタマイズ方法です

1.外観のカスタマイズをクリックする!

2.追加CSSをクリック!

とここまでは、順調だと思うのですが、少しここからプログラミングをやった事がない!って方は難しいところなので、頑張ってください!!!!

3.検証ツールを使う

ここでは、変更したい箇所に振ってある「class」や「id」を調べます!
その後、そのクラスに対して追加した機能をcssで記述していきます!

下図のボタンをクリック!

動画をチェック!!

最初から動画使えよ!って感じですが、写真を撮るのが面倒になってきたので、動画を貼ります!笑

Image from Gyazo

4.CSSを書く!

検証ツールで取得したclassやidにCSSを追加します!
例えば、下図のサイトの名前を変えてみたいと思います!

上の写真を見てみるとわかるように、「Yutablog」というサイトの名前には、「sitename」という「class」がふられていることが分かります!なので、このclassに対してCSSを適用して、にしてみたいと思います!

しかし、「あれ??」「Yutablog」が赤くなっていない!!
というのも、もともと全体のCSSは別ファイルにまとめられており、そちらに書かれているCSSが優先されて「カスタマイズの追加CSS」に書かれているCSSは優先度が低いためです!
固定ページといったインストール初期からあるページに関してCSSを適用する時には「カスタマイズの追加CSS」からCSSを変更するのは好ましくありません!

と言いつつも、無理やり「color:red!important;」とすれば、優先度が最上位になるので、CSSを無理やり変更できますが、お勧めはしません!

基本的に、「カスタマイズの追加CSS」から変更する場合は、下図のように自分で作った投稿をカスタマイズする場合です!

上図のように、HTMLで要素を生成し、先ほどの「カスタマイズの追加CSS」で下図のように指定すると、スタイルが適用されます!!
※いつも私が使っているおしゃれなCSSデザインは「サルワカ」というサイトで紹介されているので参考にしてみてください!

HTMLに書く

おすすめはしません

HTMLの要素に直接CSSをstyleで書く方法がありますが、やめておいたほうがいいです!

1.汎用性がない

繰り返し使うことができないので、同様のスタイルを何度も書かなければなりません!
ですが、marginやpaddingを部分的に指定したい場合は積極的に使用しても良いかと思います!

2.管理しずらい

CSSがうまく適用されない場合に、何が悪いのかを発見しずらいです。

テーマエディタで編集

とても便利です

テーマエディタ」が一番優先度の高いCSSファイルとなっているので、ここに適宜CSSを記述していきましょう!
ここにはすべてのCSSファイルがあるので、CSSを管理しやすく、コーディングが楽です!
ちなみに、自分で書いた投稿を編集するには、1の方法でCSSの追記をしてください!
しかし、1で紹介したように、固定ページやヘッダー情報といったインストール当初からあるCSSのカスタマイズにはこちらで紹介している「テーマエディタ」から編集をしてみてください!

外観からテーマエディタへ

テーマエディタを開いて「スタイルシート」という箇所に、CSSを記述していきましょう!
先ほども言ったように、自分の投稿内容を編集するには、1で紹介した方法でやってください!

ちなみに、WordPressのプラグインやその他の機能については、いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教える本格Webサイトの作り方 「いちばんやさしい教本」シリーズを使って学習するとよいかと思います!

うまくまとまりませんが、こんなところで失礼いたしやす!
質問があれば、コンタクトフォームより質問をお願いいたします!

-WordPress
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

関連記事はありませんでした