Ver1.3.1をリリースしました(11/22)

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

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

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

返信する

コメントを残す

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