WordPress超初心者のためのHTMLとCSSの基礎知識WordPress超初心者のためのHTMLとCSSの基礎知識WordPressはHTMLやCSSの詳しい知識がなくともインストールさえしてしまえばブログが運営できてしまいます。オリジナリティーを出したくなった時、HTMLとCSSの知識がなくてはカスタマイズはできません。わたしはWordPressの初心者の方からカスタマイズの問い合わせをいただきます。その方の多くはそもそもHTMLやCSSを理解されていない方が大半です。そんなHTMLやCSSが何が何だかわからない超超初心者向けにカスタマイズの記事を書いていきたいと思います。何回かにわたり連載していくつもりです。(たぶん)今回はホントに初心者の方へHTMLとCSSの概要と記述方法をざっくりと説明していきます。スポンサーリンクHTMLとCSSWordPressを理解するにはまずHTMLとCSSが何たるかを知っている必要があります。HTML、CSSを理解することができればWordPressを理解するのが容易になるでしょう。HTMLとはブラウザ上で右クリックし[ソースを表示(ブラウザによって異なる)]を開いてみてください。文字列が並びますがこれがHTMLのソースになります。HTMLはWEBサイトのページの文書構造、つまり段落や見出しなどを明確に分けて文書の意味を正確に分類したり整理したり記述します。この記事の上の[HTMLとCSS]は見出しで今読んでいただいているこの文は文章・段落です。このように「ここは見出しですよ」「ここは文章・段落ですよ」と文書構造を記述してWebページを作成していくものがHTMLなのです。CSSとはcssは一般的にスタイルシートと呼ばれているHTMLの表示形式を記述していくものになります。表示形式とは、見た目の部分で文字の色や大きさ、背景色やレイアウトの位置など本文とは関係ないけれど見やすくするための装飾部分を制御するものになります。HTMLとCSS、PHP、JavaScriptなどで構成されたWebアプリケーションです。端折りすぎてちょっと違うかもしれませんがイメージ的にはこんな感じです。WordPressを理解するのにHTMLやCSSを理解して、PHPを勉強して...。難しいことは考えなくても大丈夫です。それぞれのプログラム言語の記述のルールを憶える程度でも、グッとWordPressのカスタマイズの幅が広がります。JavaScriptは動きのある画面を構成したり、計算や情報検索などをWeb上で行うプログラム言語のことで、PHPはサーバー側で動作します。これら個々の説明はまた次の機会に。以下のサイトはWordPressについてくわしい説明が載っているので初心者の方はぜひ読んでいただきたいブログです。WordPressを使ってみようという人の為の予備知識CSSの記述方法CSSは以下のように記述します。値3;}セレクタというのはスタイルを適用する対象を示し、属性というのは後述するidセレクタやclassセレクタがそれにあたります。h2タグのスタイルを指定するときは以下のように記述します。20px;}またスタイルの内容が同じだったらいセレクタを,[コンマ]で複数設置することもできます。20px;}コメントアウトコメントアウトとはCSSファイル内で自分自身がわかりやすいようにちょっとしたメモを入力したりする際に使用します。以下でご紹介しているのはCSSのコメントアウトです。HTML、PHP等はまた別の書き方になりますのでご注意ください。ここがコメントアウト*/スタイルシートの適用方法cssの適用方法で最低限憶えておきたいものは以下の3つです。外部CSSファイルとして記述する<head>内に記述するHTMLのタグに直接スタイルを記述するでは、一つずつ説明していきます。外部CSSファイルとして記述する外部CSSファイルというのはWordPressのテーマではstyle.cssというファイルが用意されています。そのファイルにスタイルを書き込んでいきます。テーマにあるheader.phpの<head>内に外部CSSファイルを呼び出すコードが記述されているためstyle.cssをWordPressに適応させているんです。※テーマによっては若干異なる場合あり。WordPressの既存のテーマをカスタマイズするような場合は特に自分で設置するようなことをしなくてもstyle.cssを修正していくといいでしょう。<head>内に記述するWordPressではheader.phpのhead内に以下の例のように記述するとスタイルを適応することができます。WordPressの場合前ページにこのように記述されてしまいますので特に必要性がなければstyle.cssに書き込む方法がいいでしょう。type=”text/css”は外部CSSに記述する場合は不要です。HTMLのタグに直接スタイルを記述するWordPressでは記事を書くときに使う場面が多いかもしれません。いつも黒にしているh2の見出しを一カ所だけ文字色を赤にしたいという場合などに使ったりします。style="color:red">これはH2タイトル</h2>セレクタの種類セレクタとはスタイルを適用する対象のことを言います。セレクタの種類は多数存在しますが最低でも頭に入れておきたいものは以下になります。基本セレクタ(タグ)idセレクタclassセレクタ基本セレクタ(タグ)セレクタとしてタグを指定しスタイルを適用させます。タグとはh2やh3、pやimgなどのHTMLで文書構造を作っているしるしの事です。タグは種類は多数存在しますが<●●>で始まり</●●>で終わるものがほとんどです(hrなど例外あり)例:HTML部分<h2>雨ニモマケズ</h2>CSS部分h2{font-size:24px;}id(アイディ)セレクタcssの書き方を説明した際に属性というものがありました。idセレクタは特定のid属性を持ったタグに対してスタイルを適用させるものです。id="midashi1">風ニモマケズ</h3>CSS部分#midashi1{color:red;}class(クラス)セレクタidとほとんど同じで、classセレクタは特定のclass属性を持ったタグに対してスタイルを適用させるものです。class="midashi2">雪ニモ夏ノ暑サニモマケヌ</h3>CSS部分.midashi2{color:blue;}POINTIdとclassのちがいについてidは1ページに1つしか使用しません。CSSでスタイルを指定する際には#(ハッシュ)を使用します。classは1ページで複数回利用することができます。CSSでスタイルを指定する際には.(ドット)を使用します。イメージ図CSSはこんな感じh2{font-size:24px;}h3{font-size:20px;}#midashi1{color:red;}.midashi2{color:blue;}まとめHTMLとは文書構造を構成するものCSSとはHTMLの表示形式を構成するものWordPressを知る上でHTMLとCSSの最低限の知識は必要WordPressを勉強するのにWordPressの初心者向けの本を買う以前にHTMLとCSSに関する本を読んでみることをおすすめします。WordPressの情報はネット上に溢れているので、検索するとわからないことの大半が解決できますが、HTMLとCSSは書籍などで勉強する方がはるかに効率がいいですよ。記事URLhttps://shufulife.com/wp-lesson1/お使いの端末ではこの機能に対応していません。下のテキストボックスからコピーしてください。【エクセル帳簿】決算時に行うこともっと見るブログの中の人ちゅんこ@shufulife意識低い系主婦。夫と娘(5歳)と仲睦まじく暮らしています。毎日楽することばかり考えて、お手本はアニメ「あたしンち」のお母さん。Shufulife本サイト内にある記事や画像などの一切の無断転載を禁じます。