HTMLとCSSの仕組み
こんばんは、しろもじです。
「小説家のためのブログ運営」の記事も随分増えてきました。
WordPressを使ってのブログ構築と運営の仕方を解説してきたわけですが、一つ大きなものを放置してきました。
それが「HTML」と「CSS」です。
解説してこなかった理由は、忘れて……ではなくて（笑）あまり重要だとは思わなかったからです。
この辺は考え方にもよるのですが、ブログを「コンテンツ重視」で考えるのならば、CSSなどの知識は後回しにした方がいいと個人的に思ったわけですね。
しかし、そうは言っても多少のカスタマイズをしたいこともあるかもしれません。
そこで今回はざっくりになりますがその辺りを解説していきたいと思います。
WordPressの場合であれば、ほとんどの場合CSSだけ知っていればいいのですが、仕組みとしてHTMLのことも理解しておく方が良いと思いますので、簡単に解説しておきます。
HTMLとは？
HTMLとはHyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）の略で、ウェブサイトを記述するための言語になります。
文章（テキスト）や画像にリンクを貼ったり、文章の段落を指定したり、文章の構造を記述したりするものですね。
例えば上のタイトル「HTMLとは？」という部分は「H2」という見出しが設定されています。
改行毎に段落も指定されています（それが良いのか悪いのかは別としてWordPressでは改行すると、自動的に段落が設定されるようになっている）。
ここをクリックするとトップページに戻ったりするのも、HTMLでリンクが設定されているからです。
これらはタグというものを記述することで利用することができ、例えば上のH2などでしたら
<h2>HTMLとは？</h2>こんなふうに記述されています。
始めの「<H2>」が「ここからH2タグが始まるよ〜」という意味で、その後にH2タグの中身である「HTMLとは？」という文章が続きます。
最後に「</H2>」で「ここまでね」と締めるわけですね。
リンクの設定であれば
<a href="http://textfield.net">ここ</a>このように「<a>」というタグが使われています。
その後ろにある「href="http://textfield.net"」の部分が「リンク先」になります。
これでタグに挟まれた文字列（ここ）に「textfield.net」へのリンクが張られるという仕組みになっています。
このように、HTMLとは「文章、及びその構造やリンクなどの基本設定が記述される」と理解すればOKでしょう。
WordPressでは自動的にHTMLが記述される
とは言え、WordPressを使っている限りでは、これらは意識することはありません。
リンクや見出しもボタンで設定できますからね。
ただそれは、普通WordPress記事を記述する「ビジュアルモード」の機能で実現できているというわけなんですよね。
ブログの記事を書くエディタの右上に、上の画像のタブがあると思います。
ビジュアルモードは「ブログ記事を書くするモード」ですね。
文字を打つこと、上部にあるボタンでリンクを張ったり画像を挿入したりなどが、簡単に行うことができます。
ビジュアルモードで打ったものは、自動的にHTMLに変換されます。
それが「テキストモード」で見ることができます。
この記事の冒頭辺りをテキストモードで見てみましょう。
ちょっと小さいですが、このようになります。
※<p>タグは段落のタグです。
このように、普通にWordPressを使って記事投稿する場合には、HTMLの存在をあまり知らなくても問題ないんですよね。
ただ、ビジュアルモードで記事を作成していくと、極稀におかしなことになってしまうこともあります。
その場合はテキストモードで確認するのが良いですね。
タグなどの詳細については、また別の記事で書いていきます。
CSSとは？
CSSとはCascading Style Sheet（カスケーディングスタイルシート）の略で、ウェブサイトの装飾（スタイル）を指定するものです。
先ほどのH2の例で言えば、文字を大きくし左に見出しであることを示す青い棒を表示させているのがCSSになります。
元々HTMLは、単純なテキストと画像を扱うものだったのですが、ウェブサイトが普及してくると「ちょっとは飾りがあった方がいいんじゃない？」ということになり、HTML内にそれらのタグが使われ始めました。
しかしブラウザ（インターネットエクスプローラーやChrome、Safariなど）の仕様によって見栄えが異なったり、ページごとに装飾をしていかなくてはならないことがメンテナンス性の悪さに繋がりました。
そこで、記述と装飾を分けようということになりCSSが誕生しました。
こうすることで装飾に関する部分はひとつの（もしくは複数の）ファイルに書き込んでおくことで、色々なページでそれを適応できるというわけです。
便利ですよね。
CSSでは文字の大きさ、フォント、文字色、要素の配置などを行うことができます。
WordPressではCSSはテキストモードでみることはできません。
また、ある程度ならビジュアルモードでの確認ができるようにもなっています。
H2のタグを指定すると、CSSからH2用の装飾部分が適応され、ビジュアルモードでもWebページとほぼ同じ状態で確認できると思います。
CSSは通常「style.css」というファイルに書き込まれています。
デフォルトではダッシュボードの左のサイドバーから「外観」→「テーマの編集」で見ることができます。
CSSシートは複数存在する
WordPressを既に運用されている方はご存知だと思いますが、テーマというものがありますよね。
これはWordPressで作ったサイトを表示させるために必要なもので、見た目や使い勝手に関するもの全てが格納されたものになります。
テーマの中にはCSSも入っています。
このため、WordPressテーマを更新するとCSSの内容も上書きリセットされてしまうことになります。
これはこれで不便なので、テーマの中には子テーマというものを持っているものがあります。
簡単に言うと小テーマはWordPressテーマの中の見た目に関する部分だけを抽出したようなものです。
つまりCSSの塊であると思ってもらってOKです。
テーマ自体にもCSSは存在していますので、CSSはふたつあることになります。
WordPressに適応させるテーマは子テーマを使いますので、ここにカスタマイズする内容を記述していくわけです。
もちろん親の方のテーマも使われますが、小テーマが優先されるので装飾は子テーマのみに行えばいいというわけですね。
ちょっと分かりにくいかもしれませんが、単純に「WordPressのカスタマイズは子テーマで行う」ということを覚えておけばいいでしょう。
ちなみにほとんど場合、テーマのアップデートは親テーマの方で行います。
まとめ
HTMLとCSSは、それほど難しいものではありませんが、内容的にはたくさんのものがあります。
そのため１ページで説明しきれない部分があり、今回はざっくりしたアウトラインのみの解説となりました。
冒頭でも書きましたが、HTMLとCSSの知識はWordPressサイトを運用していく上で必須ではありません。
しかし、デフォルトのテーマを少しカスタマイズしたくなったときや、ビジュアルモードで記事を作成していておかしくなったとき、またはGoogle Search Consoleなどでエラーがあった際には、多少知っている方が問題の解決が早くなります。
今後、代表的なものに絞って当サイトでも解説を進めていきますが、あくまでも「参考程度」になりますので、本格的に勉強したいという方はCSSリファレンスガイドなどの書籍を買った方が良いでしょう。
個人的には１冊くらい持っておけばOKだと思います。
今日も最後までご覧頂きまして、ありがとうございます！
WordPressを使ったブログ構築の記事一覧は「小説家のためのブログ運営」のページにまとまっていますので、よかったらご覧くださいね！