18．WordPressでウェブサイトのトップページをつくる(HTMLとCSS①)

いよいよ、トップページの完成が近づいてきました。
ただ、今回はHTMLとCSSのコードの記述という少し高度な作業をします。

職業訓練時代に購入した「いちばんよくわかる　HTML5＆CSS3のデザイン　きちんと入門」(SB Creative)とインターネットの情報を頼りに作っていきます。

HTMLとCSS

まずは、HTMLとCSSについて簡単に説明します。

HTMLはサイトに表示させるテキストと画像に〝タグ〟をつけることができます。

CSSは、そのタグに色、サイズ、フォントをはじめとしたデザインを指定できます。

このふたつを組み合わせることで、多種多様なウェブサイトのデザインを実現します。

HTMLで記述
①タイトル
②メニュー１
②メニュー２
②メニュー３
③本文

CSSによってデザインの調整
①のカラーを赤くする
②のサイズを小さくして横一例に並べる。
③のサイズを大きくして、色は青にする。

①②③がタグで、そのタグをCSSで指定します。

実際はもっともっと奥深いですが、ざっくりと説明するとこのような仕組みです。

HTMLとCSSを編集する

では、デザインの編集をしていきます。

実際に行うのはCSSの記述です。

それには、表示されている文字などがどのようにHTMLで記述されているかを確認する必要があります。
ダッシュボード画面から探してみましたが、探し方が悪いのか見つけることができませんでした(どこかにはあるとは思いますが・・・)

そこで、方法を変えてHTMLを確認します。

まず、ブラウザで制作しているサイトを開きます。

右上のオプションを開き、【その他のツール】→【デベロッパーツール】を起動します。

右側にHTMLやCSSのコードが表示されました。
<body class～> から </body>の間の内容が、ブラウザで表示される部分です。

CSSで「body」タグを指定して変更を加えるとbody内、つまりサイトに表示される全要素に変更が適用されます。
※優先順位を設定することで、一部分だけ異なる変更をかけることもできます。

では、実際に編集していきます。編集するのは以下の項目です。

・フォントの種類とサイズの変更
・スライド画像と全幅見出しの間の空白の削除
・全幅見出しの幅
・テキストウィジェットとアイコンウィジェットの間隔を調整
・SNSアイコンをフッターの間隔を調整
・フッターメニュー下の空白の削除とcopyright下の文字の削除

フォントを編集する

サイトのフォントを変更します。
ダッシュボード画面から【外観】→【カスタマイズ】と進みます。

【追加CSS】とクリックします。

テキストエディタにCSSコードを記述します。
【デベロッパーツール】の「body」タグのCSSをコピーします。これを追加CSSに貼り付けて編集します。

編集後です。フォントは「font-family」の最初に記述されたものほど優先順位が高くなります。ブラウザは表示できるフォントの中で一番優先順位が高いものを表示します。
CSSを編集すると、表示が変わります。
今回は第一フォントに游ゴシックの追加と、サイズを変更をしています。
ひとまず「公開」して、ブラウザで表示を確認します。