【WordPress】Webサイトのレシピ

この記事の目次

1.1. HTML・CSSとは？
1.2. WordPressにおけるHTMLの入力方法
1.3. CSS設定の変更方法

2.1. 目次
2.2. 小見出し（H2）
2.3. スライダー

1. HTML・CSSについて学ぶ

1.1. CSSとは？

CSSの話を説明をする前にまずはWebページの構成について説明しておきます。

大雑把に言ってしまうと、WebページはHTMLというプログラミング言語によって書かれたファイルを読み取ることで表示されます。
HTMLにはdivタブやpタブと言った要素があり、要素に対してフォントやBOXの大きさなどを指定することでWebページを修飾しています。修飾はstyleを指定することで実現しており、個々のタブを定義する毎にstyleを定義するが可能です。加えて、HTML内にstyleタグを設定するかCSSファイルを作成・参照することでも各タブに対してstyleを適用することができます。
styleタグやCSSを利用するメリットは同じ要素に対する変更を一括で管理できることにあり、多くのWebページではCSSファイル海苔用によりstyleを実装しています。
HTML、CSSはそれぞれ
HTML（Hyper Text Markup Language）：Webページの構成を設定するための言語
CSS（Cascading Style Sheets）：HTMLで記載された文書を装飾するための言語
です。

簡単に言ってしまうと、
HTML：Webページの枠組みや骨格を作るための設定
CSS：HTMLで定義された内容を装飾するための設定

CSSでは多様な設定ができますが、最も簡単な例では文字のサイズ・色・フォントを設定できます。具体的には以下のようになります。

See the Pen Untitled by Tsunekawa (@notsunekawa) on CodePen.

文字の他にも画像の大きさや透過度やアニメーションを追加することができます。
下の画像にマウスを載せると画像の大きさが小さくなり、透過度が高くなり後ろが透けるようになります。

See the Pen Untitled by Tsunekawa (@notsunekawa) on CodePen.

1.2. WordPressにおけるHTMLの入力方法

前回の記事でも説明した通り、WordPressを使ったWeb制作ではHTMLやCSSのような言語の理解は必須ではありません。テーマの導入や導入したテーマをカスタマイズすることでWebページを作成することはできるでしょう。

しかし、実際にテーマの導入やカスタマイズだけでは思った通りの設定が出来ないこともあるため、自分好みのWebページを作ろうと考えるといずれHTMLやCSSを勉強することになると思います。

「HTMLとは何か？」「HTMLで何ができるのか？」などはもっと詳しく書いてあるWebサイトにお任せするとして、当コラムではWordPressの投稿画面でHTMLを入力するための基本的な操作を説明します。

新規追加画面を開く

まずは、WordPressの投稿か固定ページの新規追加画面を開きます。

下の写真は投稿の新規追加画面（編集画面）になります。導入しているテーマやプラグイン、WordPressのバージョンによって若干表示されている内容は違うかもしれません。

カスタムHTMLブロックの追加

次にブロック追加ボタンを押下し、『カスタムHTML』を選択します。
リストに表示されていない場合には、検索するか『すべて表示』ボタンを押下します。

実際に文字を入力してみる

『カスタムHTML』のブロックを追加して文字を入力したのが次の画像です。
上が通常のブロックで、下がカスタムHTMLになります。
編集画面
プレビュー画面

HTMLブロックを選択・入力すると、タグ（この場合はpタグ）入力できるようになります。
各Webブラウザがパソコンやスマホに画面を表示する際にはこれらのタグが識別され1つのまとまりとして理解されるため＜p＞は表示されることはありません。

HTMLブロックを使用しない場合には、タグが自動的に設定され＜p＞などは文字として認識されそのまま表示されます。

1.3. CSS設定の変更方法

カスタムHTMLを使わないで文字を入力する場合には、文字の色・フォントの大きさ・太字などの設定をブロック内で変更することが可能です。また、追加できるブロックも文字入力だけでなく、ボタンやカラムなどを選択できます。

対してカスタムHTMLを使用する場合には、HTMLに加えてCSSを準備する必要があります。CSSは「.css」拡張子を持つファイルを作成し書き込みを行うことで設定を行います。どのCSSファイルを読み込むかはHTML内で定義され、「style.css」と定義することが一般的だと思われます。

WordPressを利用している場合には「style.css」の中身に追記するための画面が用意されています。外観ー>テーマファイルエディターを選択します。

選択した際にデフォルトで当画面が出てきるかと思いますが、念の為
①：編集するテーマを選択が「Cocoon Child」されていることを確認する。
②：編集するファイルが「style.css」であることを確認します

誤った編集した場合に元に戻せるようにしておくためにも、必ず編集する際には必ずバックアップを取るようにして下さい。

2. HTML・CSS適用例

HTMLやCSSの大枠や編集方法がわかったとしても、もっと具体的にどのようなことに利用しているかを説明した方がイメージしやすいでしょう。

そこで当ページで実現している以下の3つについてHTMLとCSSの内容を細かく見ていきましょう。

目次
小見出し
スライダー

2.1. 目次

まずは目次になります。当WebページのTOPにもあったかと思いますが、Webページで説明していることの概要を記載しています。

See the Pen 目次 by Tsunekawa (@notsunekawa) on CodePen.

抜粋にはなりますが、まずHTMLについて説明していきます。

<div class="agenda">
<span>この記事の目次</span><br>
　<ul>
　　<a href="#h0">見出し2レベルの目次</a><br>
　　<li><a href="リンク先のid">見出し3レベルの目次</a></li>
　</ul>
</div>

divタグを使ってBOXを定義し、その中にulタグ、liタグを使用して箇条書きをしています。

ulタグは「unordered list」の略で、箇条書きのようにリスト形式で記載するために使用するタグです。リストの項目は「li」タグで記載します。行頭文字は黒丸・白丸などを選択できますが今回は行頭文字を表示しない設定にしています。

「この記事の目次」はspanタグで装飾していますが、これはなくても表示可能です。
spanタグ自体はulタグやliタグのように意味を持つタグではなく、デザインの調整に使われるタグです。
目次では色を変えセンター寄せにするためにspanタグを使って他の文字と区別しています。

また、aタグを使うことで遷移先のリンクを指定しています。設定可能なリンクは「https://www.amazon.co.jp/」と言うようなurlや同一ページ内の特定のidを指定することができます。当ページ内ではH2タグとH3タグにidを指定しており、目次をタップするとジャンプするように設定してあります。

2.2. 小見出し（H2）

次は見出しの設定になります。
WordPressではキーカラーを設定していればH2タグも同様の色になりますが、
少しこだわったH2タグを作ることもできます。

See the Pen Untitled by Tsunekawa (@notsunekawa) on CodePen.

div.h2_custom{
  margin-top: 2.4em;
  margin-bottom: 1.62em;
  background-color: #2999c4;
  width:400px;
}

実際のWebページではH2タグ自体に背景色（background-color）や余白（margin）が設定されており、内部に「div class=”h2_custom”を定義してプロパティを設定することで文字色や下線を引いています。

しかし、見本（CodePen）ではH2タグを作る理由はないのでdivタグに背景色（background-color）や余白（margin）を設定しています。下線の設定について細かく見ていきます。

div.h2_custom span{
  （中略）
  border-bottom: solid 3px #ffc778;
}

div.h2_custom span:after {
  （中略）
  position: absolute;
  display:block;
  border-bottom: dashed 3px skyblue;
  bottom: -3px;
  width: 50%;
}

まずはspanタグを設定し、プロパティで下線（border-bottom）を定義しています。文字の全体にある黄色の下線はこのプロパティ設定によって実現されています。

次に擬似要素：afterを設定し、プロパティで点線の下線（border-bottom）を定義し、幅を50％にすることで途中で切れるようになっています。bottomを-3pxとすることで下線部の太さ分上に移動させてspanタグのプロパティと重なるようにしています。

2.3. スライダー

どこかのサイトに書かれていたものを少しだけアレンジして使用させてもらってます。

See the Pen Untitled by Tsunekawa (@notsunekawa) on CodePen.

まずはアニメーションを理解するにあたってCSSの以下のコード（設定）の意味を説明したいと思います。

.css-slider:before {
  （中略）
  animation: slide 20s ease-in-out  infinite;
}

slide:アニメーションの定義名。@keyframesで定義する定義名と揃える必要有り。
20s:遷移にかかる時間。
ease-in-out:アニメーションの速度を指定。
infinite:アニメーションを無限に繰り返すことを指定。

「@keyframes」とはcss内でアニメーションの開始から終了どのような遷移をするか定義することができます。具体的な設定内容を確認していきましょう。

@keyframes slide {
  0%, 20% {
    transform: translateX(0);
  }
  25%, 45% {
    transform: translateX(-20%);
  }
  （中略） 
  100% {
    transform: translateX(-80%);
    animation-timing-function: steps(1, end);
  }

「@keyframes slide{…」から始まる宣言で、『.css-slider:before』内で定義したslideというアニメーションの詳細を記載しています。

次に中身を見ていきます
0%, 20% {…}⏩アニメーション開始から20％（開始から1/5なので4秒間）を表しています。 transform: translateX(0)⏩ X座標を数値に移動させるという処理になります。
25%, 45% {transform: translateX(-20%);} ⏩ 開始から5秒から9秒の間はX座標を-20％の位置に配置することになります。

開始から20％から25％（開始4秒から5秒）と間を設けているのは、遷移を急速にすることができるためです。間隔を連続させてしまうと開始から0％〜25％に時間徐々に画像が移動してtranslateX(0%)からtranslateX(-20%)に遷移することになります。

アニメーションの理解を深めるために、次にHTMLの要素を説明していこうと思います。

まずは、要素の配置としては図のようになっています。 divクラスとして”slider”を用意しており、擬似要素として”slider:before”を使用しています。

要素”slider”を設定することで要素の大きさを定義しておき、裏で横幅が5倍ある擬似要素”slider:before”に背景画像を配置する設定になっています。
背景画像の1枚目だけリピート設定をrepeat-xにしておくことで、1〜4枚目が左から並んだあとに再度1枚目が配置されるようになります。

アニメーションは先述の通り、
0〜4秒間は”slider:before”の左端を”slider”のX座標を0に合わせています。

4〜5秒間で”slider:before”の左端を”slider”のX座標-20％に移動させます。 -20％移動することで、”slider:before”の1/5部分（スライド①）が”slider”の左側に移動することで、スライド②（”slider:before”の20％から40％）が表示されるようになっています。

この移動を繰り返して19秒後まで先へ進めます。
19秒から20秒の間で”slider:before”の80％から100％を表示するように遷移します。
20秒になったタイミングでアニメーションは終了しますが、
アニメーションは「infinite」に設定されているため再度始めるようになっています。