記事に様々なスタイルの箇条書きを挿入する

SANGOの箇条書き種類一覧

今回はSANGOで記事内に様々なデザインの箇条書きを挿入する方法を紹介します。個性のあるデザインのブログにするためにぜひご活用ください。

通常の箇条書きの挿入の仕方

通常の箇条書きのデザインは以下の画像のようになります。

デフォルトのデザインの箇条書きを挿入する方法は以下のようになります。

ビジュアルエディタから

ビジュアルエディタを使って記事を書いている場合には、このようなアイコンをクリックすることで、箇条書きが挿入できるようになります。左がポッチ付、右が数字付きですね。

それぞれエディタ上では、このような形で表示されると思います。

HTMLで箇条書きを指定する場合

記事をテキストエディタやMars Editなどで書いていて、HTMLで通常の箇条書きを作る場合には以下のように書きます。

HTML
<!--黒ポチ-->
<ul>
   <li>1つめの文</li>
   <li>2つめの文</li>
   <li>3つめの文</li>
</ul>

<!--番号付き-->
<ol>
   <li>1つめの文</li>
   <li>2つめの文</li>
   <li>3つめの文</li>
</ol>

HTMLタグ「ul」「ol」「li」の使い方はこちらの記事で解説しています。

【HTMLで箇条書き】ul・ol・liタグの使い方まとめ
【HTMLで箇条書き】ul・ol・liタグの使い方まとめ


SANGOオリジナルの箇条書きの使い方

ここからはSANGOオリジナルデザインの箇条書きの使い方と種類一覧をまとめて紹介します。

使い方

まず、通常と同様に箇条書きを作成します。

ビジュアルエディタ
[list class="種類"]
・ 1つめの文
・ 2つめの文
・ 3つめの文
[/list]

上のように、作成した箇条書きの前に

、後に
と書いてはさみます。種類は後ほどまとめて紹介します。

HTML
[list class="種類"]
<ul>
   <li>1つめの文</li>
   <li>2つめの文</li>
   <li>3つめの文</li>
</ul>
[/list]

HTMLで書くと、上のようになります。ulの場合にもolの場合にも同様になります。


種類1:メインカラーを枠線に使ったリスト

ポチ付き

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

番号付き

  1. 箇条書きのサンプル
  2. List design examples.
  3. これは使用例です

メインカラーが、枠線の色となります。メインカラーはカスタマイザーで設定ができます(参考:SANGOの色設定)。

ショートコード
[list class="li-mainbdr strong"]
〜箇条書き〜
[/list]

種類2:メインカラー+下地色

ポチ付き

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

番号付き

  1. 箇条書きのサンプル
  2. List design examples.
  3. これは使用例です

枠線にはメインカラーが、背景色には下地色が使われます。どちらもカスタマイザーで設定ができます。

ショートコード
[list class="li-mainbdr li-pastelbc strong"]
〜箇条書き〜
[/list]

種類3:メインカラーの点線

ポチ付き

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

番号付き

  1. 箇条書きのサンプル
  2. List design examples.
  3. これは使用例です

点線の枠線にはメインカラーが使われます。

ショートコード
[list class="li-mainbdr li-dashed"]
〜箇条書き〜
[/list]

種類4:アクセントカラーの点線

ポチ付き

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

番号付き

  1. 箇条書きのサンプル
  2. List design examples.
  3. これは使用例です

点線の枠線にはアクセントカラーが使われます。

ショートコード
[list class="li-accentbdr li-dashed"]
〜箇条書き〜
[/list]

種類5:メインカラーの二重線

ポチ付き

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

番号付き

  1. 箇条書きのサンプル
  2. List design examples.
  3. これは使用例です

点線の枠線にはアクセントカラーが使われます。

ショートコード
[list class="li-mainbdr li-double strong"]
〜箇条書き〜
[/list]

種類6:アクセントカラーの二重線

ポチ付き

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

番号付き

  1. 箇条書きのサンプル
  2. List design examples.
  3. これは使用例です

点線の枠線にはアクセントカラーが使われます。

ショートコード
[list class="li-accentbdr li-double strong"]
〜箇条書き〜
[/list]

種類7:上下線のみ

ポチ付き

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

番号付き

  1. 箇条書きのサンプル
  2. List design examples.
  3. これは使用例です

上下線のみの箇条書きです。線も文字も色は黒です。

ショートコード
[list class="li-tandb strong"]
〜箇条書き〜
[/list]

種類8:背景色+影

ポチ付き

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

番号付き

  1. 箇条書きのサンプル
  2. List design examples.
  3. これは使用例です

ベージュの背景色に影をつけています。

ショートコード
[list class="li-beige shadow"]
〜箇条書き〜
[/list]

種類9:下地色バージョン

ポチ付き

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

番号付き

  1. 箇条書きのサンプル
  2. List design examples.
  3. これは使用例です

カスタマイザーで設定した下地色が背景色となります。

ショートコード
[list class="li-pastelbc shadow nobdr strong"]
〜箇条書き〜
[/list]

種類10:ステッチ(水色)

ポチ付き

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

番号付き

  1. 箇条書きのサンプル
  2. List design examples.
  3. これは使用例です

カスタマイザーでの設定色とは関係なくこの色になります。

ショートコード
[list class="stitch-blue"]
〜箇条書き〜
[/list]

種類11:ステッチ(橙)

ポチ付き

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

番号付き

  1. 箇条書きのサンプル
  2. List design examples.
  3. これは使用例です

ショートコード
[list class="stitch-orange"]
〜箇条書き〜
[/list]

種類12:ステッチ(赤)

ポチ付き

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

番号付き

  1. 箇条書きのサンプル
  2. List design examples.
  3. これは使用例です

ショートコード
[list class="stitch-red"]
〜箇条書き〜
[/list]


アイコンを使う箇条書き

ここからはポチの変わりにアイコンを表示させた箇条書きです。番号なし箇条書き(ul)でのみ使うことができます。

種類13:シェブロンマーク

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

ショートコード
[list class="li-chevron"]
〜箇条書き〜
[/list]

種類14:メインカラーを使う場合

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

メインカラーが線とシェブロンマークに使われます。

ショートコード
[list class="li-chevron li-mainbdr main-c-before"]
〜箇条書き〜
[/list]

種類15:チェックリスト

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

オレンジのチェックリスト風箇条書きです。

ショートコード
[list class="li-check"]
〜箇条書き〜
[/list]

種類16:メインカラーを使う場合

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

メインカラーを使う場合はこのようになります。

ショートコード
[list class="li-check li-mainbdr main-c-before"]
〜箇条書き〜
[/list]

種類17:指差し

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

ショートコード
[list class="li-yubi"]
〜箇条書き〜
[/list]

種類18:メインカラーを使う場合

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

ショートコード
[list class="li-yubi li-mainbdr main-c-before"]
〜箇条書き〜
[/list]

種類19:肉球

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

ショートコード
[list class="li-niku"]
〜箇条書き〜
[/list]

種類20:メインカラーを使う場合

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

ショートコード
[list class="li-niku li-mainbdr main-c-before"]
〜箇条書き〜
[/list]


番号を装飾した箇条書き

ここからは番号を装飾した箇条書きです。番号付きの箇条書き(ol)でのみ使えるのでご注意ください。

種類21:番号を円に

  1. 箇条書きのサンプル
  2. List design examples.
  3. これは使用例です

ショートコード
[list class="ol-circle"]
〜箇条書き〜
[/list]

種類22:メインカラーを使う場合

  1. 箇条書きのサンプル
  2. List design examples.
  3. これは使用例です

以下のコードのうち、li-mainbdrを消すと、枠線はシルバーになります。

ショートコード
[list class="ol-circle li-mainbdr main-bc-before"]
〜箇条書き〜
[/list]

種類23:メインカラー+下地色+影

  1. 箇条書きのサンプル
  2. List design examples.
  3. これは使用例です

影を消したい場合には、以下のコードのshadowを消してくださいませ。

ショートコード
[list class="ol-circle li-pastelbc shadow nobdr strong main-bc-before"]
〜箇条書き〜
[/list]

種類24:アクセントカラーを使う場合

  1. 箇条書きのサンプル
  2. List design examples.
  3. これは使用例です

以下のコードのうちli-accentbdrを消すと、枠線はシルバーになります。

ショートコード
[list class="ol-circle li-accentbdr acc-bc-before"]
〜箇条書き〜
[/list]

【参考】線なしにしたい場合

ポチだけ

  • 箇条書きのサンプル
  • List design examples.
  • これは使用例です

番号だけ

  1. 箇条書きのサンプル
  2. List design examples.
  3. これは使用例です

枠線も何もつけないシンプルな箇条書きを挿入するためには以下のショートコードを使用します。

ショートコード
[list class="list-raw"]
〜箇条書き〜
[/list]

ボックスのショートコードと組み合わせて使うと色んな表現ができたりします。

SANGOのボックス種類一覧 ボックス・枠を挿入する方法と種類一覧


引用の中で箇条書きを使う方法

MEMO
この問題についてはver1.1で修正済みです(“>詳細)。

引用(blockquote)の中で箇条書きを使おうとすると、下のように枠が表示されてしまいます。

見にくいですね…。これを解決するには、以下のCSSを子テーマのstyle.cssに貼り付ければOKです。

style.css
.entry-content blockquote ul, .entry-content blockquote ol {
    border: none;
    padding: 5px 0 5px 20px;
    margin: 0;
}

これで、引用ボックスの中に箇条書きを入れても余計な線が入ることが無くなります。

こちらは箇条書きです。

  • 項目1
  • 項目2
  • 項目3

こちらは箇条書きです。

  • 項目1
  • 項目2
  • 項目3


106 COMMENTS

アバター
としま 2022/07/22

番号付きリストの不具合

こちらのコメント欄で「番号付きリストが初期値になってしまう」を拝見したのですが、私のサイトも同じ症状になっています。 バージョンを確認したところ3.0.22なのですが古いのでしょうか? よく分からないので教えていただけないでしょうか。よろしくお願いいたします。

回答を見る
アバター
ばすか 2022/07/11

番号付きリストの色が初期値になってしまう

いつも大変お世話になっております! さて、番号付きリストの色をアクセントカラー(当方のWEBではオレンジ色)にしていたのですが、いつの間にかSANGOの初期値の色(水色)になってしまっていました。 [list class="ol-circle li-accentbdr acc-bc-before"] で書いていたのですが…。 解決方法があればご教示いただきたく思います。 どうぞよろしくお願いいたし…

回答を見る
アバター
マサ 2022/06/08

標準スタイルとそれ以外の引用を両方使用したい

標準スタイルの引用と、別に紹介されている青バージョンの引用を両方使用したいため、青バージョンの方をblockquoteではなくdivでクラス名をつけてデザインしてみました(もはや引用ではないですが・・・)。 しかし、引用符が表示されません。 解決法があればお教えいただけないでしょうか? よろしくお願いいたします。

回答を見る
アバター
kaho 2022/05/10

「番号付きリスト設定」の「初期値」

いつもお世話になっております。 今まで、 以下のご相談内容を参考にさせていただき、 ショートコードで「タイムライン」の中に「番号付きリストの番号を途中から始める」方法を利用していました。 https://saruwakakun.com/sango/comments?id=1678 --------------* 今回、 タイムラインの中に「画像」「吹き出し」や「アコーディオン」なども挿入できるよう…

回答を見る
アバター
mu 2021/12/17

人気記事にある一つのサムネイルの位置がおかしい

いつもSANGOを快適に使わせていただいております。 今回、人気記事を変更した所、記事の画像サムネイルの位置がおかしくなってしまいました。。 ウィジェット→トップページ記事一覧上→カスタムHTMLで、<img src= の後に入れる画像ファイルのURLやh2だけ変えたのですが、どのような事が原因なのでしょうか? ご教授いただけたら幸いです。

回答を見る
アバター
トマト 2021/12/03

種類13~20の装飾された番号リストがバグってる

いつもお世話になっております。 種類13~20の装飾された番号リスト(青色の✅や肉球など)だけ記事を書く部分の外側(PCだと左側)に大きくずれて表示されてしまいます。※スマホ・PCどちらでもズレてしまいます。 種類12までと種類21以降は崩れることなく表示されています。 どのようにすれば、きちんとレイアウトが崩れることなく表示されるでしょうか? ※追加CSSやコードを直接いじったり等のテーマ内部を…

回答を見る
アバター
もぐ 2021/06/21

blockquoteのデフォルトの枠線を消して、背景と「“」をグレーにしたい。

blockquoteのデフォルトの枠線を消して、背景と「“」をグレーにしたい。 https://saruwakakun.com/html-css/reference/blockquote ↑上記、サルワカのblockquoteのデザインを変えるサイトにあるような、CSSをコピーして、追加CSSに張り付けても、デフォルトのblockquoteの「枠線」が消えず、「“」←この記号の色もメインカラーのま…

回答を見る
アバター
SKY 2021/04/27

箇条書き内にリンクを貼りたい

箇条書きのショートコードを利用して、その箇条書きにした部分に、自分のサイトのたページリンクを貼りたいのですが、できますでしょうか??

回答を見る
アバター
RYO 2021/03/16

枠線なしバージョンを別のショートコードとして割り当て,中央揃えにしたい

いつもお世話になっております。 「種類16: メインカラーを使う場合」の箇条書きを枠線なしで使いたいのですが,どうすれば良いのでしょうか。 種類16自体は別箇所で使おうと思っているので,新たにショートコードを割り当てたいと考えています。 また,枠線なしの種類16で箇条書きを中央揃えにしたいのですが,そのまま中央揃えにすると先頭部分がガタガタになりうまく揃いません。 全体は中央揃えにしながらも左端は…

回答を見る
アバター
nao 2021/03/01

【参考】線なしにしたい場合のポチのみの色を変えたい

お世話になります。 【参考】線なしにしたい場合のポチの色を変更するには どのように変更すれば宜しいでしょうか?教えて頂けると嬉しいです。

回答を見る
アバター
SUB 2020/07/11

「箇条書きの枠線を一括で消したい」について

2018/01/07に「箇条書きの枠線を一括で消したい」といった質問がございますが、そちらで紹介されていますCSSを入力したところ、枠線は消えたのですが、チェックもしくはシェブロンマークが1文字目と被ってしまいます。 この点の解決作はございますでしょうか?

回答を見る
アバター
桧原 友佳 2020/06/12

円番号や指チェック、シェブロンをメインの色と、別の色とで使い分けたい

いつもお世話になっております。 円番号や指チェック、シェブロンをメインカラーと別の色で使い分けたいのですが、 以下のCSSで色を変更すると、メインカラーも変わってしまいます。 何か方法はありますでしょうか? .entry-content .li-chevron ul { border-color: 色コード; } .entry-content .li-chevron li:before { col…

回答を見る
アバター
ほーせ 2020/05/17

リストがモバイル版では反映されない

ご紹介いただいているアイコン付の箇条書き(例えば、肉球マーク)が、PCだと正しく表示されるのですが、モバイル版だとアイコンが消え、さらに箇条書きの前後にショートコードが残ってしまっています。何か対策はございますでしょうか。ビギナーのため、仕様が分からず申し訳ございませんが、ご対応頂ければ幸いです。

回答を見る
アバター
ローマン 2020/05/05

トップページで使用する箇条書きのCSS

はじめまして、ローマンと申します。 SANGOを1ヶ月使用してますが、とても快適で良いサイトになってきました。 それでブログも記事が増えてきて、トップページをカテゴリごとに分けて箇条書きにリンクを載せようと思っているところです。 記事のなどにはクラス名をつけず、 このようにCSSを指定しています。 /* リストカラーボックス */ .entry-content ul, .entry-content…

回答を見る
アバター
タロ 2020/04/30

ボックスのメモ・注意書きの使い方の、アイコン・文字色と背景カラーの変更

お世話になります。 タイトルに記載しています通り、ボックスのメモ・注意書きの使い方の、アイコンの変更・文字色(MEMOや注意の部分)と背景カラーの変更をすることは可能でしょうか? SANGO親テーマのentry-option.cssから上記のcssを確認して、子テーマのスタイルシート上で色々といじってみましたが上手くいきませんでした。 backgroundが背景色、colorが文字色、conten…

回答を見る
アバター
ペンギン 2020/03/30

種類14の枠線のみシルバーにしたい

お世話になっております。 種類14のシェブロンマークはメインカラーで、枠線のみシルバーにしたいと考えております。 恐れ入りますが、ご教示のほどお願いいたします。

回答を見る
アバター
no 2019/11/15

リストの高さ

リストのと間の隙間をもっと小さくしたいのですが数字をいじれるようであれば教えて下さい。 うまく説明できないのですが、下のサイトのリストのように隙間を減らしたいです。 https://www.ign.com/articles/2019/11/14/xbox-game-pass-adds-rage-2-darksiders-3-witcher-3-this-year よろしくお願いします。

回答を見る
アバター
しゅん 2019/10/26

箇条書きの枠線や色が表示されない

いつもお世話になっております。 先日サルワカさんのwordpressテーマsangoをご購入させて頂き、楽しくブログ制作をさせて頂いております。とても使いやすいです。ありがとうございます。 初歩的な質問で申し訳ないのですが、箇条書きのショートコードをコピペし、プレビューを押すと文字は表示されるのですが、枠線や色が表示されません。 吹き出しや、ボックスのショートコードだときちんと表示されるのですが、…

回答を見る
アバター
Yoshi 2019/03/07

種類15:チェックリストのコードについて

いつもSANGOの丁寧なアフターフォローをありがとうございます。 さて最新ver1.7.7において、種類15:チェックリストのコードを [list class="li-check"] 〜箇条書き〜 [/list] で入れると、灰色の枠線になっていました。 他の枠同様、class="li-check li-accentbdr" を指定してあげると、黄色の枠線になりましたので、念のためご報告いたします…

回答を見る
アバター
ポン太 2019/01/08

箇条書きの番号を途中から始めたい

初めまして。デザインに惹かれて購入しとても満足しています。 種類22の番号付き箇条書きを使う場合で、箇条書きの番号を指定したい(1、2、5・・・という感じ)のですが、上手くできません。ご教示頂けませんでしょか。

回答を見る
アバター
はるき 2019/01/03

箇条書きを常に「上下線のみ」に変えたい

ビジュアルエディタの箇条書きボタンを常に 【種類7:上下線のみ】 に変更したのですが可能でしょうか? 子テーマのstyle.cssに入力が必要でしょうか?

回答を見る
アバター
もりお 2018/11/17

箇条書きを入れ子にした際、親のスタイルと入れ子のスタイルを別々に指定したい

お世話になります。 テーマ、とても気に入っています。 ありがとうございます。 質問ですが、 箇条書きを入れ子にした際、親のスタイルと入れ子のスタイルを別々に指定したい(親:チェックマーク、入れ子:シェブロンなど。)のですが、上手く表示されません。 何か良い方法等ございましたら、ご教示いただければ幸いです。 お手すきの際で構いませんので、よろしくお願いいたします。

回答を見る
アバター
ハリネズミ 2018/10/20

一部の箇条書きショートコードのスタイルのみを変えたい

こんにちは 「種類13:シェブロンマーク」と「種類14:メインカラーを使う場合」 に対して質問なのですが、 シェブロンマークのデフォルトを赤色にして 14の書き方をするとメインカラーで表示させるみたいことがしたいです。 ですが、下の設定をしてしまうと全部赤色になってしまうので どのように書けばよいのか教えていただきたいです。 .entry-content .li-chevron ul { bord…

回答を見る
アバター
WV 2018/05/31

番号付きリストを番号の途中から始めたい

こんにちは。素敵なテーマをありがとうございます。番号リストにショートコードを使うと順番(番号)を指定するもも無視されてしまうのですが、解決方法があったら教えていただけないでしょうか。よろしくお願いいたします。

回答を見る
アバター
はかせ 2018/04/20

番号を円にした箇条書きの背景色を変えたい

お世話になります。 21のサークルの色を任意のカラーコードに変更するには どのように変更すれば宜しいでしょうか? (box32と同色にしたいなと思っています。) ご教示のほど、宜しくお願いいたします。

回答を見る
アバター
暇人 2018/03/23

箇条書きの「種類15」の色を変えたい

SANGOを購入させていただきました!とても完成度の高いテーマでとても満足しております。初歩的な質問かもしれませんが自力で解決できませんでしたので、質問させて下さい。。箇条書きの「種類15」について、カラーの変更はできませんでしょうか?

回答を見る
アバター
もか 2018/02/26

サイト内の全ての箇条書きを種類14のシェブロンマークにしたい

試してみた所、線なしのシェブロンマークを表示できました! お忙しい中、教えていただきありがとうございました! 実は、サイト内の全ての箇条書きを種類14のシェブロンマーク(枠線なし)で装飾したいと思っているのですが、これを一括でやる方法はあるのでしょうか? 追加の質問になってしまい申し訳ありません。 もしそういう方法があれば教えていただけると嬉しいです。

回答を見る
アバター
もか 2018/02/26

種類14「メインカラー」の箇条書きの枠線を消したい

「種類14:メインカラーを使う場合」のデザインを枠線なしで使うことは可能でしょうか? できればシェブロンのみ使いたいと思っています。 良いやり方があれば教えていただけると嬉しいです。

回答を見る
アバター
TS 2018/02/18

箇条書きの中で改行したい

お世話になります。 以下のように、箇条書きを、テキストモードで書いた後、ビジュアルモードにして再度テキストモードに戻すと、レイアウトが崩れてしまいます。 [list class="li-chevron"] 1行目> 1行目の概要・・・ [/list] ↓↓(テキストモード⇒ビジュアルモード⇒テキストモード) [list class="li-chevron"] 1行目> 1行目の概要・・…

回答を見る

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。