こんにちは! リストデザインをカスタマイズしてみたネイネイ(@NEYNEYx2)です。
今回は、WordPressテーマのSTORK(ストーク)のリストデザインをカスタマイズしてみましたので、まとめをご紹介いたします。
STORK(ストーク)でオリジナルのリストデザインをお探しでしたら、ご覧になってください。
- A8.net
:定番の最大手
- もしもアフィリエイト
:独自の報酬制度が魅力的
バリューコマース:定番・独自案件が豊富
- afb(アフィビー)
:美容系の案件に強い
- アクセストレード
:通信系・転職系に強い
リストタグとは?
リストタグとは、「ul」「ol」「li」の箇条書きリストをWordPressで使用するときに使うものです。
記事の中で、要点をまとめる場合などに使用することで、項目を見やすく情報を効率的に伝えることができます。
ulタグは、先頭にマークが付いたリスト表示です。
- ストーク
- スワロー
- ハミングバード
- アルバトロス
HTMLコードは、コチラ(↓)のように書きます。
<ul>
<li>ストーク</li>
<li>スワロー</li>
<li>ハミングバード</li>
<li>アルバトロス</li>
</ul>
olタグは、先頭にマークと連番の数字が付いたリスト表示です。
- ストーク
- スワロー
- ハミングバード
- アルバトロス
HTMLコードは、コチラ(↓)のように書きます。
<ol>
<li>ストーク</li>
<li>スワロー</li>
<li>ハミングバード</li>
<li>アルバトロス</li>
</ol>
STORK(ストーク)のボックス ショートコード用
ここでは以前ご紹介した、STORK(ストーク)のボックス用ショートコードにあう箇条書きリストのカスタマイズをご紹介します。
関連STORK(ストーク)のボックスをちょこっとカスタマイズ!
STORK(ストーク)では、WordPressの管理画面の「外観/カスタマイズ/サイトカラー設定/記事ページ見出し(H2)背景」で設定した色が箇条書きリストの色になっています。
なので、ボックスのショートコードと箇条書きリストを組み合わせると色がまちまちになり見た目が悪くなりがちです。 せっかく箇条書きリストを使用して、情報をわかりやすく見やすくしようとしているのに、これではチョット残念ですよね。
そこでカスタマイズをして、コチラ(↓)のようにボックスと同系色にすることで違和感をなくします。
色変更 カスタマイズ
それでは、STORK(ストーク)のボックス ショートコード用のCSSコードをご紹介します。
[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]
/* ------------------------------------- */
/* ショートコード用 箇条書きリスト */
/* ------------------------------------- */
/* --------- 青 --------- */
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)のカスタマイズを紹介していきます。
矢印
先頭に矢印のアイコンがついた、使い勝手のよいデザインです。
<ul class="li-arrow">
<li>アルバトロス</li>
<li>ハミングバード</li>
<li>ストーク</li>
<li>スワロー</li>
</ul>
/* ------- 矢印 ------- */
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;
}
シェブロン
先頭にシェブロンのアイコンがついた、シンプルなデザインです。
<ul class="li-chevron">
<li>アルバトロス</li>
<li>ハミングバード</li>
<li>ストーク</li>
<li>スワロー</li>
</ul>
/* ------- シェブロン ------- */
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;
}
チェック
先頭にチェックのアイコンがついた、シンプルなデザインです。
<ul class="li-check">
<li>アルバトロス</li>
<li>ハミングバード</li>
<li>ストーク</li>
<li>スワロー</li>
</ul>
/* ------- チェック ------- */
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;
}
三角矢印
先頭に三角矢印のアイコンがついた、シンプルなデザインです。
<ul class="li-caret">
<li>アルバトロス</li>
<li>ハミングバード</li>
<li>ストーク</li>
<li>スワロー</li>
</ul>
/* ------- 三角矢印 ------- */
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;
}
指差し
先頭に指差しのアイコンがついた、ちょっぴり目を引くデザインです。
<ul class="li-hand">
<li>アルバトロス</li>
<li>ハミングバード</li>
<li>ストーク</li>
<li>スワロー</li>
</ul>
/* ------- 指差し ------- */
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;
}
ハート
先頭にハートのアイコンがついた、かわいらしいデザインです。
<ul class="li-heart">
<li>アルバトロス</li>
<li>ハミングバード</li>
<li>ストーク</li>
<li>スワロー</li>
</ul>
/* ------- ハート ------- */
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;
}
肉球
先頭に肉球のアイコンがついた、キュートなデザインです。
<ul class="li-paw">
<li>アルバトロス</li>
<li>ハミングバード</li>
<li>ストーク</li>
<li>スワロー</li>
</ul>
/* ------- 肉球 ------- */
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」より少し大きいデザインになっています。
丸
番号を丸で囲んだ、デザインになります。
<ol class="li-circle">
<li>アルバトロス</li>
<li>ハミングバード</li>
<li>ストーク</li>
<li>スワロー</li>
</ol>
/* ------- 大きめの● ------- */
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%;
}
四角
番号を四角で囲んだ、デザインになります。
<ol class="li-square">
<li>アルバトロス</li>
<li>ハミングバード</li>
<li>ストーク</li>
<li>スワロー</li>
</ol>
/* ------- 大きめの■ ------- */
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;
}
ダイヤ
番号をひし形で囲んだ、デザインになります。
<ol class="li-diamond">
<li>アルバトロス</li>
<li>ハミングバード</li>
<li>ストーク</li>
<li>スワロー</li>
</ol>
/* ------- 大きめの◆ ------- */
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%;
}
ギザギザの円
番号をギザギザのアイコンで囲んだ、独特なデザインになります。
<ol class="li-icons">
<li>アルバトロス</li>
<li>ハミングバード</li>
<li>ストーク</li>
<li>スワロー</li>
</ol>
/* ------ ギザギザの円 ------ */
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%;
}
丸(外枠のみ)
番号の外側のみを丸で囲んだ、シンプルなデザインになります。
<ol class="li-circle2">
<li>アルバトロス</li>
<li>ハミングバード</li>
<li>ストーク</li>
<li>スワロー</li>
</ol>
/* ------- 大きめの○ ------- */
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; /* 外枠の色 */
}
四角(外枠のみ)
番号の外側のみを四角で囲んだ、シンプルなデザインになります。
<ol class="li-square2">
<li>アルバトロス</li>
<li>ハミングバード</li>
<li>ストーク</li>
<li>スワロー</li>
</ol>
/* ------- 大きめの□ ------- */
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; /* 外枠の色 */
}
番号のとなりに縦棒
番号の右側に縦棒がある、ちょっと目を引くデザインになります。
<ol class="li-vbar">
<li>アルバトロス</li>
<li>ハミングバード</li>
<li>ストーク</li>
<li>スワロー</li>
</ol>
/* ------- 番号 右横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にコピペする場合には、下記のどちらかお好みな方で編集ください。
- 子テーマの「style.css」を編集する。(外観/テーマ編集から変更できます)
- 追加CSSを編集する。(外観/CSS編集から変更できます)
子テーマの導入については、コチラ( ↓ )の記事にありますのでそちらをご覧ください。
補足
box-shadowについて
WordPressテーマのSTORK(ストーク)では、.entry-content ul li:before
または、.entry-content ol li:before
にデフォルトで「box-shadow
」が設定されています。
これにより、デフォルトでは少し濃い色(くすんだ色)に見えます。 ここで紹介したカスタマイズではこの設定を「box-shadow: none;
」で反映されないようにしています。
デフォルトの「box-shadow
」を反映する場合は、カスタマイズ内の「box-shadow: none;
」の行を削除ください。
色を変更する方法
これまで紹介してきた見出しデザインの色を変更する場合の方法を説明していきます。
色の変更は、「 /* 背景色 */ 」「 /* 文字色 */ 」などの〇〇〇色とコメントがある行の「 #78b4ff 」の #〇〇〇〇〇〇をお好きな色コードに変更してください。
色コードの参考には、下記のサイトがおすすめです。
アイコンを変更する方法
アイコンを変更する場合は、下記のサイトからアイコンのコードを取得してください。
アイコンの変更は、「 /* アイコンを指定 */ 」とコメントがある行の「content:”f06c”;」のf06cを下記画像の赤枠部分を参考に変更してみてください。
まとめ
お好みのリストデザインは見つかりましたか?
これであなたのブログも、見やすくおしゃれなサイトになること間違いなしです!
それでは、まったです。 (‘◇’)ゞ
コチラで紹介している「【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ」の記事もよかったらどうぞ。
- A8.net
:定番の最大手
- もしもアフィリエイト
:独自の報酬制度が魅力的
バリューコマース:定番・独自案件が豊富
- afb(アフィビー)
:美容系の案件に強い
- アクセストレード
:通信系・転職系に強い
コメント