WordPressや旅・買い物・勝手な情報!

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

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

 

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

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

スポンサーリンク
  • 1行目のチェックマーク付きリストの表示例です。
  • 2行目のチェックマーク付きリストの表示例です。
    この行は、改行した表示の例になります。
  • 3行目のチェックマーク付きリストの表示例です。
  • 4行目のチェックマーク付きリストの表示例です。
  • 5行目のチェックマーク付きリストの表示例です。

 

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

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

<ul class="check" style="font-size: 1.2em;">
<li>1行目のチェックマーク付きリストの表示例です。</li>
<li>2行目のチェックマーク付きリストの表示例です。<br >
    この行は、改行した表示の例になります。</li>
<li>3行目のチェックマーク付きリストの表示例です。</li>
<li>4行目のチェックマーク付きリストの表示例です。</li>
<li>5行目のチェックマーク付きリストの表示例です。</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>
</ul>

 
 

スポンサーリンク

同ジャンル・関連ページ




コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

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

CAPTCHA