上下の比較ができるリストボックスを作る【コピペカスタマイズ】

上下比較のリストボックスを作りました。

完成サンプルがこちらです。

塩分比較

高

カップラーメン
焼きそば
カレーライス
梅干し
味噌汁
炊き込みご飯

低

左側にある単位は自由に変更できます。

唐辛子比較

辛い

ドラゴンズ・ブレス
キャロライナ・リーパー
トリニダード・モルガ・スコーピオン
トリニダード・スコーピオン・ブッチ・テイラー

甘い

カラーバリエーションは5色用意しました。

デフォルトはオレンジになっています。

それでは作り方を見ていきましょう！

対象者

この記事はWordPressユーザー、かつ初心者向けに書いています。

クリックでジャンプ

上下を比較できるリストボックスの作り方

上下を比較できるリストボックスの作り方

手順は以下の通りです。

手順

STEP1
CSSコピペ
style.cssにコードをコピペ
この手順を見る
STEP2
HTMLコピペ
記事エディターにコードをコピペ
この手順を見る
STEP3
色を変更
必要であればCSSとHTMLにコードをコピペ
この手順を見る

色がデフォルトで良い方はSTEP3は不要です。

STEP1：CSSをコピペ

CSSをコピペしていきます。

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

CSSが反映されない場合はスーパーリロード(Ctrl+F5orShift+F5)してください。

Copy

/************************************
** 上下比較リストボックス
************************************/
.compare-list-box * {
  margin: 0 !important;
  padding: 0 !important;
}
.compare-list-box {
  margin: 2em auto !important;
  padding: 4.5em 2em 1.8em !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  background: #fff6f2;
  border-radius: 4px;
  max-width: 600px;
  position: relative;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .07);
}
.compare-list-box .compare-list-box-title {
  padding: 0.5em 0 !important;
  background: #ffa883;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
  text-align: center;
  border-radius: 4px 4px 0px 0px;
  position: absolute;
  bottom: calc(100% + -40px);
  left: 0;
  width: 100%;
}
.compare-list {
  position: relative;
  margin-left: 40px !important;
}
.compare-unit-top {
  position: absolute;
  top: 8px;
  right: calc(100% - -13px);
  font-size: 14px;
  font-weight: 400;
  color: #393f4c;
  width: 45px;
  text-align: right;
}
.compare-unit-bottom {
  position: absolute;
  bottom: 8px;
  right: calc(100% - -13px);
  font-size: 14px;
  font-weight: 400;
  color: #393f4c;
  width: 45px;
  text-align: right;
}
.compare-list ul,.compare-list ol {
  padding: 1em 0 1em 1.2em !important;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  border-left: 2px solid #ffa883;
  list-style: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
}
.compare-list ul li, .compare-list ol li {
  margin-bottom: 1.4em !important;
  padding: 0 0 0 1.5em !important;
  line-height: 1.4;
  position: relative;
}
.compare-list ul li:after, .compare-list ol li:after {
  content: unset !important;
}
.compare-list-box .compare-list ul li:before, .compare-list-box .compare-list ol li:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 8px;
  width: 3px;
  height: 3px;
  display: inline-block;
  background-color: #777 !important;
  border-radius: 50%;
}
.compare-list ul li:last-child, .compare-list ol li:last-child {
  margin-bottom: 0 !important;
}
.compare-list ul::before, .compare-list ul::after, .compare-list ol::before, .compare-list ol::after {
  margin: auto !important;
  position: absolute;
  left: -7px;
  content: "";
  vertical-align: middle;
}
.compare-list ul::before, .compare-list ol::before {
  top: 0;
  width: 10px;
  height: 10px;
  border-top: 2px solid #ffa883;
  border-right: 2px solid #ffa883;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.compare-list ul::after, .compare-list ol::after {
  bottom: 0;
  width: 10px;
  height: 10px;
  border-top: 2px solid #ffa883;
  border-right: 2px solid #ffa883;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

STEP2：HTMLをコピペ

記事エディターにHTMLをコピペします。

グーテンベルク：カスタムHTMLにコピペ
クラシックエディタ：テキストタブにコピペ

AddQuicktagや再利用ブロックを使えば次から一発で呼び出せます。

コピペするHTMLはこちら

Copy

<div class="compare-list-box">
<div class="compare-list-box-title">タイトル</div>
<div class="compare-list">
<span class="compare-unit-top">高</span>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<span class="compare-unit-bottom">低</span>
</div>
</div>

あとはテキストを入れかえて使ってください。

STEP3：色を変更する

使いたいカラーのHTMLとCSSを追記します。

ブルー

塩分比較

高

カップラーメン
焼きそば
カレーライス
梅干し
味噌汁
炊き込みご飯

低

コード表示

HTML

Copy

<div class="compare-list-box compare-list-blue">
<div class="compare-list-box-title">タイトル</div>
<div class="compare-list">
<span class="compare-unit-top">高</span>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<span class="compare-unit-bottom">低</span>
</div>
</div>

1行目にcompare-list-blueを追加しています。

CSS

Copy

/* ブルー */
.compare-list-blue {
	background:#f0f9fc !important;
}
.compare-list-blue .compare-list-box-title{
	background:#6fc7e1 !important;
}
.compare-list-blue ul,.compare-list-blue ol,.compare-list-blue ul::before,.compare-list-blue ol::before,.compare-list-blue ul::after,.compare-list-blue ol::after{
	border-color:#6fc7e1 !important;
}

先ほどコピペしたCSSの下に追記してください。

ピンク

塩分比較

高

カップラーメン
焼きそば
カレーライス
梅干し
味噌汁
炊き込みご飯

低

コード表示

HTML

Copy

<div class="compare-list-box compare-list-pink">
<div class="compare-list-box-title">タイトル</div>
<div class="compare-list">
<span class="compare-unit-top">高</span>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<span class="compare-unit-bottom">低</span>
</div>
</div>

1行目にcompare-list-pinkを追加しています。

CSS

Copy

/* ピンク */
.compare-list-pink {
	background:#fdf1f1 !important;
}
.compare-list-pink .compare-list-box-title{
	background:#f7bcbc !important;
}
.compare-list-pink ul,.compare-list-pink ol,.compare-list-pink ul::before,.compare-list-pink ol::before,.compare-list-pink ul::after,.compare-list-pink ol::after{
	border-color:#f7bcbc !important;
}

先ほどコピペしたCSSの下に追記してください。

グリーン

塩分比較

高

カップラーメン
焼きそば
カレーライス
梅干し
味噌汁
炊き込みご飯

低

コード表示

HTML

Copy

<div class="compare-list-box compare-list-green">
<div class="compare-list-box-title">タイトル</div>
<div class="compare-list">
<span class="compare-unit-top">高</span>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<span class="compare-unit-bottom">低</span>
</div>
</div>

1行目にcompare-list-greenを追加しています。

CSS

Copy

/* グリーン */
.compare-list-green {
	background:#eafaf7 !important;
}
.compare-list-green .compare-list-box-title{
	background:#2fcdb4 !important;
}
.compare-list-green ul,.compare-list-green ol,.compare-list-green ul::before,.compare-list-green ol::before,.compare-list-green ul::after,.compare-list-green ol::after{
	border-color:#2fcdb4 !important;
}

先ほどコピペしたCSSの下に追記してください。

イエロー

塩分比較

高

カップラーメン
焼きそば
カレーライス
梅干し
味噌汁
炊き込みご飯

低

コード表示

HTML

Copy

<div class="compare-list-box compare-list-yellow">
<div class="compare-list-box-title">タイトル</div>
<div class="compare-list">
<span class="compare-unit-top">高</span>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<span class="compare-unit-bottom">低</span>
</div>
</div>

1行目にcompare-list-yellowを追加しています。

CSS

Copy

/* イエロー */
.compare-list-yellow {
	background:#fef9ed !important;
}
.compare-list-yellow .compare-list-box-title{
	background:#fdc44f !important;
}
.compare-list-yellow ul,.compare-list-yellow ol,.compare-list-yellow ul::before,.compare-list-yellow ol::before,.compare-list-yellow ul::after,.compare-list-yellow ol::after{
	border-color:#fdc44f !important;
}

先ほどコピペしたCSSの下に追記してください。

以上です！