【初心者向け】ワードプレスのやり方 HTML/CSSってなぁに?

2017年8月10日

 

 

 

うえのさん
こんにちは~! 姫路のホームページ屋さん うえのです(@flexbox)です。

 

4回シリーズで、ワードプレスのキホンのキをお話しします。

 

前回は、ワードプレスは、ホームページとブログのハイブリッド!
で、ホームページとブログのいいとこ取りをしてますよってお話でした。

 

 

 

第2回は、HTMLとCSSのお話。

 

 

見慣れない英語はブロックしたいですね^^;

 

「ワードプレスを使うのに必要なところだけ」ちょっと知るとオトクな話しを聞いていきませんか?

 

ガチな話は鼻血が出そうになるので、「そんな事言ってたな~」くらいにゆる~くしていきます。

イメージ感でどんなものか分かるのが目的なので、今回も「ふーん。」でいいですよ。

 

 

ホームページやブログは、ネット上のお店にたとえるとわかりやすい

 

よくネットやワードプレス本の説明で、「ブログはインターネット上の建物やお店ですよ~」

 

 

そんな説明をされていますが、土地がレンタルサーバー・建物の住所がドメイン。

 

 

その先の建物やお店自体の事って気になりませんか?

 

 

 

あなたが自分でお店を持った時、店の大きさや看板、外装や内装を自分の好みに仕上げたい!

 

 

ワードプレスのブログでも、文字や背景の色、レイアウト、記事の装飾で好みに仕上げれるんです。

 

 

テンプレート(テーマ)や追加機能(プラグイン)の機能をそのまま使いますが、テンプレートの文字色や背景色を変える命令がCSSです。

 

 

順番に説明していきます。

 

 

 

HTMLとCSSって何なの?

 

 

建物には骨組みが一番大事です。その次に、壁や床。サッシなど外装・内装になってきます。

 

 

骨組みは、建ててしまうと簡単に変更できません。

 

 

しかし、外装と内装は変更が可能ですね。

 

 

 

 

 

HTMLは骨組み! CSSは外装・内装!

 

 

 

 

骨組みを作るHTMLに、CSSで飾り付けるイメージ。

 

 

 

 

ホームページなどを作る時、コンピューターに表示させる命令がHTMLとCSSになります。

 

※ CSSは、ホームページのスタイルを整えるので「スタイルシート」ともいいます。

 

 

 

 

例で実際にやってみます

 

 

 

ワードプレスのキホンのキ
HTML/CSSって?あなたは、大工さん。家を建てます。

 

 

これを見出しと本文の命令を書いてみます。

 

 

命令文は<h1>~</h1>のように<>と< />で文字をサンドイッチ。

 

 

これをマークアップといいます。

 

 

実際のマークアップ風景を録画してみました。

 

 

 

 

 

 

上の動画を文字で解説

 

 

見出しが
<h1>ワードプレスのキホンのキ< /h1 >

本文が
<P>HTML/CSSって?あなたは、大工さん。家を建てます。< / p>

 

 

 

h1・h2・h3・h4は、見出しのHTML。

Pは、段落を表すHTML。

 

 

 

見出しを赤文字にしたいので命令は、

h1 { color : red ; }

{color : red ;}は、文字色は赤というCSSです。

 

 

 

完成するとこんな風になります。

 

ワードプレスのキホンのキ

HTML/CSSって?あなたは、大工さん。家を建てます。

 

 

イメージできましたか!?

 

 

 

実際にはまだ命令を書くのですが、イメージだけで十分です(^^)
書くのはWebデザイナーのお仕事です^^;

 

 

 

 

よく聞く「コード」と「タグ」。苦手だよって言わないで。

 

HTMLタグのお話をしましたが、マークアップするh1などをh1タグと言い、ホームページの骨組みを作ります。

 

 

コードはカタマリを指していて、<h1>ワードプレスのキホンのキ< /h1 > のマーカー部分などです。

 

 

ワードプレスに、アクセス解析などの長いプログラムを埋め込みますが、このプログラムはコードになります。

 

 

ちなみに、ブログ名のFLEXBOXもコードの名前をパクりオマージュしました^^;

 

 

 

ワードプレスが真っ白になるのはこんな原因かも?

 

トラブルを避けるためにも覚えておいてほしい事です。

 

 

ワードプレスを便利に使うために、プラグインという追加機能やアクセス解析などのコードを追加していきます。

 

 

この時に、ワードプレスの本体にコードを埋め込むと次の瞬間真っ白になって、頭も真っ白になってしまいます。

 

 

理由は単純で、長い命令文の中に貼り付けたコードが割り込んでしまった。。。。

 

 

いままで命令を出していたところが壊れたので、ワードプレスの骨組みも壊れてしまった。

 

 

では、壊さないよう安全にアクセス解析などのコード入れる場所を教えます。

 

 

 

 

htmlの構造を知る

 

コードは<body>~</body>のあいだに入れる!って言われてもわからないよ

 

ですよね~。

 

少し構造の説明聞くと、もう迷わない!

 

 

HTMLの構造は定型文で決まっていて、下の図のようなマークアップが基本形です。

 

 

イメージでは、「大きな箱の中にさらに小さな箱を入れていく」です(*^^*)

 

 

 

 

htmlは赤い箱

ホームページやワードプレス全体をスッポリ入れる器。

 


headは白い箱

文字通りホームページやワードプレスの頭脳。ブログの名前や動きを出すプログラムなど、本文には出てこないけど大事な情報を書く場所。

 

 

bodyは黄色い箱

ここに、ホームページやワードプレスの記事・アクセス解析コードや広告のコードなど、よく書き換えるものが入る場所。

 

HTMLとCSSのまとめ

 

いかがでしたか?たくさん見慣れない英語がならんでたので、シャッター下ろしそうですか^^;

 

ワードプレスのいいところは、訳の分からないあの英語は覚える必要ないってところです。

ちょっと知ってると文字化けしても慌てませんよ。

 

 

うえのさん
うえのでした。(@flexbox)