チェックリストのコード入れ方！STORK×ワードプレス

チェックリストのコード入れ方！STORK×ワードプレス

こんばんは、えばです！

今回は、チェックリストをWordPressのブログ（サイト）に入れる方法をご紹介します。

かわいくて無料で使えるリスト表示の設定方法ですよ。

チェックリストとはこれです！
かわいいチェックリストボックス作り方【STORK】

チェックリストとはこれです！

私はこちらの記事を参考にさせていただきました。
⇒STORKのリスト表示をおしゃれにカスタマイズ

＊カスタマイズは自己責任でお願い致します。

かわいいチェックリストボックス作り方【STORK】

では、流れで説明します。

①WordPressのテンプレート『STORK（ストーク）』にチェックリストのボックスを入れたい場合の説明です。

②STORKの管理画面の
外観⇒カスタマイズ
を開きます。

③追加CSSを開きます。

④このCSSコードをこのように入力します。

CSSコードはこちらです。
コピペして使えます。

↓↓↓


.entry-content ul.list_checkb {
border: solid 3px #ffb03f;/*外側の罫線の太さと色*/
padding: 0.3em 1.2em;
position: relative;
}

.entry-content ul.list_checkb li {
line-height: 1em;
padding: 0.2em 0 1em 1.4em;
border-bottom: dashed 2px #ffb03f;/*点線の太さと色*/
}

.entry-content ul.list_checkb li:before {
width: 0; /*リストマークを消す*/
height: 0; /*リストマークを消す*/
font-family: fontawesome;
content:"\f058";/*アイコン種類*/
position: absolute;
font-size: 1.5em; /*アイコンのサイズ*/
left: -0.1em; /*左端からのアイコンまで*/
line-height:11px;/*行間*/
color: #ffb03f; /*アイコンの色*/
}

.entry-content ul.list_checkb li:last-of-type{
border-bottom: none;
padding-bottom: 0;
}

.entry-content ul.list_checkb {

border: solid 3px #ffb03f;/*外側の罫線の太さと色*/

padding: 0.3em 1.2em;

position: relative;

}

.entry-content ul.list_checkb li {

line-height: 1em;

padding: 0.2em 0 1em 1.4em;

border-bottom: dashed 2px #ffb03f;/*点線の太さと色*/

}

.entry-content ul.list_checkb li:before {

width: 0; /*リストマークを消す*/

height: 0; /*リストマークを消す*/

font-family: fontawesome;

content:"\f058";/*アイコン種類*/

position: absolute;

font-size: 1.5em; /*アイコンのサイズ*/

left: -0.1em; /*左端からのアイコンまで*/

line-height:11px;/*行間*/

color: #ffb03f; /*アイコンの色*/

}

.entry-content ul.list_checkb li:last-of-type{

border-bottom: none;

padding-bottom: 0;

}

＊カラーコード（＃ーーーー）の部分を好きな色に変更できます。

ちなみに、STORKの追加CSSの部分って、前に入れてたものがあっても、その下に入力すればいいんです。

便利で賢いですね～。

賢威7も使ってますが、テーマ編集から入力しないといけないので初心者の頃はドキドキでした。

⑤保存します。

⑥毎回リストをすぐに使えるように、プラグインのAddQuicktag（アドクイックタグ）に入れておきます。

このプラグインですね。
超便利なプラグインです♪

AddQuicktagを使うと、エディタに装備されているボタンを消したりオリジナルボタンを追加することができます。よく使うタグや定型文を登録しておいて、記事作成の効率をアップさせられます。

では、この流れで開きます。

外観⇒設定⇒AddQuicktag

そして、このようにHTMLコードを入力します。

下の終了タグには何も入れなくていいです。

リストを表示させるためのHTMLコードはこちら

<ul class="list_checkb">
<li>リスト表示1</li>
<li>リスト表示2</li>
<li>リスト表示3</li>
</ul>

<li>リスト表示1</li>

<li>リスト表示2</li>

<li>リスト表示3</li>

</ul>

⑦WordPressの記事投稿画面にいきます。

⑧「テキスト」エディタの方に、AddQuicktagで入れたコードが入っているので、クリックして挿入します。

こんな風に

⑨この「リスト表示」の部分に、リストに入れたい文章を入力します。

私ならこちら

⑩これでOKです。

⑪プレビューで確認してみましょう。

このように表示されていたら完成です！

CSSコードはこちら


.entry-content ul.list_checkb {
border: solid 3px #ffb03f;/*外側の罫線の太さと色*/
padding: 0.3em 1.2em;
position: relative;
}

.entry-content ul.list_checkb li {
line-height: 1em;
padding: 0.2em 0 1em 1.4em;
border-bottom: dashed 2px #ffb03f;/*点線の太さと色*/
}

.entry-content ul.list_checkb li:before {
width: 0; /*リストマークを消す*/
height: 0; /*リストマークを消す*/
font-family: fontawesome;
content:"\f058";/*アイコン種類*/
position: absolute;
font-size: 1.5em; /*アイコンのサイズ*/
left: -0.1em; /*左端からのアイコンまで*/
line-height:11px;/*行間*/
color: #ffb03f; /*アイコンの色*/
}

.entry-content ul.list_checkb li:last-of-type{
border-bottom: none;
padding-bottom: 0;
}