【コピペだけ!】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"だけでも

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

 

ただし、変更する場合は使用時の

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(ストーク)の

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

 

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

少ないかもしれませんが

 

それでもこのように

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

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

 

できないからやらない」のと

知らないからできない」では大きな違いがあります。

 

少なくとも「ストーク」はカスタマイズ可能なCMSのテンプレートなので

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

 

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

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

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

 

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

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

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

 

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

 

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

 

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

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

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

 

合わせて読みたい!

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

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


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

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


ABOUTこの記事をかいた人

ここあ

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