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

ここあです。

 

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

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

 

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

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

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

 

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

STORKリスト表示

 

だから、もう少し

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

したいですよね。

 

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

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

 

ということで今回は…

 

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

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

 

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

 

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

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

 

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

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

の2種類があります。

 

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

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

 

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

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

説明していきますね。

 

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

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

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

 

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

STORKリスト表示

 

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

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

 

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

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

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

 

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

dropshadow

 

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

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

クリックでCSSコードを表示
.entry-content ul li:before{
background-color: #5ab9ff;
}
 background-colorの#5ab9ffの部分にカラーコードを入れて好きな色に変更できます。

 

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

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

リストマーカー色変え

 

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

CSSコードによって

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

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

 

こんな感じです。

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

 

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

クリックで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>

 

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

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

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

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

 

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

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

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

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

 

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

クリックでCSSコードを表示
content:"\f058";

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を組み合わせれば

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

リスト表示

 

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

 

今回はSTORK(ストーク)

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

 

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

少ないかもしれませんが

 

それでもこのように

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

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

 

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

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

 

少なくともSTORKは

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

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

 

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

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

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

 

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

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

 

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

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

 

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

 

>ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。

CTR IMG