STORK(ストーク)のリストデザインを見やすくカスタマイズ！

こんにちは！リストデザインをカスタマイズしてみたネイネイ(@NEYNEYx2)です。

今回は、WordPressテーマのSTORK(ストーク)のリストデザインをカスタマイズしてみましたので、まとめをご紹介いたします。

STORK(ストーク)でオリジナルのリストデザインをお探しでしたら、ご覧になってください。

おすすめASP

A8.net：定番の最大手
もしもアフィリエイト：独自の報酬制度が魅力的
バリューコマース：定番・独自案件が豊富
afb（アフィビー）：美容系の案件に強い
アクセストレード：通信系・転職系に強い

目次（タップできます）

リストタグとは？

リストタグとは、「ul」「ol」「li」の箇条書きリストをWordPressで使用するときに使うものです。

記事の中で、要点をまとめる場合などに使用することで、項目を見やすく情報を効率的に伝えることができます。

番号なしリスト（ul）

ulタグは、先頭にマークが付いたリスト表示です。

ストーク
スワロー
ハミングバード
アルバトロス

HTMLコードは、コチラ（↓）のように書きます。

HTML

<ul>
    <li>ストーク</li>
    <li>スワロー</li>
    <li>ハミングバード</li>
    <li>アルバトロス</li>
</ul>

番号ありリスト（ol）

olタグは、先頭にマークと連番の数字が付いたリスト表示です。

ストーク
スワロー
ハミングバード
アルバトロス

HTMLコードは、コチラ（↓）のように書きます。

HTML

<ol>
    <li>ストーク</li>
    <li>スワロー</li>
    <li>ハミングバード</li>
    <li>アルバトロス</li>
</ol>

STORK(ストーク)のボックスショートコード用

ここでは以前ご紹介した、STORK(ストーク)のボックス用ショートコードにあう箇条書きリストのカスタマイズをご紹介します。

関連STORK(ストーク)のボックスをちょこっとカスタマイズ！

STORK(ストーク)では、WordPressの管理画面の「外観/カスタマイズ/サイトカラー設定/記事ページ見出し(H2)背景」で設定した色が箇条書きリストの色になっています。

なので、ボックスのショートコードと箇条書きリストを組み合わせると色がまちまちになり見た目が悪くなりがちです。 せっかく箇条書きリストを使用して、情報をわかりやすく見やすくしようとしているのに、これではチョット残念ですよね。

そこでカスタマイズをして、コチラ（↓）のようにボックスと同系色にすることで違和感をなくします。

色変更カスタマイズ

それでは、STORK(ストーク)のボックスショートコード用のCSSコードをご紹介します。

　　　　コードを表示

HTML

[box class="blue_box" title="ここにタイトル"]
<ul class="li-blue">
    <li>ボックスカラー（青）</li>
    <li>ボックスカラー（青）</li>
    <li>ボックスカラー（青）</li>
</ul>
[/box]

[box class="blue_box" title="ここにタイトル"]
<ol class="li-blue">
    <li>ボックスカラー（青）</li>
    <li>ボックスカラー（青）</li>
    <li>ボックスカラー（青）</li>
</ol>
[/box]

CSS

/* ------------------------------------- */
/*    ショートコード用 箇条書きリスト    */
/* ------------------------------------- */
/* --------- 青 --------- */
ul.li-blue li:before, ol.li-blue li:before{
    background: #82c8e2;
    box-shadow: none;
}
/* --------- 赤 --------- */
ul.li-red li:before, ol.li-red li:before{
    background: #e77373;
    box-shadow: none;
}
/* --------- 黄色 --------- */
ul.li-yellow li:before, ol.li-yellow li:before{
    background: #ded647;
    box-shadow: none;
}
/* --------- 緑 --------- */
ul.li-green li:before, ol.li-green li:before{
    background: #79e37c;
    box-shadow: none;
}
/* --------- ピンク --------- */
ul.li-pink li:before, ol.li-pink li:before{
    background: #f7b2b2;
    box-shadow: none;
}
/* --------- グレー --------- */
ul.li-glay li:before, ol.li-glay li:before{
    background: #9c9c9c;
    box-shadow: none;
}
/* --------- 黒 --------- */
ul.li-black li:before, ol.li-black li:before{
    background: #757575;
    box-shadow: none;
}
/* --------- カスタム --------- */
ul.li-custom li:before, ol.li-custom li:before{
    background: #ffc787;
    box-shadow: none;
}

上記のHTMLは、ボックスの色が「青」の場合ですが、その他のボックスを使用する場合には、それにあわせてHTMLを変更する必要があります。

<ul class="li-blue">または、<ol class="li-blue">のclass名の"li-blue"を下記の対応する色に変更ください。

	class名
青	`"li-blue"`
赤	`"li-red"`
黄色	`"li-yellow"`
緑	`"li-green"`
ピンク	`"li-pink"`
グレー	`"li-glay"`
黒	`"li-black"`
カスタム	`"li-custom"`

STORK(ストーク)の番号なしリスト（ul）をカスタマイズ

ここでは、番号なしリスト（ul）のカスタマイズを紹介していきます。

矢印

先頭に矢印のアイコンがついた、使い勝手のよいデザインです。

　　　　コードを表示

HTML

<ul class="li-arrow">
    <li>アルバトロス</li>
    <li>ハミングバード</li>
    <li>ストーク</li>
    <li>スワロー</li>
</ul>

CSS

/* ------- 矢印 ------- */
ul.li-arrow li{
    padding-left: 1.4em;
}
ul.li-arrow  li:before{
    position:absolute;
    display:block;
    font-family:"FontAwesome";
    content:"f0a9"; /* アイコン指定 */
    color:#1478e6; /* アイコン色 */
    box-shadow: none;
    left:0;
    top: 0;
    width: 0;
    height: 0;
    line-height: 25px;
    font-size: 20px;
}

シェブロン

先頭にシェブロンのアイコンがついた、シンプルなデザインです。

　　　　コードを表示

HTML

<ul class="li-chevron">
    <li>アルバトロス</li>
    <li>ハミングバード</li>
    <li>ストーク</li>
    <li>スワロー</li>
</ul>

CSS

/* ------- シェブロン ------- */
ul.li-chevron li{
    padding-left: 1.4em;
}
ul.li-chevron  li:before{
    position:absolute;
    display:block;
    font-family:"FontAwesome";
    content:"f138"; /* アイコン指定 */
    color:#e63c28; /* アイコン色 */
    box-shadow: none;
    left:0;
    top: 0;
    width: 0;
    height: 0;
    line-height: 25px;
    font-size: 20px;
}

チェック

先頭にチェックのアイコンがついた、シンプルなデザインです。

　　　　コードを表示

HTML

<ul class="li-check">
    <li>アルバトロス</li>
    <li>ハミングバード</li>
    <li>ストーク</li>
    <li>スワロー</li>
</ul>

CSS

/* ------- チェック ------- */
ul.li-check li{
    padding-left: 1.5em;
}
ul.li-check  li:before{
    position:absolute;
    display:block;
    font-family:"FontAwesome";
    content:"f00c"; /* アイコン指定 */
    color:#e69927; /* アイコン色 */
    box-shadow: none;
    left:0;
    top: 0;
    width: 0;
    height: 0;
    line-height: 25px;
    font-size: 20px;
}

三角矢印

先頭に三角矢印のアイコンがついた、シンプルなデザインです。

　　　　コードを表示

HTML

<ul class="li-caret">
    <li>アルバトロス</li>
    <li>ハミングバード</li>
    <li>ストーク</li>
    <li>スワロー</li>
</ul>

CSS

/* ------- 三角矢印 ------- */
ul.li-caret li{
    padding-left: 1.0em;
}
ul.li-caret  li:before{
    position:absolute;
    display:block;
    font-family:"FontAwesome";
    content:"f0da"; /* アイコン指定 */
    color:#27e63a; /* アイコン色 */
    box-shadow: none;
    left:0;
    top: 0;
    width: 0;
    height: 0;
    line-height: 25px;
    font-size: 30px;
}

指差し

先頭に指差しのアイコンがついた、ちょっぴり目を引くデザインです。

　　　　コードを表示

HTML

<ul class="li-hand">
    <li>アルバトロス</li>
    <li>ハミングバード</li>
    <li>ストーク</li>
    <li>スワロー</li>
</ul>

CSS

/* ------- 指差し ------- */
ul.li-hand li{
    padding-left: 1.6em;
}
ul.li-hand  li:before{
    position:absolute;
    display:block;
    font-family:"FontAwesome";
    content:"f0a4"; /* アイコン指定 */
    color:#27d2e6; /* アイコン色 */
    box-shadow: none;
    left:0;
    top: 0;
    width: 0;
    height: 0;
    line-height: 25px;
    font-size: 20px;
}

ハート

先頭にハートのアイコンがついた、かわいらしいデザインです。

　　　　コードを表示

HTML

<ul class="li-heart">
    <li>アルバトロス</li>
    <li>ハミングバード</li>
    <li>ストーク</li>
    <li>スワロー</li>
</ul>

CSS

/* ------- ハート ------- */
ul.li-heart li{
    padding-left: 1.7em;
}
ul.li-heart  li:before{
    position:absolute;
    display:block;
    font-family:"FontAwesome";
    content:"f004"; /* アイコン指定 */
    color:#e62773; /* アイコン色 */
    box-shadow: none;
    left:0;
    top: 0;
    width: 0;
    height: 0;
    line-height: 25px;
    font-size: 20px;
}

肉球

先頭に肉球のアイコンがついた、キュートなデザインです。

　　　　コードを表示

HTML

<ul class="li-paw">
    <li>アルバトロス</li>
    <li>ハミングバード</li>
    <li>ストーク</li>
    <li>スワロー</li>
</ul>

CSS

/* ------- 肉球 ------- */
ul.li-paw li{
    padding-left: 1.4em;
}
ul.li-paw  li:before{
    position:absolute;
    display:block;
    font-family:"FontAwesome";
    content:"f1b0"; /* アイコン指定 */
    color:#e67e73; /* アイコン色 */
    box-shadow: none;
    left:0;
    top: 0;
    width: 0;
    height: 0;
    line-height: 25px;
    font-size: 20px;
}

STORK(ストーク)の番号ありリスト（ol）をカスタマイズ

ここでは、番号ありリスト（ol）のカスタマイズを紹介していきます。

また、ここで紹介するデザインは、すべてデフォルトの「ol」より少し大きいデザインになっています。

丸

番号を丸で囲んだ、デザインになります。

　　　　コードを表示

HTML

<ol class="li-circle">
    <li>アルバトロス</li>
    <li>ハミングバード</li>
    <li>ストーク</li>
    <li>スワロー</li>
</ol>

CSS

/* ------- 大きめの● ------- */
ol.li-circle li{
    padding-left: 2.0em;
}
ol.li-circle  li:before{
position:absolute;
display:block;
counter-increment: number;
content: counter(number);
    background: #1478e6; /* 背景色 */
    color:#fff; /* 文字色 */
    box-shadow: none;
    left:0;
    top: -1px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 15px;
font-weight:bold;
text-align:center;
border-radius:50%;
}

四角

番号を四角で囲んだ、デザインになります。

　　　　コードを表示

HTML

<ol class="li-square">
    <li>アルバトロス</li>
    <li>ハミングバード</li>
    <li>ストーク</li>
    <li>スワロー</li>
</ol>

CSS

/* ------- 大きめの■ ------- */
ol.li-square li{
    padding-left: 2.0em;
}
ol.li-square  li:before{
position:absolute;
display:block;
counter-increment: number;
content: counter(number);
    background: #e67e73; /* 背景色 */
    color:#fff; /* 文字色 */
    box-shadow: none;
    left:0;
    top: -1px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 15px;
font-weight:bold;
text-align:center;
    border-radius: 5px;
}

ダイヤ

番号をひし形で囲んだ、デザインになります。

　　　　コードを表示

HTML

<ol class="li-diamond">
    <li>アルバトロス</li>
    <li>ハミングバード</li>
    <li>ストーク</li>
    <li>スワロー</li>
</ol>

CSS

/* ------- 大きめの◆ ------- */
ol.li-diamond li{
    padding-left: 2.1em;
}
ol.li-diamond  li:before{
    content: '';
    counter-increment: none;
position:absolute;
display:block;
    background: #e63c28; /* 背景色 */
    color:#fff; /* 文字色 */
    box-shadow: none;
    left:0;
    top: -1px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 15px;
font-weight:bold;
text-align:center;
    border-radius: 5px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
ol.li-diamond  li:after{
    position:absolute;
    display:block;
    counter-increment: number;
    content: counter(number);
    background: #e63c28; /* 背景色 */
    color:#fff; /* 文字色 */
    left:0;
    top: -1px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 15px;
    font-weight:bold;
    text-align:center;
    border-radius:50%;
}

ギザギザの円

番号をギザギザのアイコンで囲んだ、独特なデザインになります。

　　　　コードを表示

HTML

<ol class="li-icons">
    <li>アルバトロス</li>
    <li>ハミングバード</li>
    <li>ストーク</li>
    <li>スワロー</li>
</ol>

CSS

/* ------ ギザギザの円 ------ */
ol.li-icons li{
    padding-left: 2.2em;
}
ol.li-icons  li:before{
    font-family:"FontAwesome";
    content:"f0a3"; /* アイコン指定 */
    counter-increment: none;
position:absolute;
display:block;
    color:#27e63a; /* アイコン色 */
    box-shadow: none;
    left:0;
    top: -1px;
    width: 0;
    height: 0;
    line-height: 25px;
    font-size: 35px;
font-weight:bold;
text-align:center;
}
ol.li-icons  li:after{
    position:absolute;
    display:block;
    counter-increment: number;
    content: counter(number);
    background: #27e63a; /* 背景色 */
    color:#fff; /* 文字色 */
    left: 2pt;
    top: -1px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 15px;
    font-weight:bold;
    text-align:center;
    border-radius:50%;
}

丸（外枠のみ）

番号の外側のみを丸で囲んだ、シンプルなデザインになります。

　　　　コードを表示

HTML

<ol class="li-circle2">
    <li>アルバトロス</li>
    <li>ハミングバード</li>
    <li>ストーク</li>
    <li>スワロー</li>
</ol>

CSS

/* ------- 大きめの○ ------- */
ol.li-circle2 li{
    padding-left: 2.2em;
}
ol.li-circle2  li:before{
position:absolute;
display:block;
counter-increment: number;
content: counter(number);
    background: #fff; /* 背景色 */
    color:#3e3e3e; /* 文字色 */
    box-shadow: none;
    left:0;
    top: -3px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 15px;
font-weight:bold;
text-align:center;
border-radius:50%;
    border: 2px solid #e69927;  /* 外枠の色 */
}

四角（外枠のみ）

番号の外側のみを四角で囲んだ、シンプルなデザインになります。

　　　　コードを表示

HTML

<ol class="li-square2">
    <li>アルバトロス</li>
    <li>ハミングバード</li>
    <li>ストーク</li>
    <li>スワロー</li>
</ol>

CSS

/* ------- 大きめの□ ------- */
ol.li-square2 li{
    padding-left: 2.2em;
}
ol.li-square2  li:before{
position:absolute;
display:block;
counter-increment: number;
content: counter(number);
    background: #fff; /* 背景色 */
    color:#3e3e3e; /* 文字色 */
    box-shadow: none;
    left:0;
    top: -3px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 15px;
font-weight:bold;
text-align:center;
    border-radius: 5px;
    border: 2px solid #e62773;  /* 外枠の色 */
}

番号のとなりに縦棒

番号の右側に縦棒がある、ちょっと目を引くデザインになります。

　　　　コードを表示

HTML

<ol class="li-vbar">
    <li>アルバトロス</li>
    <li>ハミングバード</li>
    <li>ストーク</li>
    <li>スワロー</li>
</ol>

CSS

/* ------- 番号 右横l ------- */
ol.li-vbar li{
    padding-left: 2.2em;
}
ol.li-vbar  li:before{
position:absolute;
display:block;
counter-increment: number;
content: counter(number);
    background: #fff; /* 背景色 */
    color:#1478e6; /* 文字色 */
    box-shadow: none;
    left:0;
    top: -1px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 20px;
font-weight:bold;
text-align:center;
    border-radius: 0;
    border-right: 3px solid #1478e6;  /* 外枠の色 */
}