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

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

こんばんは、えばです!

 

えば

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

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

 


 

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


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

 

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

 

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

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

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

 

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

 

追加CSSを開きます。

 

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

 

 

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

↓↓↓

 
*カラーコード(#ーーーー)の部分を好きな色に変更できます。
 

えば

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

便利で賢いですね~。

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

 

 

⑤保存します。

 

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

 

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

 

 

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

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

外観⇒設定⇒AddQuicktag

 

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

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

 

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

 

 

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

 

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

 

こんな風に

 

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

私ならこちら

 

⑩これでOKです。

 

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

 

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

 

 

CSSコードはこちら

 

HTMLコードはこちら

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

    • リスト表示1

 

    • リスト表示2

 

    • リスト表示3

 

 

 

えば

無事にできましたか?

このチェックリスト、ブログに表示されたときに、すごく見やすくなるので感激しました♪

多用したいと思ってます笑

 

えばのつぶやき【2月5日】

 

また寝落ちしてました^^;

もっと早い時間に記事投稿しないと、少し休憩・・・ZZZということになってます笑

 

嬉しいことがあって、

このブログに昨日2件ほど、「記事が参考になりました」とモデレートが来てました♪

この記事が参考になったようです。

functions.phpでエラーになったらエックスサーバーで解決できた方法!

めっちゃ嬉しい♪

人の役に立つって嬉しいですね!

そして、それをわざわざ伝えてくださる方も優しいなーと思いました。

自分もそうあるべきだなと思いました!

 

 

最後までご覧いただきありがとうございます!

えば
 
LINE@にて最新の情報発信と、個別のご質問を受け付けております!

お友達登録特典
私が使っている『作業日報』を無料プレゼント中です!
”時間を制するものが人生を制す”
ぜひ受け取って、参考にしてみてください^^
⇩⇩⇩
友だち追加 


挑戦したい人のためのアフィリエイト構築術
あなたはこんな希望が
ありませんか?

■副業でお金を稼ぎたい!
■家計の収入を増やしたい!
■依存しない"自由な人生”を手に入れたい!
■情熱を燃やせることを始めたい!
■ネットで稼ぐスキルを身につけたい!
■ずっとあきらめていた人生を変えたい!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

自分で稼ぐスキルを身につければ"自由でワクワクする人生”が待っています。そのために今新しい挑戦を始めましょう。 そんな人を全力で応援したい! 挑戦したい人のためのアフィリエイト構築術をまとめています^^/