WordPressや旅・買い物・勝手な情報！
WASAMON > サイト作成 > WordPress > チェックマーク付きリスト表示をワンクリックで入力する方法
Release: 2018/06/15 Update: 2018/06/16

チェックマーク付きリスト表示をワンクリックで入力する方法

ブログ記事を書いていると、特長やまとめなどをリスト表示したい場合があります。
「目立つようなリスト形式にしたい」と思われたら、「チェックボックス付きのリスト」にしてみるのはいかがでしょう？

 

スポンサーリンク

リスト形式の文章の作成例

今回は、下記のようなリスト形式の表示を、簡単に作成出来るようにしましょう。

  • １行目のチェックマーク付きリストの表示例です。
  • ２行目のチェックマーク付きリストの表示例です。
    この行は、改行した表示の例になります。
  • ３行目のチェックマーク付きリストの表示例です。
  • ４行目のチェックマーク付きリストの表示例です。
  • ５行目のチェックマーク付きリストの表示例です。

 

リスト形式表示のHTML作成例

下記は当記事で表示させている、リスト形式表示のHTMLの例です。

ソースを表示
印刷SyntaxHighlighterについて
1<ul class="check" style="font-size: 1.2em;">
2<li>１行目のチェックマーク付きリストの表示例です。</li>
3<li>２行目のチェックマーク付きリストの表示例です。<br >
4    この行は、改行した表示の例になります。</li>
5<li>３行目のチェックマーク付きリストの表示例です。</li>
6<li>４行目のチェックマーク付きリストの表示例です。</li>
7<li>５行目のチェックマーク付きリストの表示例です。</li>
8</ul>

 

スポンサーリンク

リスト形式表示のCSS作成例（Font Awesome 4）

テーマのstyle.cssに下記のCSSを追加するか、もしくは、下図の様に「カスタマイザー」で「追加CSS」に記述します。

なお、WEBフォントには、「Font Awesome 4.7.0」を利用しています。

ソースを表示
印刷SyntaxHighlighterについて
1ul.check {
2    margin: 1em 0;
3    padding: 1em 1em 1em 3em;
4    border: 2px solid #3CF;
5    border-radius: 8px;}
6ul.check li {
7    list-style: none;
8    position: relative;
9    padding: 0.2em 0;
10    line-height: 1.4em;}
11ul.check li:before {
12    position: absolute;
13    left: -1.2em;
14    font-family:'FontAwesome';
15    content: "\f046";
16    color: #39F;}

 
header.phpの<head> 〜 </head>部に、WEBフォントを利用できるように次の行を追加します。

ソースを表示
印刷SyntaxHighlighterについて
1<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」を利用した場合。

ソースを表示
印刷SyntaxHighlighterについて
1ul.check {
2    margin: 1em 0;
3    padding: 1em 1em 1em 3em;
4    border: 2px solid #3CF;
5    border-radius: 8px;}
6ul.check li {
7    list-style: none;
8    position: relative;
9    padding: 0.2em 0;
10    line-height: 1.4em;}
11ul.check li:before {
12    position: absolute;
13    left: -1.2em;
14    font-family:'Font Awesome 5 Free';
15    font-weight: 900;
16    content: "\f14a";
17    color: #39F;}

 
header.phpの<head> 〜 </head>部に、下記サイトでWEBフォントを利用できるように次の行を追加します。

 

AddQuicktagプラグインに追加して利用する

「AddQuicktag」プラグインに設定することで、ボタンをクリックするだけで記事に基本形を設定できます。
AddQuicktagプラグインの詳細は、こちらの記事を参照して下さい。
 
開始タグ

<ul class=”check”>
<li>

終了タグ

</li>
</ul>

 
 

｜ HOME ｜

はてブ
Pocket
LINE


コメントはお気軽にどうぞ

メールアドレスは公開されません。
また、* が付いている欄は必須項目ですので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA