【コピペでできる】HTMLとCSSを使って機能の「ある」「なし」を色分けして表示する方法 | Knowledge Base

HTMLとCSSを使って機能の「ある」「なし」を色分けして表示する方法

文字で表現するのが難しいので最初にイメージを・・・

こんな感じにする方法です。

敢えて文字で表現するとすれば、何かの機能とか、共通である/なしを表示したい項目のあるサイトなどで全部の項目を表示しつつ、これは「ある」、これは「ない」を表示する方法です。カタログサイトなどでよく使われている表現と言えば一番ピンと来るかも知れません。

これを作ったきっかけは

Knowledge Base内の園芸サイト。植物図鑑と上手な栽培の仕方、病気や害虫対策、実際の栽培日記などを掲載しています

のサイトのコンテンツで植物たちの紹介をしたり、公園の案内をしたりするとき、例えば害虫の種類を全部表示しておいてその植物に付きやすいものだけ色をつけるといった感じで使用しています。

基本的にコピペで作れますし、Wordpressであればテキストエディタに貼り付ければすぐに表示できますから是非試してみてください。

今回は3列、4列、5列(特にWordpressの本文幅で使用すると思われる列数)の作り方を1回のコピペでできるようにしています。

HTMLとCSSを使って機能の「ある」「なし」を色分けして表示する方法

CSSへ追記するデザインコード

3列、4列、5列どれでも対応できるように以下をそのままコピペしましょう

/********** 機能や設備などのテーブル **********/
/******* テーブル全体 *******/
/*** 3列表示 ***/
table.select_table3 {
    width: 100%;
    border-collapse: inherit;
    border-spacing: 5px;
}
/* 設備や機能がある場合 */
td.select_on3 {
	width:33%;
    background: #ffeb3b;
    border: 2px solid #ff9800;
    text-align: center;
    font-size: smaller;
	border-radius:8px;
}
/* 設備や機能がない場合 */
td.select_off3 {
	width:33%;
    background: #9e9e9e;
    border: 2px solid #8a8888;
    text-align: center;
    font-size: smaller;
    color: #fff;
    border-radius:8px;
}
/*** 4列表示 ***/
table.select_table4 {
    width: 100%;
    border-collapse: inherit;
    border-spacing: 5px;
}
/* 設備や機能がある場合 */
td.select_on4 {
	width:25%;
    background: #ffeb3b;
    border: 2px solid #ff9800;
    text-align: center;
    font-size: smaller;
	border-radius:8px;
}
/* 設備や機能がない場合 */
td.select_off4 {
	width:25%;
    background: #9e9e9e;
    border: 2px solid #8a8888;
    text-align: center;
    font-size: smaller;
    color: #fff;
    border-radius:8px;
}
/*** 5列表示 ***/
table.select_table5 {
    width: 100%;
    border-collapse: inherit;
    border-spacing: 5px;
}
/* 設備や機能がある場合 */
td.select_on5 {
	width:20%;
    background: #ffeb3b;
    border: 2px solid #ff9800;
    text-align: center;
    font-size: smaller;
	border-radius:8px;
}
/* 設備や機能がない場合 */
td.select_off5 {
	width:20%;
    background: #9e9e9e;
    border: 2px solid #8a8888;
    text-align: center;
    font-size: smaller;
    color: #fff;
    border-radius:8px;
}

ちょっと長いコードですが、上からそれぞれ3列の場合、4列の場合、5列の場合となっていますので必要に応じて部分的に使っていただいてもかまいません。

囲み線はborder要素、背景色はbackground・・など基本的なCSS要素のみですので色の変更は適宜おこなってくださいね。

また、コードは下へ追記したものが優先して適用されますから、テーマのCSSの一番下へ追記するようにしてください。

挿入したい場所へ記述するHTMLコード

WordPressの本文であれば、テキストエディタにしてから以下のコードをそのままコピペした後、文字列を変更すればすぐに適用されます。

※もしもうまく表示できないときはブラウザのキャッシュをクリアしてみてください
【3列表示する場合のhtmlコード】

<table class="select_table3">
<tr>
<td class="select_on3">1段め列1</td>
<td class="select_on3">1段め列2</td>
<td class="select_off3">1段め列3</td>
</tr>
<tr>
<td class="select_on3">2段め列1</td>
<td class="select_on3">2段め列2</td>
<td class="select_off3">2段め列3</td>
</tr>
</table>
コードは2段分になっていますが、
<tr>
<td class="select_on3">2段め列1</td>
<td class="select_on3">2段め列2</td>
<td class="select_off3">2段め列3</td>
</tr>
が一段分になるので、適宜追加・削除すればOKです。

コードの中にある「select_on3」「select_off3」が黄色にするか灰色にするかの違いになりますから、それぞれのコンテンツで切り替えをしてください

【4列表示する場合のhtmlコード】

<table class="select_table4">
<tr>
<td class="select_on4">1段め列1</td>
<td class="select_on4">1段め列2</td>
<td class="select_off4">1段め列3</td>
<td class="select_off4">1段め列4</td>
</tr>
<tr>
<td class="select_on4">2段め列1</td>
<td class="select_on4">2段め列2</td>
<td class="select_off4">2段め列3</td>
<td class="select_off4">2段め列4</td>
</tr>
</table>
段を増減させる方法は3列の場合と同じです

コードの中にある「select_on4」「select_off4」が黄色にするか灰色にするかの違いになりますから、それぞれのコンテンツで切り替えをしてください

【5列表示する場合のhtmlコード】

<table class="select_table5">
<tr>
<td class="select_on5">1段め列1</td>
<td class="select_on5">1段め列2</td>
<td class="select_on5">1段め列3</td>
<td class="select_off5">1段め列4</td>
<td class="select_off5">1段め列5</td>
</tr>
<tr>
<td class="select_on5">2段め列1</td>
<td class="select_on5">2段め列2</td>
<td class="select_off5">2段め列3</td>
<td class="select_off5">2段め列4</td>
<td class="select_off5">2段め列5</td>
</tr>
</table>
段を増減させる方法は3列の場合と同じです

コードの中にある「select_on5」「select_off5」が黄色にするか灰色にするかの違いになりますから、それぞれのコンテンツで切り替えをしてください


以上、だれでも簡単にコピペでできるHTMLとCSSを使って機能の「ある」「なし」を色分けして表示する方法でした。

おまけ ボタン化していつでもすぐに挿入できるようにしておこう

WordPressにはこうしたコードをボタン化できる便利なプラグインがあります。

定型HTMLタグや定型文をボタン1つで挿入できる、Wordpressプラグイン「Add quick tag」は昔からある定番のプラグインですが、本当に便利でどんどんボタンを増やしたくなってしまうほどシンプルかつ高機能な無料追加プラグインなので、あえてご紹介

これを使ってあらかじめHTMLコードをボタン設定しておけば、投稿編集画面からいつでも呼び出して使うことができます。

トップへ戻る