Ver1.6 Released !

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

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]

上のように、作成した箇条書きの前に[list class="種類"]、後に[/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

51 Comments

DOLLY

ショートコードの「補足説明」と「注意書き」でも箇条書きの枠表示を消したい場合、「blockquote」を「memo」と「alert」に変更すれば同じようにstyle.cssに追記で対応できますか?

返信する
サルワカくん

該当される点については、2017/09/26にリリースしたver1.1.3で対応致しました。
アップデート頂くと、枠線が表示されないようになります。
ご迷惑をおかけしますが、ご確認よろしくお願い致します。
https://saruwakakun.com/sango/update-info

返信する
DOLLY

新Ver.のリリースありがとうございます。
種類15の「チェックリスト」にも対応していますか?
アップデートしたものの、枠線が表示されてしまいます。

返信する
サルワカくん

ver1.1.3で枠線の表示は修正されているはずです(一度キャッシュを削除してご確認頂けますか?)。
ただし、箇条書きの中に黒ポチ以外の箇条書きを入れるとずれるようなので、
そちらは次回修正致します。

返信する
ママ

固定ページや投稿ページのデフォルトを枠線なしになるようにCSS編集することは可能でしょうか?
他テーマからの移行で箇条書き+ボックス表示していたものがすべて枠とボックスの二重表示になってしまい、すべてを手作業で治すのはかなり大変なので・・・。

返信する
サルワカくん
.entry-content ul, .entry-content ol {
    border: none;
    padding: 0 0 0 1.5em;
}

で消すことができるかと思います。
ご確認よろしくお願いいたします。

返信する
キキ

ボックスと組み合わせてアイコン付きのリストを使いたい場合に、リストの囲み枠が邪魔になってしまうのですがどうすればいいでしょうか。

例えばbox28内で「種類15:チェックリスト」を使う時、チェックマークだけを残して箇条書きにしたいのですが、、、

返信する
サルワカくん

こちらで試したところ、枠なしで問題なく表示されました。
SANGOのバージョンはいくつをお使いですか?
Ver1.2くらいまでだと、枠が残ってしまったりします。

返信する
TS

お世話になります。
以下のように、箇条書きを、テキストモードで書いた後、ビジュアルモードにして再度テキストモードに戻すと、レイアウトが崩れてしまいます。

[list class="li-chevron"]

1行目>
1行目の概要・・・

[/list]

↓↓(テキストモード⇒ビジュアルモード⇒テキストモード)

[list class="li-chevron"]

1行目>

1行目の概要・・・

[/list]

どちらのモードでも固定レイアウトで書くことはできないでしょうか?
それとも、liタグの下に文字を書くことがそもそも想定外でしょうか?

以上、よろしくお願い致します。

返信する
サルワカくん

ulタグの中には、基本的にliタグのみを入れるようにしましょう。
liタグを以下のようにするとイメージ通りになるかもしれません。

<li>1行目<br>1行目の概要</li>

※ brは改行タグです。

返信する
TS

お世話になります。
ご回答ありがとうございます。
ご指摘いただいた方法で実現できました。

以上、今後ともよろしくお願い致します。

返信する
あきねこ

度々すみません。
最新ver.を使用しているはずなんですが引用の中で箇条書きをした際に黒い枠線が出てしまいます。
style.cssをコピペで編集し更新しましたが反映されません。
.entry-content blockquote ul, .entry-content blockquote ol {
border: none;
padding: 5px 0 5px 20px;
margin: 0;
}
でOKですよね?

返信する
あきねこ

この順番がいけないんでしょうか?

箇条書き
箇条書き
箇条書き

何度も書き込んでコメント欄を荒らしてしまいすみません。

返信する
サルワカくん

原因がちょっと分からないので、該当するページを教えて頂けますか?(ウェブサイトの欄に入れてくださいませ)

返信する
サルワカくん

あーなるほど。
ボックスの中の引用は想定していませんでした。

.entry-content .sng-box blockquote {
    border: none;
    padding-right: 0;
}

を追加すれば対応できます。

返信する
もか

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

返信する
サルワカくん
.li-chevron.li-mainbdr ul {
    border: none;
    padding: 0 0 0 1.5em;
}
.li-chevron.li-mainbdr li:before {
    left :0;
}

というCSSを追加すると線なしになります。

返信する
もか

試してみた所、線なしのシェブロンマークを表示できました!
お忙しい中、教えていただきありがとうございました!

実は、サイト内の全ての箇条書きを種類14のシェブロンマーク(枠線なし)で装飾したいと思っているのですが、これを一括でやる方法はあるのでしょうか?

追加の質問になってしまい申し訳ありません。
もしそういう方法があれば教えていただけると嬉しいです。

返信する
サルワカくん
.entry-content ul {
    position: relative;
    padding: 0 0 0 1.5em;
    border: none;
}
.entry-content ul li {
    position: absolute;
    left: 0;
    color: skyblue;
    font-family: FontAwesome;
    content: "\f138";
}

でいけるかと思います。

返信する
もか

ご返信ありがとうございます!

教えていただいた上記コードを追加してみたのですが、シェブロンマークが表示されず、レイアウトが大きく崩れて、箇条書き部分が左によってしまいました。
何度も申し訳ありませんが、原因などわかれば教えていただけますでしょうか。

返信する
サルワカくん

強縮ながら一部コードに誤りがあったので、さきほどのコメントを修正しました。
具体的には、下の.entry-contentの次はulではなくul liになります。
お手数ですが、もう一度お試し頂ければと思います。

返信する
もか

修正していただいたコードを追加してみたのですが、箇条書き部分と目次の部分が全て重なるような感じで大きく崩れてしまいました。
シェブロンマークも表示されませんでした。

何度もお手数おかけしてしまい申し訳ありません。

サルワカくん

うーん、下記のCSSでどうでしょうか。

.entry-content > ul {
    position: relative;
    padding: 0 0 0 1.5em;
    border: none;
}
.entry-content>ul>li {
    list-style: none;
}
.entry-content>ul>li:before {
    position: absolute;
    left: 0;
    color: skyblue;
    font-family: FontAwesome;
    content: "\f138";
}

目次にもulタグが使われる仕様のようなので、目次のulは除外されるよう、記事直下のul(divタグなどに囲まれていないulタグ)にのみ
適用されるようにしています。そのため、シェブロンマークが表示されない箇所(直下でないulタグ)については「スタイル」から挿入して頂くようお願いします。

もか

試してみた所、無事にシェブロンマークが表示されました!
本当にありがとうございます!

お忙しい中、大変お手数おかけしました。
ご丁寧にありがとうございました。

サルワカくん

おぉ、良かったです!よろしくお願いします。

初心者です

購入させて頂いた者です。とても使いやすく満足しております。
初歩的な質問で申し訳ないのですが、箇条書きとボックスのやり方についてなのですが

[list class="li-mainbdr strong"]
〜箇条書き〜
[/list]

上記のような箇条書きのショートコードを入力しても枠が表示されません。
また、

[box class="box1"]ここに文章[/box]

上記のようなボックスだと背景がグレーの塗りつぶしの白文字で表示されてしまうのですがやり方が間違っているでしょうか?

ちなみに、
[memo title="MEMO"]ここに文章[/memo]や[alert title="注意"]ここに文章[/alert]はそのまま貼り付けてちゃんと表示されています。

お手数おかけしますがよろしくお願い致します。

返信する
サルワカくん

① ショートコードの中に箇条書き(番号なしリスト)を入れていますか?
箇条書きを入れると線が表示されます。

② box1のショートコードを貼ると、「背景がグレーの塗りつぶしの白文字」になるのですか?
うーん、何か間違えている気がします。もしくはカスタマイズの影響か、ですね。
ちなみにそちらのショートコードは合っています。

返信する
暇人

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

返信する
サルワカくん

子テーマのstyle.cssに以下のCSSを追加することでいけるかと思います!

.entry-content .li-check ul {
    border-color: #色コード;
}
.entry-content .li-check li:before {
  color: #色コード;
}

下の色コードはチェックマークの色です。

返信する
ピピノブ

お世話になります。初期設定の箇条書きの表示を、こちらでご紹介いただいているような形式に変更する方法がありましたら教えていただけませんでしょうか?よろしくお願いいたします。

返信する
ピピノブ

お世話になります。ご返信ありがとうございます。種類8、種類16、種類22を初期設定にするやり方をご教授いただけると助かります。よろしくお願いいたします。

返信する
はかせ

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

ご教示のほど、宜しくお願いいたします。

返信する
サルワカくん
.ol-circle li:before {
  background-color: #色コード;
}

を子テーマのstyle.cssなどに追加すれば変更できます。
box32のカラーコードは#f5a15fですね。

返信する
WV

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

返信する
サルワカくん

こんにちは。種類21以降が番号リスト用になります。
それ以外のショートコードを番号リストに使っても反映されません。
代わりになるかわかりませんが、ボックスの中に番号リストを入れると良いかもしれません。

返信する
WV

こんにちは。早速お返事をありがとうございます。すみません、質問にhtmlタグをそのまま書いたら表示されなかったようですね。使っているのは21番以降のショートコードで、ボックスの中で使っています(外でも使ってみました)。例えば、リストを3番から始めたいいときに「ol start=”3″」「li value=”3″」を書き込むとビジュアルエディターでは指定した番号がきちんと表示されるのですが、実際のサイト上の表示は全部1番開始になってしまいます。解決策がありましたらよろしくお願いします。

返信する
サルワカくん

あ、なるほど。理解しました。
このような装飾番号リストを作成するときには
番号の設定を1度リセットしたうえで、番号を表示しています。
番号を途中から始めたいときには、olタグの中に以下のようなstyle属性を追加します。

<ol style="counter-reset: number 4">

上のように4の数字を入れると、5番目から始まるようになります。
もしnumber 2とすれば、3番目から始まるようになります。

返信する
chiaki

こんにちは。こちらのテーマを使わせていただいております。
アイコンを、こちらが用意した画像を一つ一つを変えて使用することはできますか?

返信する
ハリネズミ

こんにちは

「種類13:シェブロンマーク」と「種類14:メインカラーを使う場合」
に対して質問なのですが、
シェブロンマークのデフォルトを赤色にして
14の書き方をするとメインカラーで表示させるみたいことがしたいです。

ですが、下の設定をしてしまうと全部赤色になってしまうので
どのように書けばよいのか教えていただきたいです。
.entry-content .li-chevron ul {
border-color: #f00;
}
.entry-content .li-chevron li:before {
color: #f00;
}

返信する
サルワカくん

なるほど。CSSの否定セレクタを用いることで可能です。

.entry-content .li-chevron:not(.li-mainbdr) ul {
border-color: #f00;
}
.entry-content .li-chevron:not(.li-mainbdr) li:before {
color: #f00;
}
返信する
もりお

お世話になります。
テーマ、とても気に入っています。
ありがとうございます。

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

お手すきの際で構いませんので、よろしくお願いいたします。

返信する
サルワカくん

お世話になります。大変申し訳ないのですが、入れ子には対応しておりません…
(さきほど試行錯誤してみましたが、仕様上難しいです…)
ご理解頂けるとありがたいです。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です