コピペでOK！LPにも使えるタイトル・チェック付きボックスデザインプレゼント

コピペでOK！LPにも使えるタイトル・チェック付きボックスデザインプレゼント

「こんな悩みありませんか？」「こんな人におすすめです！」など使い方いろいろ！

ご使用に際しての注意点

WordPressを使っている方限定です。ペライチやWixなどの他のWebサイト作成システムでは使用できませんのでご注意下さい。
このデザインは、WordPressテーマ「SEAL1.5」を使って作成しました。他のテーマでご使用の際は、デザインが崩れることがありますのでご注意ください。
ご使用は自己責任でお願いします。このデザインを使用して起こった不具合に関しての責任は当方で負いかねますので予めご了承ください。
使用に関するご質問等は受け付けておりませんのでご理解ください。

今回は、上記のようなボックスデザインをプレゼントします。

このデザインの使い方

使い方は簡単です。

２種類のコードをコピペして指定の箇所に貼り付けます。

手順1：以下のCSSコードを追加CSSに貼り付ける

/****タイトル・チェック付ボックスデザイン****/

/*タイトル部分*/
.lp-checklist-title {
    display: block;
    position:relative;
    margin: 0 auto;
    padding: 10px;
    border-radius: 24px;
    text-align: center;
    width: 85%;
    background: #f5e040; /*背景色*/
    color:#505050; /*文字色*/
    font-size: 16pt;
    font-weight:600;
    z-index:1;
}

/*全体の枠（点線）*/
.lp-checklist-1{
    display:block;
    background:#fff; /*背景色*/
    border:#000080 2px dashed; /*枠線の色・太さ・種類*/
    margin:-30px auto 50px;
    padding:40px 10px ; 
    border-radius: 10px;
}

/*リストデザイン*/

ul.list-check li {
    position:relative;
    list-style-type: none !important;
    color:#505050; /*文字色*/
    font-size:16pt; /*フォントサイズ*/
    padding:15px 10px;
    text-indent:0;
}
ul.list-check li:before {
    font-family: "Font Awesome 5 Free"; 
    content: "\f14a";
    position: absolute;
    display:inline-block;
    color:#EF866B; /*アイコンの色*/
    padding:15px 0;
}

/*固定ページで使用*/
.page-id-xxxx ul li:before{ 
    width: 0;
    height: 0; 
}
/*投稿ページで使用*/
.postid-xxxx ul li:before{ 
    width: 0;
    height: 0; 
}

/* page-id-xxxx　postid-xxxx　の「xxxx」の部分は作成する固定・投稿ページのID番号を必ずいれる */

/*差込画像*/
.lp-checklist-img {
    display: block;
    width: 60%;
    margin-left: auto;
}

/** ここからタブレット **/
@media screen and (min-width: 560px) {
   .lp-checklist-img { width: 30%; }
}

/** ここからPC **/
@media screen and (min-width: 960px) {
.lp-checklist-title { width: 80%; }
		
.lp-checklist-1{
    margin:-25px auto 60px;
    padding:40px 30px 20px; 
    width:90%
}
.lp-checklist-img{ width:20%; }
}

/****ここまで****/

閉じる

上記黒枠の中の全てコピーします。

ダッシュボード ⇒ 外観 ⇒ カスタマイズ ⇒ 追加CSS

と進みポチッと貼り付けます。

必要に応じて色を変更してもOK！

注意！

/*固定ページで使用*/
.page-id-xxxx ul li:before{ 
    width: 0;
    height: 0; 
}
/*投稿ページで使用*/
.postid-xxxx ul li:before{ 
    width: 0;
    height: 0; 
}

/* page-id-xxxx　postid-xxxx　の「xxxx」の部分は作成する固定・投稿ページのID番号を必ずいれる */

↑この部分にID 番号をいれるのを忘れないようにしましょう！

ページID番号の確認方法

今回のデザインボックスを使用するページを下書きの状態にします。

下書き保存すると以下のようなURLが表示されます。

下書き状態でプレビューして表示されたURLにも表示されます。

赤枠で囲んでいるように数字が表示されています。

数字は１桁の時もあります。

ここに表示されている数字をxxxxと差し替えてください。

手順2：以下のHTMLコードを使用するページに貼り付けます。

<div class="lp-checklist-title">
ここにタイトルが入るよ ここにタイトルが入るよ
</div>
<div class="lp-checklist-1">
<ul class="list-check">
 <li> ここにテキスト　</li>
 <li> ここにテキスト　</li>
 <li> ここにテキスト　</li>
 <li> ここにテキスト　</li>　
 <li> ここにテキスト　</li>
</ul>
<img class="lp-checklist-img" src="画像のURL">
</div>

上記のHTMLコードをこのデザインボックスを使用したいページの必要な部分に貼り付けます。

<li> ここにテキスト </li>の部分を追加するとリストを増やせます。

以上で完成です！

よかったらお使いください。

最初にもお伝えしましたが、今回のカスタマイズは自己責任でお願いします・・！