【コピペだけ！】STORK（ストーク）のリスト表示をオシャレにカスタマイズ！

ここあです。

記事を見やすく、読みやすくするには

リスト表示は欠かせません。

しかし、STORK（ストーク）のリスト表示は

シンプルすぎて物足りない。

そんな印象がありませんか？

↓ デフォルトはこれ！（ちょっとさみしい…）

だから、もう少し

見やすく目立つようにカスタマイズ

したいですよね。

↓ 例えば、こんな感じに…

ということで今回は…

STORKのリスト表示をカスタマイズして

オシャレにかわいくする方法をあなたにご紹介します。

ぜひ参考にしてみてくださいね＾＾

リスト表示のコードはulとolの2種類がある

まずはリスト表示の予備知識です。

リスト表示のコードには…

の2種類があります。

どちらも同じリスト表示ですが

HTMLコードでは書き方が異なります。

番号なしリスト（ul）のカスタマイズ方法

まずは、番号なしリストのカスタマイズ方法から

説明していきますね。

リストマークの色を変える方法

通常、STORKの番号なしリストのデフォルトカラーは

見出し背景（h2）の色と連動しています。

↓ 私のサイトだとこのように濃紺です…＾＾；

しかし、「こんな色はイヤっ！」ということで

CSSコードを加えてデフォルトカラーを変更してみましょう。

CSSコードを加える場所は…

ダッシュボードメニューから外観 → カスタマイズ

CSSの追加の部分に記述します。

※プレビュー画面を見ながら調整できるのでやりやすいです。

リストマークの色を変えたい時は

以下のCSSコードを記述してください（コピペでOK!）

クリックでCSSコードを表示

.entry-content ul li:before{
background-color: #5ab9ff;
}

上記コードをそのまま入力すれば

リストマーカーの色はこのような水色に変わります。

リスト表示を付箋のように変える方法

CSSコードによって

リスト表示も単なる箇条書きではなく

付箋を並べたようなリスト表示に変えることもできます。

こんな感じです。

CSSコードはこちら…（コピペでOK!）

クリックでCSSコードを表示

.entry-content ul.list_tag li{
padding: 0;
position: relative;
}.entry-content ul.list_tag li{
border-left: solid 10px orange;
background: whitesmoke;
line-height: 2em;
padding: 0.7em;
}.entry-content ul.list_tag li:before{
width: 0;
height: 0;
}

CSSコードさえ追加しておけば

リスト表示を変更したい時にだけ

上記、CSSコードのclass指定class="list_tag"を

テキスト編集モードでHTMLコードに追加するだけOKです。

またclass名の"list_tag"は私が勝手に付けているだけなので

例えば"husen"でも"tag"だけでも

あなたの自由に変えてもらって大丈夫です

ただし、HTMLコードを変更する場合は

CSSコードのclass名も必ず合わせるようにしてくださいね。

もし分からないという場合は変更せずにそのまま使ってください…＾＾；

リスト表示にWebアイコンフォントを使う方法

今、私がリスト表示に使っているのは

Font AwesomeというWebアイコンフォントを使って

リストマーカーの部分をアイコン表示に変えるという方法です。

Font Awesomeの導入方法は

こちらの記事を参考に設置してみてください。

Font Awesome（Webアイコンフォント）の使い方をやさしく解説！

私と同じくWebアイコンフォントで

リストマーカーを表示させるCSSコードは…

クリックでCSSコードを表示

.entry-content ul.list_check{
padding: 0em 0em 0em 0.5em;
position: relative;
}.entry-content ul.list_check li:before{
width: 0;
height: 0;
font-family: fontawesome;
content:"\f058";
position: absolute;
font-size: 1.2em;
left: -0.4em;
line-height:12px;
color: #5ab9ff;
}

あとは、記事を書く時にテキスト編集モードで…

HTMLコード

<ul class="list_check">

<ul>の部分に class="list_check"を足せば表示できます。

一応サンプルコードを全部載せておきますね。

HTMLコード

<ul class="list_check">
<li>リスト表示1</li>
<li>リスト表示2</li>
<li>リスト表示3</li>
</ul>

こう書いてあれば、ブラウザ表示は…

このように表示されるはずです＾＾

※リスト周りの罫線はあなたのブラウザでは表示されません。

リスト表示のWebアイコンフォントを変える方法

上記、Webアイコンフォントを使って

リスト表示させることができたら

あとはお好みでアイコンを変更してください。

変更箇所はCSSコードのこの部分

クリックでCSSコードを表示

content:"\f058";

Webアイコンフォント（Font Awesome）のユニコード

f058の部分を変更しましょう。

Font Awesomeの公式ページ（ver.5の場合）に移動し

Iconsをクリック。

アイコン一覧が表示されたらFreeをクリック。

好きなアイコンを探して、アイコンをクリック。

アイコンのコードをコピーして差し替えましょう。

一番下の赤枠部分がアイコンのユニコードになります。

↓ 以下をクリックすれば、コードがコピーできます。

Webアイコンフォントによっては

フォントの太さを乳力しないと上手いこと表示されないものもありますが

お気に入りのアイコンを探してコピーしてみてください＾＾

リスト表示：Webアイコンフォントサンプル

差し替え用コードのサンプルを少し並べておきますので

参考にしてみてください。

カラーコードcolor: #5ab9ff; を変えれば

色も自由に変えれます。

「右矢印」content:"\f054";（コピペでOK!）

「本」content:"\f02d";（コピペでOK!）

「吹出し」content:"\f27a";（コピペでOK!）

「フラッグ」content:"\f024";（コピペでOK!）

CSSとWebアイコンフォントを組み合わせたリスト

WebアイコンフォントとCSSを組み合わせれば

こんな感じのリスト表示も作成できます。

CSSコードを記載しておきますので

使ってみたいという方はコピーしてくださいね。

クリックでCSSコードを表示

.entry-content ul.list_checkb {
border: solid 3px #ffb03f;
padding: 0.3em 1.2em;
position: relative;
}.entry-content ul.list_checkb li {
line-height: 1em;
padding: 0.2em 0 1em 1.4em;
border-bottom: dashed 2px #ffb03f;
}.entry-content ul.list_checkb li:before {
width: 0;
height: 0;
font-family: fontawesome;
content:"\f058";
position: absolute;
font-size: 1.5em;
left: -0.1em;
line-height:11px;
color: #ffb03f;
}.entry-content ul.list_checkb li:last-of-type{
border-bottom: none;
padding-bottom: 0;
}

表示させる場合のHTMLコードは…

HTMLコード

<ul class="list_checkb">
<li>リスト表示1</li>
<li>リスト表示2</li>
<li>リスト表示3</li>
</ul>

※通常のリストコードにclass="list_checkb"を足すだけです。

線幅や色などはお好みで調整してください。

番号ありリスト（ol）のカスタマイズ方法

続いて、番号ありリストのカスタマイズ方法です。

リスト番号の色を変える方法

まずは番号なしリスト同様

リスト番号の色を変える方法をご紹介します。

通常の番号ありリストはこんな感じで

番号なしリスト同様デフォルトカラーは

見出し背景（h2）と同色です。

これもCSSコードで色を変更してしまいましょう。

CSSコードは至ってシンプル。

クリックでCSSコードを表示

.entry-content ol.list_num li:before{
background-color: #5ab9ff;
}

たったこれだけ。

カラーコードを変えると、好きな色に変更できます。
※若干色が濁るのはSTORKの仕様？＾＾；

使用する時のHTMLコードは…

HTMLコード

<ol class="list_num">
<li>リスト表示1</li>
<li>リスト表示2</li>
<li>リスト表示3</li>
</ol>

通常のリストコードにclass="list_num"を足すだけです。

CSSをさらに発展させた番号ありリスト

最後に番号なしリストと同じく

CSSコードをさらに組み合わせた

番号ありリストをご紹介致します。

↓ こちらがサンプルです（文字はボールド）

CSSコードを書いておきます。

クリックでCSSコードを表示

.entry-content ol.list_numb{
border: solid 3px #ffb03f;
padding: 0.3em 1.2em;
position: relative;
}.entry-content ol.list_numb li{
line-height: 1em;
padding: 0.2em 0 1em 1.4em;
border-bottom: dashed 2px #ffb03f;
}.entry-content ol.list_numb li:before{
background-color: #ffb03f;
}.entry-content ol.list_numb li:last-of-type{
border-bottom: none;
padding-bottom: 0;
}

使用する時のHTMLコードは…

HTMLコード

<ol class="list_numb">
<li><strong>リスト表示1</strong></li>
<li><strong>リスト表示2</strong></li>
<li><strong>リスト表示3</strong></li>
</ol>

通常のリストコードにclass="list_numb"を足すだけです。

STORK（ストーク）のリスト表示をオシャレにカスタマイズまとめ

今回はSTORK（ストーク）の

リスト表示をカスタマイズする方法をご紹介しました。

なかなか「リスト表示までこだわりたい！」という人は

少ないかもしれませんが

それでもこのように

ちょっとCSSコードを追加してあげれば

簡単にカスタマイズすることが可能です。

• 「できないからやらない」
• 「知らないからできない」

とではかなり大きな違いがあります。

少なくともSTORKは

カスタマイズ可能なCMSのテンプレートなので

やり方さえわかれば、誰でも簡単にカスタマイズすることができます。

なので、今回、私の記事を読んで

「コピーしてやってみようかな？」と思ったら

ぜひ一度チャレンジしてみてください。

リスト表示は意識していなくても

意外と数を使っていたりするので

リストマークをカスタマイズするだけでも

ブログの印象は随分と変わりますよ。

最後までお読みいただきありがとうございました！