チェックリストのコード入れ方！STORK×ワードプレス
こんばんは、えば（@eba0819）です！
チェックリストとはこれです！
私はこちらの記事を参考にさせていただきました。
⇒STORKのリスト表示をおしゃれにカスタマイズ
＊カスタマイズは自己責任でお願い致します。
かわいいチェックリストボックス作り方【STORK】
では、流れで説明します。
①WordPressのテンプレート『STORK（ストーク）』にチェックリストのボックスを入れたい場合の説明です。
②STORKの管理画面の
外観⇒カスタマイズ
を開きます。
③追加CSSを開きます。
④このCSSコードをこのように入力します。
CSSコードはこちらです。
コピペして使えます。
↓↓↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.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
そして、このようにHTMLコードを入力します。
下の終了タグには何も入れなくていいです。
リストを表示させるためのHTMLコードはこちら
|
1 2 3 4 5 |
<ul class="list_checkb"> <li>リスト表示1</li> <li>リスト表示2</li> <li>リスト表示3</li> </ul> |
⑦WordPressの記事投稿画面にいきます。
⑧「テキスト」エディタの方に、AddQuicktagで入れたコードが入っているので、クリックして挿入します。
こんな風に
⑨この「リスト表示」の部分に、リストに入れたい文章を入力します。
私ならこちら
⑩これでOKです。
⑪プレビューで確認してみましょう。
このように表示されていたら完成です！
CSSコードはこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.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; } |
HTMLコードはこちら
リストを表示させるためのHTMLコードはこちら
|
1 |
-
- リスト表示1
-
- リスト表示2
-
- リスト表示3
|
1 |
|
1 |
無事にできましたか？
このチェックリスト、ブログに表示されたときに、すごく見やすくなるので感激しました♪
多用したいと思ってます笑
えばのつぶやき【2月5日】
また寝落ちしてました^^;
もっと早い時間に記事投稿しないと、少し休憩・・・ZZZということになってます笑
嬉しいことがあって、
このブログに昨日2件ほど、「記事が参考になりました」とモデレートが来てました♪
この記事が参考になったようです。
⇒functions.phpでエラーになったらエックスサーバーで解決できた方法！
めっちゃ嬉しい♪
人の役に立つって嬉しいですね！
そして、それをわざわざ伝えてくださる方も優しいなーと思いました。
自分もそうあるべきだなと思いました！
今回は、チェックリストをWordPressのブログ（サイト）に入れる方法をご紹介します。
かわいくて無料で使えるリスト表示の設定方法ですよ。