今回はSANGOで記事内に様々なデザインの箇条書きを挿入する方法を紹介します。個性のあるデザインのブログにするためにぜひご活用ください。通常の箇条書きのデザインは以下の画像のようになります。デフォルトのデザインの箇条書きを挿入する方法は以下のようになります。ビジュアルエディタからビジュアルエディタを使って記事を書いている場合には、このようなアイコンをクリックすることで、箇条書きが挿入できるようになります。左がポッチ付、右が数字付きですね。それぞれエディタ上では、このような形で表示されると思います。Editなどで書いていて、HTMLで通常の箇条書きを作る場合には以下のように書きます。<li>3つめの文</li></ol>HTMLタグ「ul」「ol」「li」の使い方はこちらの記事で解説しています。【HTMLで箇条書き】ul・ol・liタグの使い方まとめSANGOオリジナルの箇条書きの使い方ここからはSANGOオリジナルデザインの箇条書きの使い方と種類一覧をまとめて紹介します。使い方まず、通常と同様に箇条書きを作成します。class="種類"]、後に[/list]と書いてはさみます。種類は後ほどまとめて紹介します。<li>3つめの文</li></ul>[/list]HTMLで書くと、上のようになります。ulの場合にもolの場合にも同様になります。examples.これは使用例ですメインカラーが、枠線の色となります。メインカラーはカスタマイザーで設定ができます(参考:SANGOの色設定)。examples.これは使用例です枠線にはメインカラーが、背景色には下地色が使われます。どちらもカスタマイザーで設定ができます。examples.これは使用例です点線の枠線にはメインカラーが使われます。examples.これは使用例です点線の枠線にはアクセントカラーが使われます。examples.これは使用例です点線の枠線にはアクセントカラーが使われます。examples.これは使用例です点線の枠線にはアクセントカラーが使われます。examples.これは使用例です上下線のみの箇条書きです。線も文字も色は黒です。examples.これは使用例ですベージュの背景色に影をつけています。examples.これは使用例ですカスタマイザーで設定した下地色が背景色となります。examples.これは使用例ですカスタマイザーでの設定色とは関係なくこの色になります。class="stitch-red"]〜箇条書き〜[/list]アイコンを使う箇条書きここからはポチの変わりにアイコンを表示させた箇条書きです。番号なし箇条書き(ul)でのみ使うことができます。examples.これは使用例ですメインカラーが線とシェブロンマークに使われます。examples.これは使用例ですオレンジのチェックリスト風箇条書きです。examples.これは使用例ですメインカラーを使う場合はこのようになります。main-c-before"]〜箇条書き〜[/list]番号を装飾した箇条書きここからは番号を装飾した箇条書きです。番号付きの箇条書き(ol)でのみ使えるのでご注意ください。examples.これは使用例です以下のコードのうち、li-mainbdrを消すと、枠線はシルバーになります。examples.これは使用例です影を消したい場合には、以下のコードのshadowを消してくださいませ。examples.これは使用例です以下のコードのうちli-accentbdrを消すと、枠線はシルバーになります。examples.これは使用例です枠線も何もつけないシンプルな箇条書きを挿入するためには以下のショートコードを使用します。class="list-raw"]〜箇条書き〜[/list]ボックスのショートコードと組み合わせて使うと色んな表現ができたりします。引用の中で箇条書きを使う方法MEMOこの問題についてはver1.1で修正済みです(“>詳細)。引用(blockquote)の中で箇条書きを使おうとすると、下のように枠が表示されてしまいます。見にくいですね...。これを解決するには、以下のCSSを子テーマのstyle.cssに貼り付ければOKです。0;}これで、引用ボックスの中に箇条書きを入れても余計な線が入ることが無くなります。こちらは箇条書きです。項目1項目2項目3こちらは箇条書きです。項目1項目2項目3AddQuicktagを使うのがおすすめどれもショートコードが長めになってしまうので、いちいちこのページからコピペしていくのは面倒かと思います。使うものはAddQuicktagに登録してすぐに呼び出せるようにしておくのが良いでしょう。2019/11/15リストの高さリストのと間の隙間をもっと小さくしたいのですが数字をいじれるようであれば教えて下さい。うまく説明できないのですが、下のサイトのリストのように隙間を減らしたいです。2019/10/26箇条書きの枠線や色が表示されないいつもお世話になっております。先日サルワカさんのwordpressテーマsangoをご購入させて頂き、楽しくブログ制作をさせて頂いております。ありがとうございます。初歩的な質問で申し訳ないのですが、箇条書きのショートコードをコピペし、プレビューを押すと文字は表示されるのですが、枠線や色が表示されません。2019/03/07Re:種類15:チェックリストのコードについてお世話になっております。コメントのスレッドに返信できなかったため、新規コメントでご回答いたします。こちらの事象は、特定ページでなくサイト内のすべてのページに発生しておりました。2019/03/07種類15:チェックリストのコードについていつもSANGOの丁寧なアフターフォローをありがとうございます。入れると、灰色の枠線になっていました。2019/01/08箇条書きの番号を途中から始めたい初めまして。デザインに惹かれて購入しとても満足しています。種類22の番号付き箇条書きを使う場合で、箇条書きの番号を指定したい(1、2、5・・・という感じ)のですが、上手くできません。ご教示頂けませんでしょか。2018/11/17箇条書きを入れ子にした際、親のスタイルと入れ子のスタイルを別々に指定したいお世話になります。テーマ、とても気に入っています。ありがとうございます。箇条書きを入れ子にした際、親のスタイルと入れ子のスタイルを別々に指定したい(親:チェックマーク、入れ子:シェブロンなど。)のですが、上手く表示されません。何か良い方法等ございましたら、ご教示いただければ幸いです。お手すきの際で構いませんので、よろしくお願いいたします。14の書き方をするとメインカラーで表示させるみたいことがしたいです。どのように書けばよいのか教えていただきたいです。2018/06/19こんにちは。こちらのテーマを使わせていただいております。2018/05/31こんにちは。素敵なテーマをありがとうございます。番号リストにショートコードを使うと順番(番号)を指定するもも無視されてしまうのですが、解決方法があったら教えていただけないでしょうか。2018/04/20番号を円にした箇条書きの背景色を変えたいお世話になります。(box32と同色にしたいなと思っています。ご教示のほど、宜しくお願いいたします。2018/03/23箇条書きの「種類15」の色を変えたいSANGOを購入させていただきました!とても完成度の高いテーマでとても満足しております。初歩的な質問かもしれませんが自力で解決できませんでしたので、質問させて下さい。2018/03/15購入させて頂いた者です。使いやすく満足しております。上記のような箇条書きのショートコードを入力しても枠が表示されません。追加の質問になってしまい申し訳ありません。いう方法があれば教えていただけると嬉しいです。できればシェブロンのみ使いたいと思っています。良いやり方があれば教えていただけると嬉しいです。2018/02/19度々すみません。最新ver.を使用しているはずなんですが引用の中で箇条書きをした際に黒い枠線が出てしまいます。style.cssをコピペで編集し更新しましたが反映されません。2018/02/18箇条書きの中で改行したいお世話になります。以下のように、箇条書きを、テキストモードで書いた後、ビジュアルモードにして再度テキストモードに戻すと、レイアウトが崩れてしまいます。2018/02/08ボックスと組み合わせてアイコン付きのリストを使いたい場合に、リストの囲み枠が邪魔になってしまうのですがどうすればいいでしょうか。他テーマからの移行で箇条書き+ボックス表示していたものがすべて枠とボックスの二重表示になってしまい、すべてを手作業で治すのはかなり大変なので・・・。コメント投稿ガイドラインを読んでから投稿してください。メールアドレスは公開されませんが、名前は公開されます。