チェックマーク付きリスト表示をワンクリックで入力する方法
ブログ記事を書いていると、特長やまとめなどをリスト表示したい場合があります。
「目立つようなリスト形式にしたい」と思われたら、「チェックボックス付きのリスト」にしてみるのはいかがでしょう？
スポンサーリンク
リスト形式の文章の作成例
今回は、下記のようなリスト形式の表示を、簡単に作成出来るようにしましょう。
- １行目のチェックマーク付きリストの表示例です。
- ２行目のチェックマーク付きリストの表示例です。
この行は、改行した表示の例になります。 - ３行目のチェックマーク付きリストの表示例です。
- ４行目のチェックマーク付きリストの表示例です。
- ５行目のチェックマーク付きリストの表示例です。
リスト形式表示のHTML作成例
下記は当記事で表示させている、リスト形式表示のHTMLの例です。
<ul class="check" style="font-size: 1.2em;">
<li>１行目のチェックマーク付きリストの表示例です。</li>
<li>２行目のチェックマーク付きリストの表示例です。<br >
この行は、改行した表示の例になります。</li>
<li>３行目のチェックマーク付きリストの表示例です。</li>
<li>４行目のチェックマーク付きリストの表示例です。</li>
<li>５行目のチェックマーク付きリストの表示例です。</li>
</ul>
スポンサーリンク
リスト形式表示のCSS作成例（Font Awesome 4）
テーマのstyle.cssに下記のCSSを追加するか、もしくは、下図の様に「カスタマイザー」で「追加CSS」に記述します。
なお、WEBフォントには、「Font Awesome 4.7.0」を利用しています。
ul.check {
margin: 1em 0;
padding: 1em 1em 1em 3em;
border: 2px solid #3CF;
border-radius: 8px;}
ul.check li {
list-style: none;
position: relative;
padding: 0.2em 0;
line-height: 1.4em;}
ul.check li:before {
position: absolute;
left: -1.2em;
font-family:'FontAwesome';
content: "\f046";
color: #39F;}
header.phpの<head> 〜 </head>部に、WEBフォントを利用できるように次の行を追加します。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
リスト形式表示のCSS作成例（Font Awesome 5）
WEBフォントには、「Font Awesome 5.0.13」を利用した場合。
ul.check {
margin: 1em 0;
padding: 1em 1em 1em 3em;
border: 2px solid #3CF;
border-radius: 8px;}
ul.check li {
list-style: none;
position: relative;
padding: 0.2em 0;
line-height: 1.4em;}
ul.check li:before {
position: absolute;
left: -1.2em;
font-family:'Font Awesome 5 Free';
font-weight: 900;
content: "\f14a";
color: #39F;}
header.phpの<head> 〜 </head>部に、下記サイトでWEBフォントを利用できるように次の行を追加します。
AddQuicktagプラグインに追加して利用する
「AddQuicktag」プラグインに設定することで、ボタンをクリックするだけで記事に基本形を設定できます。
AddQuicktagプラグインの詳細は、こちらの記事を参照して下さい。
開始タグ
<ul class=”check”>
<li>
<li>
終了タグ
</li>
</ul>
</ul>
