シェアする

意外と簡単!ワードプレスで自作テーマ作成-L5 CSSを適用していく-

ワードプレス

ワードプレスで自作テーマ作成シリーズ
今回は「Lesson L5 CSSを適用していく」方法をご紹介します。

CSSはウェブサイトのデザインを指定する言語で、「style.css」に記述していきます。

 

①メインビジュアルの大きさの調整

見るデバイスの画面幅によって異なるのですが、現在のメインビジュアルは幅100%に指定されていません。
なのでブラウザで100%表示にしてメインビジュアルの画像がはみ出してしまっています。
それを幅100%にしてどの画面幅のデバイスで見ても画面幅に画像が収まるように指定します。

画面からはみ出ているメインビジュアル

Theme Editor」の「style.css」に以下を記述し更新してください。

画像の幅を100%に指定することで画像が画面幅に対して100%の大きさで反映され、右側の女性も表示されるようになりました。

画面に収まったメインビジュアル

②文字色やリンク文字色の等の指定

Theme Editor」の「style.css」に以下を記述し更新してください。

上記で何を指定しているのか解説します。

body {
color: #555;
}

ウェブサイト全体の文字色を指定しています。デフォルトでは黒ですが、真っ白い背景に黒文字だと見にくいので灰色にしています。

a {
color: #1111cc;
text-decoration: none;
}

「color: #1111cc;」はリンク文字色を指定しています。リンク文字色はそのリンクのクリック率に影響を及ぼすこともありますのでなかなかあなどれません。ある調査によるとリンク文字色を変えただけで年間売上高が8000万ドル増加したという例もあります。ちなみにこの「#1111cc」という色ですが、青でGoogleが採用しているリンク色になります。

「text-decoration: none;」はデフォルトではリンク文字に下線が入ってしまうのでそれを消しています。

a:visited {
color: #660099;
}

訪問済みのリンク文字色を指定しています。「#660099」は紫色でこちらもGoogleが採用している色になります。

③コンテナの作成

Theme Editor」の「style.css」に以下を記述し更新してください。

コンテナの大きさは今後使う事を考えて3つの大きさを用意しました。Lサイズは1440px、Mサイズは1280px、Sサイズは1000pxです。この値は任意の値に変更しても大丈夫です。

グローバルナビゲーションが少し右に動いています。これはグローバルナビゲーションを含むコンテンツがMサイズの1280px内に収まっているからです。

コンテナの幅の調節後

ちなみに現在、ホームページのコンテナサイズはMサイズを使用しています。これは、「header.php」で<div class=”container-m“>で指定しています。この「m」を「s」や「l」に変更してもOKです。

header.phpの記述

④グローバルメニューを横並びにする

現在グローバルメニューは縦並びになっていています。このグローバルメニューを横並びにしていきましょう。

コンテナの幅の調節後

Theme Editor」の「style.css」に以下を記述し更新してください。

以下のように横並びになりました。位置など合ってませんので指定していきます。

グローバルメニューを横並びにする

⑤グローバルメニューの調整

Theme Editor」の「style.css」に以下を記述し更新してください。

以下画像のようにグローバルメニューが整いました。何を指定したのか、解説していきます。

グローバルメニューの調整後

list-style: none;

項目前の●を消しています。

justify-content: flex-end;

グローバルメニューを右詰めにしています。

display: block;

aはインライン要素です。文字のちょうど上しかクリックできませんが、display: block;にすることで文字のちょうど上でなくても文字付近にカーソルを合わせればクリック可能にできます。ボックスと同じ感覚になる感じです。

padding: .3em .5em;

文字間の隙間を指定しています。

Toi

お疲れ様でした!次回はトップページのレイアウトを整えていきます。

今回は「トップページのレイアウト」方法をご紹介します。アイキャッチ画像を有効にして、トップページにはブログのように記事一覧を表示できるようにしていきます。