1.8.2 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

56 COMMENTS

Yoshi 2019/03/07

お世話になっております。
コメントのスレッドに返信できなかったため、新規コメントでご回答いたします。

こちらの事象は、特定ページでなくサイト内のすべてのページに発生しておりました。

なお動作環境としては、
・エックスサーバー
・Autoptimize利用
・Xサーバーにて、キャッシュ機能を有効化
です。

当初キャッシュの問題かと思いましたが、キャッシュ削除後も同じよだったため、追加でクラスを追加した流れになります。

どうぞよろしくお願い申し上げます。

回答を見る
Yoshi 2019/03/07

いつもSANGOの丁寧なアフターフォローをありがとうございます。

さて最新ver1.7.7において、種類15:チェックリストのコードを

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

で入れると、灰色の枠線になっていました。

他の枠同様、class=”li-check li-accentbdr” を指定してあげると、黄色の枠線になりましたので、念のためご報告いたします。

SANGOは大変気に入っていますので、今後ともよろしくお願いします。

回答を見る
ポン太 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 {
border-color: #f00;
}
.entry-content .li-chevron li:before {
color: #f00;
}

回答を見る
chiaki 2018/06/19

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

回答を見る
WV 2018/05/31

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

回答を見る
はかせ 2018/04/20

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

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

回答を見る
暇人 2018/03/23

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

回答を見る
初心者です 2018/03/15

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

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

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

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

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

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

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

回答を見る
もか 2018/02/26

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

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

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

回答を見る
もか 2018/02/26

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

回答を見る
あきねこ 2018/02/19

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

回答を見る
TS 2018/02/18

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

[list class="li-chevron"]

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

[/list]

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

[list class="li-chevron"]

1行目>

1行目の概要・・・

[/list]

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

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

回答を見る
キキ 2018/02/08

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

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

回答を見る
ママ 2018/01/07

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

回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン