WordPress講座(個別相談)

Webサイトに追加する会社概要やイベント概要などを表形式で作成するときに、項目が膨大すぎて入力し忘れたことはありませんか?私はあります。

そんなときは「しっかり確認しましょう」と書けば済みますが、それでは面白くありません。入力し忘れた項目に警告でも表示されれば便利ですね。公開前にチェックできます。

入力し忘れた項目に警告

入力し忘れた項目に警告

CSSの「:empty」擬似クラスを使うと、要素が空かどうか判別してスタイルを設定することができます。「表のセルが空だったら背景色を赤く」のように使えば「入力し忘れた!」のチェックに役立ちますが、次のような表形式の予約状況一覧でも役立ちます。

予約が入っていない日を目立たせる

予約が入っていない日を目立たせる

予約が入っていないセルが空であれば、「:empty」擬似クラスを使って「空いてます」などのメッセージを表示することができます。

「セルが空だったら背景色を変える」のように条件判断が必要なときはPHPで記述するのかと思って諦めてしまいそうですが、CSSで実現できるのでアイデア次第でいろいろ気軽に活用できそうですね。

もちろん活用例はこれだけではありませんが、ひとまず「入力し忘れ」と「予約が入っていない日付」の2つのケースについて具体的なCSSの例を紹介します。

スポンサーリンク

入力し忘れたセルに警告として背景色を変える

次の会社概要は電話番号の入力を忘れています。

電話番号の入力を忘れている

電話番号の入力を忘れている

この程度で気づかないことはないと思いますが、あくまでサンプルなので突っ込みは不要です。電話番号が入っていないことを警告するには次のようなCSSが役立ちます。

/* 空のセルの背景色を赤くする */
#content .tablepress td:empty {
    background-color: red;
}

「外観」-「CSSカスタマイズ」メニュー(BizVektorの場合)または子テーマのstyle.cssに入力してください。

ここで使った「:empty」は空の要素にマッチする擬似クラスです。電話番号を入力すべきセルが空なので警告の意味で次のように背景が赤くなります。

未入力のセルの背景が赤くなる

未入力のセルの背景が赤くなる

「#content .tablepress」はテーマにBizVektor、プラグインにTablePressを使ったときのCSSセレクタです。その他のテーマやプラグインでも少しセレクタを変えるだけで使えるはずです。

予約が入っていない日に「空いてます」と表示

表形式で予約状況などを示す場合、予約のないセルは空っぽになるかもしれません。

予約のない日のセルが空になっている

予約のない日のセルが空になっている

空いている日を目立たせるため、次のようなCSSを入力して予約のない日に「空いてます」と表示してみましょう。

/* 予約のない日のスタイルを設定 */
#content .tablepress td:empty {
    background-color: green;
}

#content .tablepress td:empty:after {
    content: '空いてます';
    color: #fff;
}

「content」で要素に文字を追加できますが、:empty擬似クラスに設定してもうまくいかないので、:after擬似クラスを使って要素の後に「空いてます」を付加しています。

表示結果は次のようになります。

予約のない日に「空いてます」と表示

予約のない日に「空いてます」と表示

空かどうか判断できるのはセルだけではない

:empty擬似クラスでチェックできるのは表のセルだけではありません。たとえば、次の箇条書きは3番目の要素が空です。

<ul class="ul01">
<li>一郎</li>
<li>次郎</li>
<li></li>
<li>史郎</li>
</ul

これも:empty擬似クラスでチェックできます。

#content .ul01 li:empty {
    background-color: red;
}

表示結果は次のようになります。

空の要素が赤くなる

空の要素が赤くなる

まとめ

このようにCSSの:empty擬似クラスを使うと空の要素に対してスタイルを設定することができます。ここで紹介したケースの他にもカレンダー形式のスケジュール管理やイベント予約など、アイデア次第で幅広く活用できると思います。参考にしてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク