疑問のせつこさん

突然ですが、リストって好きですか?私は結構好きです。

  • こんな風に書けて
  • デザイン可愛くて
  • 最高じゃないですか?

ですが、もう少し情報を入れたいなという時に不便だな、、と感じていました。

下記のように、商品名の補足説明をする時は、()を使ったりするしかないんです。

  • 商品名1
  • 商品名2(ここが違う)
  • 商品名3(カッコ書きってダサくない?)

そういう時に使える、便利なカスタマイズを今回はご紹介していきます!

笑顔のせつこさん

名付けて「ちょっとリッチなリスト

ここにタイトル
  • ショートコードで簡単に使えます
    こんな風に補足説明を入れられます。
  • 普通のリストとして使うこともできます。
  • こういう使い方好き
    文字の大きさ変えられるのでボソって書きたい時も良いですね、、
olの番号リストも使えます
  1. ショートコードで簡単に使えます
    こんな風に補足説明を入れられます。
  2. 普通のリストとして使うこともできます。
  3. こういう使い方好き
    文字の大きさ変えられるのでボソって書きたい時も良いですね、、

コピペで簡単に使えるので、ご自由にお使いください!

ちょっとリッチなリストの作成手順

手順
  1. CSSをコピペ
    style.cssなどにコードをコピペ
  2. PHPをコピペ
    functions.phpにコードをコピペ
  3. ショートコードをコピペ
    実際に使うショートコードをコピペ
  4. 使い方を覚える
    ちょっと使い方にクセがあるので覚えて終了!

1.CSSをコピペ

注意!

fontawesomeが4か5かでコードが変わります。

わからない場合、どちらかを貼ってみて、できなかったら違う方といった感じに対応してください!

     
普通の表情のせつこさん

エラーは出ないので安心してくださいね♪

fontawesome5の場合
div.rich-list {
    margin: 0 0 1.6em/*リストの下に空白を開ける設定*/
}
div.rich-list p {
    display: none;
}
div.rich-list > div {
    display: inline-block;
    background: #F8BF39;/*ここを変更でタイトルの色が変わります*/
    color: #fff;
    margin-left: 0;
    border-radius: 7px 7px 0 0;
    font-size: 15px !important;
    padding: 2px 10px;
    border: none;
    font-weight:700;
}
div.rich-list ul,div.rich-list ol{
    border: solid 2px #F8BF39 !important;/*ここを変更でボーダーの色が変わります*/
    border-radius: 0 !important;
    list-style-type:none !important;
    margin:0!important;
}
div.rich-list ol {
    counter-reset: number;
    padding: .5em .2em .5em .8em !important;
}
div.rich-list ol li {
    position: relative;
    padding-left: 30px;
    margin-top: 0;
    line-height: 1.5;
    padding: 1em .5em 1em 35px;
}
div.rich-list ol li:before {
    position: absolute;
    counter-increment: number;
    content: counter(number);
    display: inline-block;  
    background: #F8BF39;/*ここを変更で数字の色が変わります*/
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border-radius: 50%;
    top: 50%!important;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0!important;
    width: 25px!important;
    height: 25px!important;
    line-height: 25px;
    text-align: center;
}
div.rich-list ul {
    margin-top: 0 !important;
    padding: 1em .5em 1em 1.5em !important;
}
div.rich-list ul li {
    position: relative;
    padding-left: 25px;
}
div.rich-list ul li:before {
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 50%!important;
    left: -12.5px!important;
    transform: translateY(-50%);
    width: 25px!important;
    height: 25px!important;
    line-height: 1;
    content: '\f058'!important;/*ここを変更でチェックアイコンの色が変わります*/
    color: #F8BF39;
    font-size: 22px;
    text-align: center;
    background-color: #fff!important;
}
fontawesome4の場合
div.rich-list {
    margin: 0 0 1.6em/*リストの下に空白を開ける設定*/
}
div.rich-list p {
    display: none;
}
div.rich-list > div {
    display: inline-block;
    background: #F8BF39;/*ここを変更でタイトルの色が変わります*/
    color: #fff;
    margin-left: 0;
    border-radius: 7px 7px 0 0;
    font-size: 15px !important;
    padding: 2px 10px;
    border: none;
    font-weight:700;
}
div.rich-list ul,div.rich-list ol{
    border: solid 2px #F8BF39 !important;/*ここを変更でボーダーの色が変わります*/
    border-radius: 0 !important;
    list-style-type:none !important;
    margin:0!important;
}
div.rich-list ol {
    counter-reset: number;
    padding: .5em .2em .5em .8em !important;
}
div.rich-list ol li {
    position: relative;
    padding-left: 30px;
    margin-top: 0;
    line-height: 1.5;
    padding: 1em .5em 1em 35px;
}
div.rich-list ol li:before {
    position: absolute;
    counter-increment: number;
    content: counter(number);
    display: inline-block;  
    background: #F8BF39;/*ここを変更で数字の色が変わります*/
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border-radius: 50%;
    top: 50%!important;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0!important;
    width: 25px!important;
    height: 25px!important;
    line-height: 25px;
    text-align: center;
}
div.rich-list ul {
    margin-top: 0 !important;
    padding: 1em .5em 1em 1.5em !important;
}
div.rich-list ul li {
    position: relative;
    padding-left: 25px;
}
div.rich-list ul li:before {
    font-family: fontawesome;
    position: absolute;
    top: 50%!important;
    left: -12.5px!important;
    transform: translateY(-50%);
    width: 25px!important;
    height: 25px!important;
    line-height: 1;
    content: '\f058'!important;/*ここを変更でチェックアイコンの色が変わります*/
    color: #F8BF39;
    font-size: 22px;
    text-align: center;
    background-color: #fff!important;
}

2.PHPをコピペ

/*rich-list*/
function rich_list_func($atts, $content = null ) {
extract( shortcode_atts( array(
'title' => 'title',
), $atts ) );
return do_shortcode('<div class="rich-list"><div>'.$title.'</div>'.$content.'</div>');
}
add_shortcode('richlist', 'rich_list_func');

3.ショートコードをコピペ

[richlist title="タイトル"][/richlist]

4.使い方を覚える

文字の装飾を好きにすることができるので、文字を小さくしたり、色を変えたりできます。

     
普通の表情のせつこさん

少し使い方にクセがあるので、わからなかったら「コメント欄」で教えて欲しいです!

1行表示をしたい場合

このように1行で表示する場合は、リストにして文字を入力するだけです。

タイトル
  • sample
[ richlist title=”タイトル”]

1行の表示の場合、リストにして文字を入力するだけOKです。

[/richlist ]

2行表示をしたい場合

     
悲しいせつこさん

使い方はちょっとクセがあります。

[ richlist title=”タイトル”]

2行表示の場合、1行目を普通に入力し、「Shift」+「Enter」で改行をしてください。
そうすると、行間が詰まった感じになるのが正解です!

[/richlist ]

後は、1行ごとに好きに装飾をするだけです!

色を変えたり、文字の大きさを変えたりして、自分好みにしてみてくださいね♪

ちょっとリッチなリストまとめ

このページでは、「【コピペで簡単】ちょっとリッチなリストデザイン:CSSで箇条書きをおしゃれに」について書きました。

使い方にクセがあるものの、慣れると使いやすいデザインなのでおすすめです!

笑顔のせつこさん

個人的にお気に入りなデザイン!

わからなかったら「コメント欄」で教えていただければ対応しますが、その際に該当ページのURLがあるととても助かります。

ぜひ使ってみてくださいねー!

それではまた!