【SANGO】箇条書き(リスト)のショートコードを増やす方法!CSSサンプルも紹介

https://shikamori-p.com/wp-content/uploads/2019/01/2019-01-21.jpg
バビ

ごきげんよう。最近SANGOの構造解析にハマっています、バビです。

以前こちらの記事で、SANGOのボックスのショートコードを増やす方法について紹介しました。

同じような方法で箇条書きのショートコードも増やせるので、そのやり方を紹介します。

ボックスに比べると、ちょっとだけCSSの設定がめんどいです。

SANGOの箇条書きショートコードのルール

SANGOの箇条書きショートコードはのこちらのページで紹介されています。

参考 記事に様々なスタイルの箇条書きを挿入するサルワカ
  • 要するに
  • こういう
  • やつですね

↑これの場合は、

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

というショートコードを使用しています。

これもボックスのときと同じで、この場合は、「li-check」という名前のクラス名のCSSが読み込まれます。

これを利用して、新たなクラス名、例えば「.li-sample」というクラス名で箇条書きのデザインのCSSコードを作れば、

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

という新しい箇条書きのショートコードを作れてしまいます。

新たに作成したボックスのサンプル

ひとまず簡単にこんな箇条書きボックスを作成してみました。

  • サンプル
  • サンプル
  • サンプル

私は基本的に他のボックスと合わせて使うことが多いので、矢印マーク以外は変えていません。

矢印なので「li-arrow」というクラス名にしました。

ショートコード
[list class="li-arrow"]~箇条書き~[/list]
CSS
/*矢印のリスト*/
.li-arrow ul {/*リスト全体*/
  position: relative;
  padding: 1em 0.5em 1em 2.5em;
  border: solid 2px #ffb03f;/*枠線の色*/
}
.li-arrow li {/*リストの各行*/
  list-style-type: none !important;
  padding: 0.5em 0;
  line-height: 1.5;
}
.li-arrow li:before {/*リストのアイコン*/
  position: absolute;
	left: 1em;
	font-weight: normal!important;
	font-family: "Font Awesome 5 Free";
	content: "\f35a";
}
/*以下はボックスのCSSより後じゃないと機能しない*/
/*箇条書き内のアイコンの余白調整*/
blockquote .li-arrow li:before,
.sng-box .li-arrow li:before,
.memo .li-arrow li:before,
.alert .li-arrow li:before,
.li-arrow li li:before {
  left: 0;
}
/*ボックス内の箇条書きの線を消す(複数リストを作る場合は、最後に1つだけあればOK)*/
.sc ul,
.sc ol,
.list-raw ul,
.list-raw ol,
.sng-box ul,
.sng-box ol,
.memo ul,
.memo ol {
  margin: 5px 0;
  padding: 0 0 0 1.4em;
  border: none;
  box-shadow: none;
  background: transparent;
}
.amazonjs_info ul {
  border: none;
}
注意
  • 赤字のクラス名は統一しておく必要があります。
  • ボックスのCSSのカスタマイズをしている場合、「以下はボックスのCSSより後じゃないと機能しない」から下のCSSを、ボックスデザインのCSSより下にしておかないと、ボックス内に箇条書きを入れたときのデザインの自動調整が動きません。
  • 「ボックス内の箇条書きの線を消す」から下のCSSは、複数の箇条書きデザインのCSSを作成した場合は、最後に1つだけあればOKです。
Font Awesomeのバージョン

「Font Awesome 5」対応のCSSなので、「Font Awesome4.7」を使用している人は、赤字の「Font Awesome 5 Free」を「Font Awesome」に変更してください。

アイコンを自由に設定できるのがいいですね。

ボックスと合わせて使う人は、最初からそのボックスのデザインにしたものを作るのも便利かもしれません。

↓この関連記事は、今回作ったリストとボックスを組み合わせています。

コメントを残す

メールアドレスが公開されることはありません。