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

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

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

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

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

 

おすすめASP

リストタグとは?

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

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

番号なしリスト(ul)

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

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

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

HTML

<ul>
    <li>ストーク</li>
    <li>スワロー</li>
    <li>ハミングバード</li>
    <li>アルバトロス</li>
</ul>
番号ありリスト(ol)

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

  1. ストーク
  2. スワロー
  3. ハミングバード
  4. アルバトロス

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;  /* 外枠の色 */
}

 

CSSコピペの場所

CSSにコピペする場合には、下記のどちらかお好みな方で編集ください。

  1. 子テーマの「style.css」を編集する。(外観/テーマ編集から変更できます)
  2. 追加CSSを編集する。(外観/CSS編集から変更できます)

子テーマの導入については、コチラ( ↓ )の記事にありますのでそちらをご覧ください。

関連記事

こんにちは! HTML&CSSの勉強中のネイネイ(@NEYNEYx2)です。 WordPressテーマのSTORK(ストーク)をインストールしたら、初めにしておいた方がいいのが「子テーマ」の導入です。 今回は、「子テーマ」を導入する仕方[…]

STORK(ストーク)をインストールしたら「子テーマ」を入れよう!

 

補足

box-shadowについて

WordPressテーマのSTORK(ストーク)では、.entry-content ul li:beforeまたは、.entry-content ol li:beforeにデフォルトで「box-shadow」が設定されています。

これにより、デフォルトでは少し濃い色(くすんだ色)に見えます。 ここで紹介したカスタマイズではこの設定を「box-shadow: none;」で反映されないようにしています。

box-shadowありなし
左側:box-shadowあり  右側:box-shadowなし

デフォルトの「box-shadow」を反映する場合は、カスタマイズ内の「box-shadow: none;」の行を削除ください。

 

色を変更する方法

これまで紹介してきた見出しデザインの色を変更する場合の方法を説明していきます。

色の変更は、「 /* 背景色 */ 」「 /* 文字色 */ 」などの〇〇〇とコメントがある行の「 #78b4ff 」の #〇〇〇〇〇〇をお好きな色コードに変更してください。

色コードの参考には、コチラ(↓)のサイトがおすすめです。

色見本、配色を提案するWEB色見本のホームページ。選んだ色をキーカラーにして色の法則から多彩な配色と出会えます。漫画配色…

 

アイコンを変更する方法

アイコンを変更する場合は、下記のサイトからアイコンのコードを取得してください。

アイコンの変更は、「 /* アイコンを指定 */ 」とコメントがある行の「content:”f06c”;」のf06cを下記画像の赤枠部分を参考に変更してみてください。

 

まとめ

お好みのリストデザインは見つかりましたか?

これであなたのブログも、見やすくおしゃれなサイトになること間違いなしです!

それでは、まったです。 (‘◇’)ゞ

 

コチラで紹介している「【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ」の記事もよかったらどうぞ。

関連記事

こんにちは! カスタマイズにハマってしまっているネイネイ(@NEYNEYx2)です。 今回は、WordPressテーマのSTORK(ストーク)でこれまで紹介してきたカスタマイズをまとめましたので、ご紹介いたします。 STORK(ストーク[…]

【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ

 

おすすめASP

 

ポチして頂くことで、ランキングの順位が上がります

人気ブログランキングへ
にほんブログ村 本ブログ 書評・レビューへ
Amazonでお得にお買い物
amazonギフト券

Amazonでお買い物するなら、Amazonギフト券の利用がおすすめ!

チャージするたびに、プライム会員なら最大2.5%分通常会員なら最大2.0%分のAmazonポイントが貯まる。

\ TRY NOW!! /

\ こちらも読まれています! /