【初心者向け】スタイル変更の具体的なやり方を説明しますリストとテーブル

どうも、ぽっぽです。

ワードプレスで子テーマを使ってスタイルを指定する手順を説明しました。

【ワードプレス】子テーマでスタイル更新

具体的なスタイル変更をいくつかのテクニックを交えて説明しました。

【初心者向け】スタイル変更の具体的なやり方を説明します

今回は、リストとテーブルのレイアウト変更について説明します。

ワードプレスで必要だと思ったスタイル変更を例にしています。

リストのレイアウト変更

リストはいわゆる箇条書きのHTML要素です。

いくつかの項目をひとつひとつ分けて書き並べることです。下手な長い文章にするより、箇条書きにしたほうが分かりやすくなることがあり、ブログではよく用いられます。

メリットやデメリットを列記したり、要点を表現するによく使う要素です。上の画像だとシンプルすぎるので目立たせたほうが良いと思います。

ちなみに、文字色が黒ではないのは、href属性のためです。

僕のスタイルはこのようなスタイルです。

.entry-content ul {
    background-color: #f8f9ff;
    border: 1px dashed #4865b2;
    margin: 15px;
    padding: 15px;
}

ダッシュ線で要素を囲い、背景色で目立たせています。

こちらを子テーマのスタイルシートに追記します。

自分で調整したのはマージンなどの位置合わせです。背景やダッシュ線は他のブログを参考にしました。

テーブルはいわゆる表を表現するHTML要素です。表計算ソフトやプレゼンテーション資料でよく使われます。

ワードプレスでは、簡単に表を追加することが出来ます。何行何列かを指定すると表が作成されます。実際はグーテンベルク（Gutenberg）というエディタの機能です。

しかし、HTML要素のtable,tbody,tr,tdで作成されています。ヘッダが必要な場合はHTML編集でthead,thのHTML要素を直接編集します。

エディタで各要素単位でHTML編集出来る機能があります。

上がエディタでシンプルにテーブルを追加したもの、下がHTML編集をしてthead,thを使って再編集したものです。

thead,thは独自に追加したのでスタイル定義はありません。

thead,thについてスタイルを指定します。

thead th {
    font-size: 1.2em;
    background-color: #cbcbdc;
}

こちらを子テーマのスタイルシートに追記します。

上がヘッダ行がないテーブルで、下がヘッダ行があります。

行単位で色が変わっているのはエディタの機能でストライプ設定にしたためです。

HTMLを変更し、スタイルを指定したのはテーブルの１行目です。

ヘッダはデータの内容を補足説明する上でとても重要だと思いますので、追加するようにしたほうが良いと思います。