これだけは知っておきたい! ブログ初心者にとってのHTML/CSS【WordPress】

HTMLとCSS
藤依しの
藤依しの

Webデザインについて勉強中の藤依しのです。

「ブログ初心者だけど、HTMLの知識って必要?」
「webデザインにこだわりたいけど、よくわからない…」

と思う皆さんに
一通り『HTML/CSS』の勉強を終えた僕が、初心者が知っておくべき前提知識についてお伝えしたいと思います。

「これからブログのデザインを変更する」って人はぜひ参考にしてください。

※この記事は『WordPress』を利用して作成したブログにのみ当てはまるものです。
『ライブドア』『Ameba』などのブログサービスは利用したことがないのでわかりません。ごめんなさい

スポンサーリンク
スポンサーリンク

Webデザインの仕組みの話

HTMLとCSSの違い

仕組みはサラッと画像で説明します。
簡単に言えばこう。

HTMLとCSSの違い

HTMLは「何を表示するか」を表し
CSSは「どう表示するか」を表します。

ななしちゃん
ななしちゃん

HTMLで指定する内容は、かなりアバウトですね。

藤依しの
藤依しの

そうですね。
たとえば「ミカンを2つ並べて」って言っても、それが横並びなのか縦並びなのかは、完全に自由です。

とりあえず

  • 表示するものを変えたいならHTML
  • 表示する見た目を変えたいならCSS

とでも覚えておけば良いでしょう。

で、こう言うと初心者は
「お、じゃあ表示するもの変えたいから、HTMLを編集すれば良いんだな!」
って考えるかもしれません。

藤依しの
藤依しの

それは半分あってますが、半分ちがいます!

ななしちゃん
ななしちゃん

えっ。

HTMLは初心者が手を出すものじゃない

『WordPress』などを利用して作成したブログでは、基本的に「HTML」はいじりません。

WordPressでは、初心者が直接HTMLを編集するような仕組みにはなっていないのです。

もちろんレイアウトの直接編集ができないわけじゃないです。
が、正確に言うと編集するのはHTMLファイルではないので、また別な知識が必要です。

WordPressにてレイアウトを変更したい場合は、管理画面の『カスタマイズ』『ウィジェット』などを利用してください。

HTMLの知識がなくてもWebサイトを作成できるのが『WordPress』の良さです。

ブロガーがいじるのはHTMLではなくCSS

一方でCSSについての知識はあったほうが良いです。

これは何故かと言うと、ブログを運営していく中で『見た目に関するこだわり』は絶対に出てくるからです。

だって、せっかく自分だけのメディアがそこにあるのに、一生ダサいブログのままで終わらせるなんて嫌でしょう?
本気でやっていないとしても、せめて見た目くらいは整えたいと考えるのが普通です。

そして幸運なことに、CSSは比較的簡単で、大体ネット検索で出たものをコピペで終わります。

しかし、中にはコピペで終わらないものもあるので、延々と悩み無駄な時間を使うくらいなら最低限の知識を付けて「どれくらい時間をかければできるのか?」くらいは何となく分かるようになったほうが良いでしょう。

藤依しの
藤依しの

というわけで、ここからはCSSについて説明していきます。

CSSでできること・できないこと

CSSについて

先程、CSSについて『どう表示するかを指定するもの』だと言いました。

ただそれだけじゃよく分からんと思うので、もう少し具体的に『できること・できないこと』を説明します。

できること : 見た目を整える・簡単な動きを付ける

「ちょっと文字の色を変えたり、枠線を付けたり、後ろに影を付けたりしたい…」

そういうのはCSSを使えば簡単にできます。

あるいは、マウスカーソルを載せた時や、クリックした時の動作なども指定できます。
さらに最近では簡単なアニメーションなども実装できるみたいですね。

ななしちゃん
ななしちゃん

もう全部こいつだけで良いんじゃないかな?

ただしできるのは、あくまで『用意されている装飾をほどこす・変更する』ことだけであるのには注意です!
クリック時などのアニメーションも、あくまで「そういう仕組みが用意されているから」できるだけで、そういうプログラムが組めるわけじゃありません!

藤依しの
藤依しの

簡単にできそうだと思っても、実はCSSだけじゃ実現できないものもあります…
それが次のようなこと。

できないこと : 動作によって見た目を変える

「ここのボタンを押した時は、こんなメッセージを表示したい…」
「現在いるページを判断して、一部の装飾を変えたい…」

そういうのはCSSではできません。
他の知識が必要になるので、それなりに時間がかかります。

たとえば僕は、「カテゴリーページにいる時は、対応カテゴリーのアイコンを大きくする」ってことをやろうとしたんですが
調べたところ、どうもCSSだけじゃできないみたいでした…

一度こだわり始めると、やりたいことがたくさん出てくるのがブロガーのさが。

ただブロガーはあくまでブロガー。『記事を書く』のが仕事です。

細かい動作の実装に時間を掛けるよりも、CSSで変更できる部分だけサッと整えてしまうのが良いんじゃないでしょうか。

※ただし、画面サイズでレイアウトを変えるのはできる

動作によってレイアウトを変更することは無理ですが、
いわゆる『レスポンシブデザイン』と呼ばれる『スマホ版とPC版で見た目を変える』ことは比較的簡単にできます。

ただ、WordPressテーマを使用していれば、必要なことは大体勝手にやってくれるのであまり気にすることはないかもしれません。

ここでは「レスポンシブデザインは難しくない」とだけ覚えておいてください。

CSSの編集方法

『テーマの編集』は非推奨

具体的なCSSの記述方法は置いておくとして、最低限どこでCSSを編集できるのかは知っておいたほうが良いでしょう。

よく知られているのが『テーマの編集』
管理画面を開き、左のメニューから『テーマの編集(テーマエディター)』を選ぶと、CSSが編集できます。

テーマの編集

…が、ここで編集しない方が良いです!

その理由がこちら

  • テーマによっては、元のCSSを破壊する恐れがある
  • CSSの反映が確認しづらい

なので初心者は、この場所でCSSを編集しないでください。

初心者は『追加CSS』を使うべき!

WordPressには上記の問題を解決する仕組みがあります。

それがこちらの『追加CSS』

追加CSSの場所

『外観 ▶ カスタマイズ ▶ 追加CSS』と進むことで『追加CSS』の画面に移動できます。
ここにCSSを記載することで、画面への反映を確認しながら、安全にCSSを適用することができるのです。

追加CSS

ちなみに『追加CSS』へ書いた内容は、テーマの更新があっても消えません。

よくCSSについて調べると『親テーマ・子テーマ』についての話が出てくるのですが、『追加CSS』を使うなら、一旦その話は忘れてもらって大丈夫です。

元のCSSに、上書きするようなイメージ

『追加CSS』を使用すること前提で話しますが、ブロガーにとってのCSS編集は
『何もない部分に飾り付ける』のではなく
『すでにある飾りの一部を取っ払って、新しい飾りを付ける』イメージです。

あなたのブログには「ヘッダー・記事一覧・サイドバー」などが表示されていますが、それらにはすでに『テーマ』によって何らかの装飾がほどこされています。

ここに新しいCSSを追記すると、追記した部分だけが「追加・変更」されます。

わかりやすく画像で説明するとこう。

CSSのイメージ

追記していない部分に関してはそのままであることに注意してください。

なぜこんな話をしたかというと、このイメージを覚えておけば「コピペで上手くいかない!」なんて時に、焦ることがなくなるからです。
たとえば同じ『ヘッダー』でも、テーマによって元のCSSの内容が異なるので、単純なコピペは思い通りの見た目にならないことがあるのですね。

元のCSSは『要素の詳細』『検証』などで探す

ななしちゃん
ななしちゃん

じゃあその『元のCSS』ってどうやって確認するんですか?

藤依しの
藤依しの

一番簡単なのは、ブラウザで確認することです。
たとえば『chrome』では、ブラウザ画面での右クリックから『検証』という機能が使えます。

検証

これはブラウザのレイアウト、つまり『HTML』を確認できる機能ですが、ここからCSSについても調べることができます。
ただ、ちょっと複雑なので、HTMLが読めないと混乱するかもしれません。

ななしちゃん
ななしちゃん

あれ?さっきHTMLの知識はいらないって言ったじゃないですか。

藤依しの
藤依しの

あれは嘘だ。

ななしちゃん
ななしちゃん

おい。

藤依しの
藤依しの

ごめんなさい。本当は少しだけいります。
ただ、1からHTMLを組み立てられるレベルの知識はいりません。
読んで何となく理解できる程度で大丈夫です。

できれば『HTML』についてもお話したいですが、わかりやすく説明しようとすると長くなるので割愛。
今は「ブラウザ使えばHTML/CSSは確認できるんだなー」ってことだけ覚えておけば良いです。

CSS編集は最終手段である

ここまでCSSの話をしてなんですが、あくまでCSS編集は最後の手段です。
できるなら『テーマの設定』から変更することが望ましいのです。

たとえば僕の使用している無料テーマ『Cocoon』であれば、CSS記述を行わずとも、画面からこれだけカスタマイズできます。

Cocoonカスタマイズ
ななしちゃん
ななしちゃん

こんなにカスタマイズできるならCSSに頼ることなんてそうそうなさそう。

藤依しの
藤依しの

初期テーマですらそれなりに変更できるのが、WordPressですので
CSSで変更しようとする前に、自分が使用しているテーマのカスタマイズにどんなものがあるのか、確認すべきです!

いくら簡単なCSSだと言っても、知識がなければそれなりに時間がかかりますから、テーマでカスタマイズできるに越したことはないのです。

まとめ

まとめると、ブログ初心者が知っておくべきことは

  • HTMLは「何を表示するか」、CSSは「どう表示するか」を決める
  • HTMLはいじらない
  • CSSは元のテーマを上書きするイメージ
  • CSSを使うよりテーマの機能でカスタマイズする方が早い

です。

こういう前提知識を知っておけば、「こうしたい!」と思った時、必要な情報を集めやすくなります。

『具体的な方法』ばかりが求められる現代ですが、
実際に『HTML/CSS』について勉強してみて、それだけじゃかえって遠回りになる場合があることに気づき、自分へのメモも兼ねてまとめてみました。

CSSについて学ぶなら『Progate』がオススメ

無料で『HTML/CSS』が学べる

藤依しの
藤依しの

最後にちょっと宣伝タイム。
こちら『Progate』

Progate
https://prog-8.com

Webサイト上で、手を動かしながら『HTML/CSS』について学べる優れものです!

説明が画像付きでわかりやすい上に、段階的に教えてくれるので、それほど難しさも感じません。
Webに特化した学習サイトなだけあって、サイトデザインもGood。

アカウント登録は必要ですが、GoogleやSNSなどのアカウントで登録できるので、それほど手間はかかりません。

藤依しの
藤依しの

そして何より無料!※『HTML/CSS』の初級コースに限ります

ななしちゃん
ななしちゃん

Web上で手を動かしながらって言うのが良いですね。
動画を見るだけじゃすぐに忘れますし、セミナーや講座は時間や場所が指定されるので面倒ですし。

藤依しの
藤依しの

そして何より無料!!※『HTML/CSS』の初級コースに限ります

月額980円で、Webデザイン全体について学べる

『Progate』は無料で利用しても良いですが、
月額980円を払えば、『HTML/CSS』についてよりしっかり学べます。

学んだ知識を活かして実際にwebサイトを作ってみる『道場』や
『HTML/CSS』と並んで、よく耳にする『Javascript』『php』などのコースもあるので、
少しでもWebデザインに興味があるなら、お金払って損はないはずです!

それでは。