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

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

 

ここあです。

 

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

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

 

しかし、STORK(ストーク)のリスト表示は

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

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

 

↓ デフォルトはこれ!(ちょっとさみしい…)

  • リスト表示1
  • リスト表示2
  • リスト表示3

 

だから、もう少し

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

したいですよね。

 

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

  • リスト表示1
  • リスト表示2
  • リスト表示3

 

ということで今回は…

 

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

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

 

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

 

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

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

 

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

  • 番号なしリスト:HTMLコードでは「ul」
  • 番号ありリスト:HTMLコードでは「ol」

の2種類があります。

 

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

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

 

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

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

説明していきますね。

 

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

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

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

 

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

  • リスト表示1
  • リスト表示2
  • リスト表示3

 

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

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

 

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

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

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

 

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

dropshadow

 

 

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

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

.entry-content ul li:before{
background-color: #5ab9ff; /*リストマーカーの色*/
}

background-colorの#5ab9ffの部分にカラーコードを入れて好きな色に変更できます。

 

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

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

リストマーカー色変え

 

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

CSSコードによって

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

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

 

こんな感じです。

STORKリスト表示カスタマイズ

 

CSSコードはこちら…(コピペでOK!)

.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; /*リストマークを消す*/
}

6行目のorangeをお好みのカラーコード(#000000)に変えてください。左端のオレンジ色を変更できます。7行目のwhitesmokeを別のカラーコードに変えると背景色も変更できます。

 

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

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

 

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

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

通常のリストタグ表示

↑ 通常のリスト表示

class指定したリストコード

<ul class="list_tag">と変更する

 

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

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

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

 

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

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

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

 

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

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

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

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

 

Font Awesomeの導入方法は

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

Font Awesome(Webアイコンフォント)の使い方をやさしく解説!

 

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

リストマーカーを表示させる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; /*Webアイコンフォント*/
content:"\f058"; /*Webアイコンフォントのコード*/
position: absolute;
font-size: 1.2em; /*アイコンのサイズ*/
left: -0.4em; /*左端からのアイコンまで*/
line-height:12px; /*行間*/
color: #5ab9ff; /*アイコンの色*/
}

 

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

<ul class="list_check">

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

 

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

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

 

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

  • リスト表示1
  • リスト表示2
  • リスト表示3

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

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

 

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

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

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

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

 

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

content:"\f058"; /*Webアイコンフォントのコード*/

Webアイコンフォント(Font Awesome)のユニコード

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

 

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

 

 

Iconsをクリック。

 

 

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

Font Awesomeアイコン一覧

 

 

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

 

 

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

Font Awesome:アイコンコード画面

 

 

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

Font Awesone

 

 

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

Font Awesomeコードコピー

 

 

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

上手いこと表示されないものもありますが

お気に入りのアイコンを探してコピーしてみてください^^
※原因調査中です。

 

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

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

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

 

カラーコードcolor: #5ab9ff; /*アイコンの色*/を変えれば

色も自由に変えれます。

 

リストサンプル1

「指差し」content:"\f0a4";(コピペでOK!)

リストサンプル2

「右矢印」content:"\f0a9";(コピペでOK!)

 

リストサンプル3

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

リストサンプル4

「本」content:"\f02d";(コピペでOK!)

 

リストサンプル5

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

リストサンプル6

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

 

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

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

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

 

  • リスト表示1
  • リスト表示2
  • リスト表示3

 

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コードは…

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

 

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

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

 

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

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

 

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

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

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

 

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

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

見出し背景(h2)と同色です。

 

  1. リスト表示1
  2. リスト表示2
  3. リスト表示3

 

 

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

  1. リスト表示1
  2. リスト表示2
  3. リスト表示3

 

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

.entry-content ol.list_num li:before{
background-color: #5ab9ff; /*数字の色*/
}

たったこれだけ。

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

 

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

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

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

 

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

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

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

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

 

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

  1. リスト表示1
  2. リスト表示2
  3. リスト表示3

 

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コードは…

<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のリスト表示は簡単にカスタマイズできる!

 

今回はSTORK(ストーク)

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

 

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

少ないかもしれませんが

 

それでもこのように

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

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

 

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

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

 

少なくともSTORKは

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

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

 

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

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

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

 

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

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

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

 

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

 

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

 

設定でよく分からないことがあれば

気軽にご相談くださいね!

「ここあ」に問い合わせをする

 

合わせて読みたい!

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

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。