MENU
日々の日常をつづった雑記ブログ
Amazon Gaming Week【9月19日～9月29日まで】

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

PR
STORK
  1. ホーム
  2. ブログ運営
  3. STORK
  4. STORK(ストーク)のリストデザインを見やすくカスタマイズ！

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

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

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

 

おすすめASP
  1. A8.net：定番の最大手
  2. もしもアフィリエイト：独自の報酬制度が魅力的
  3. バリューコマース：定番・独自案件が豊富
  4. afb（アフィビー）：美容系の案件に強い
  5. アクセストレード：通信系・転職系に強い
目次（タップできます）

リストタグとは？

リストタグとは、「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編集から変更できます)

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

あわせて読みたい
STORK(ストーク)をインストールしたら「子テーマ」を入れよう！ こんにちは！ HTML＆CSSの勉強中のネイネイ(@NEYNEYx2)です。 WordPressテーマの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 」の #〇〇〇〇〇〇をお好きな色コードに変更してください。

色コードの参考には、下記のサイトがおすすめです。

色コードの参考サイト

 

アイコンを変更する方法

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

アイコンのコード取得サイト

 

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

 

まとめ

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

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

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

 

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

あわせて読みたい
【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ こんにちは！ カスタマイズにハマってしまっているネイネイ(@NEYNEYx2)です。 今回は、WordPressテーマのSTORK(ストーク)でこれまで紹介してきたカスタマイズをまとめま...

 

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

 

Amazonギフト券 チャージタイプ

Amazonギフト券 チャージタイプ(直接アカウントに残高追加)
Amazonギフト券 チャージタイプ(直接アカウントに残高追加)
Amazon.co.jp

 

STORK
よかったらシェアしてね！
  • URLをコピーしました！

この記事を書いた人

ネイネイのアバター ネイネイ

30代の元開発エンジニア。本の書評多め(ミステリ、ファンタジー、気になった本を読む雑食系)。現在は、自由な働き方で生活していけるように、日々の『喜び・怒り・悲しみ・楽しみ』を書きつづっています。

関連記事

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次（タップできます）