大切なあの人に。デザイン防災グッズをプレゼント!

テンプレート

参考 全記事のIDhttps://www.bousai.love/id/

CTAボタン

黄ボックス

code

<!-- ▼黄BOX▼ -->[memo][center]<!-- ▼ここからテキスト▼ --><div style="padding-bottom:10px;"><strong><a href="#">\●●/</a></strong></div><!-- ▲ここまでテキスト▲ --><!-- ▼ここからバナー▼ --><div style="padding-bottom:10px;">バナー</div><!-- ▲ここまでバナー▲ --><!-- ▼ここからボタン▼ --><div style="padding-bottom:10px; position:relative; left:5px;">[afbtn class="raised red-bc strong"]<strong><a href="#" rel="nofollow" style="padding: 14px 22px 14px 15px;" >「●●」公式サイトはこちら</a></strong>[/afbtn]</div><!-- ▲ここまでボタン▲ -->[/center][/memo]<!-- ▲黄BOX▲ -->

青ボックス

code

<!-- ▼青BOX▼ -->[box class="box3"][center]<!-- ▼ここからテキスト▼ --><div style="padding-bottom:10px;"><strong><a href="#">\●●/</a></strong></div><!-- ▲ここまでテキスト▲ --><!-- ▼ここからバナー▼ --><div style="padding-bottom:10px;">バナー</div><!-- ▲ここまでバナー▲ --><!-- ▼ここからボタン▼ --><div style="padding-bottom:10px; position:relative; left:5px;">[afbtn class="raised red-bc strong"]<strong><a href="#" rel="nofollow" style="padding: 14px 22px 14px 15px;" >「●●」公式サイトはこちら</a></strong>[/afbtn]</div><!-- ▲ここまでボタン▲ -->[/center][/box]<!-- ▲青BOX▲ -->

赤ボックス

code

<!-- ▼赤BOX▼ -->[alert][center]<!-- ▼ここからテキスト▼ --><div style="padding-bottom:10px;"><strong><a href="#">\●●/</a></strong></div><!-- ▲ここまでテキスト▲ --><!-- ▼ここからバナー▼ --><div style="padding-bottom:10px;">バナー</div><!-- ▲ここまでバナー▲ --><!-- ▼ここからボタン▼ --><div style="padding-bottom:10px; position:relative; left:5px;">[afbtn class="raised red-bc strong"]<strong><a href="#" rel="nofollow" style="padding: 14px 22px 14px 15px;" >「●●」公式サイトはこちら</a></strong>[/afbtn]</div><!-- ▲ここまでボタン▲ -->[/center][/alert]<!-- ▲赤BOX▲ -->

挨拶

最初の挨拶

防災夫婦 BousaiLove)です。

code
<strong>防災夫婦<a class="text-decoration-none" href="https://twitter.com/BousaiLove" target="_blank" rel="noopener noreferrer">(<i class="fab fa-twitter"></i> BousaiLove)</a></strong>です。

最後の挨拶

防災パパ

今回は以上です。
最後まで読んで頂き、ありがとうございました。
防災夫婦 BousaiLove)でした。

防災ママ

code
[say]今回は以上です。
最後まで読んで頂き、ありがとうございました。[/say][say name="防災ママ" img="https://www.bousai.love/wp-content/uploads/2021/06/mama.png" from="right"]<strong>防災夫婦<a class="text-decoration-none" href="https://twitter.com/BousaiLove" target="_blank" rel="noopener noreferrer">(<i class="fab fa-twitter"></i> BousaiLove)</a></strong>でした。[/say]

吹き出し (防災ママ)

★★★

防災ママ

code
[say name="防災ママ" img="https://www.bousai.love/wp-content/uploads/2021/06/mama.png" from="right"]★★★[/say]

文字装飾

蛍光(黄色)のアンダーライン

蛍光(黄色)のアンダーライン

code
<span class="keiko_yellow"><strong>●●●</strong></span>

蛍光(赤色)のアンダーライン

蛍光(赤色)のアンダーライン

code
<span class="keiko_red"><strong>●●●</strong></span>

蛍光(緑色)のアンダーライン

蛍光(緑色)のアンダーライン

code
<span class="keiko_green"><strong>●●●</strong></span>

蛍光(青色)のアンダーライン

蛍光(青色)のアンダーライン

code
<span class="keiko_blue"><strong>●●●</strong></span>

ボックス + リスト表示

オレンジ

こんな人におすすめ
code
[box class="box32" title="こんな人におすすめ"]
[list class="li-accentbdr acc-bc-before"]
   <ul>
     <li>あ</li>
     <li>か</li>
     <li>さ</li>
   </ul>
 [/list]
[/box]

枠なし+ リスト(黒点)

  • XXXXX
  • XXXXX
  • XXXXX
code
[list class="list-raw"]
<ul>
<li>XXXXX</li>
<li>XXXXX</li>
<li>XXXXX</li>
</ul>
[/list]

青枠 + リスト(黒点)

  • XXXXX
  • XXXXX
  • XXXXX
code
[list class="li-mainbdr strong"]
<ul>
<li>XXXXX</li>
<li>XXXXX</li>
<li>XXXXX</li>
</ul>
[/list]

青枠 + リスト(数字)

  1. XXXXX
  2. XXXXX
  3. XXXXX
code
[list class="ol-circle li-mainbdr main-bc-before"]
<ol>
<li>XXXXX</li>
<li>XXXXX</li>
<li>XXXXX</li>
</ol>
[/list]

青枠 + リスト(シェブロン:青色)

  • XXXXX
  • XXXXX
  • XXXXX
code
[list class="li-chevron li-mainbdr main-c-before"]
<ul>
<li>XXXXX</li>
<li>XXXXX</li>
<li>XXXXX</li>
</ul>
[/list]

青枠 + リスト(シェブロン:水色)

  • XXXXX
  • XXXXX
  • XXXXX
code
[list class="li-chevron"]
<ul>
<li>XXXXX</li>
<li>XXXXX</li>
<li>XXXXX</li>
</ul>
[/list]

青枠 + リスト(チェック)

  • XXXXX
  • XXXXX
  • XXXXX
code
[list class="li-check li-mainbdr main-c-before"]
<ul>
<li>XXXXX</li>
<li>XXXXX</li>
<li>XXXXX</li>
</ul>
[/list]

タイトル付きの枠

水色

タイトル
文章
code
[box class="box26" title="タイトル"]文章[/box]

赤色

タイトル
文章
code
[box class="box27" title="タイトル"]文章[/box]

タイトル付きのボックス

灰色 (アイコン:本)

タイトル
テキスト
code
[note title="タイトル"]テキスト[/note]

水色 (アイコン:旗)

タイトル
テキスト
code
[safe title="タイトル"]テキスト[/safe]

橙色 (アイコン:ペン)

MEMO
ここに文章
code
[memo title="MEMO"]ここに文章[/memo]

赤色 (アイコン:注意)

注意
ここに文章
code
[alert title="注意"]ここに文章[/alert]

吹き出しボックス

ノーマル

タイトル

  • XXXXXXXXXX
  • XXXXXXXXXX
  • XXXXXXXXXX
code
<div class="p-box" style="margin-top:50px; margin-bottom:30px;">
<span class="p-box-title">タイトル</span>
<p><ul>
<li>XXXXXXXXXX</li>
<li>XXXXXXXXXX</li>
<li>XXXXXXXXXX</li>
</ul></p>
</div>

タイトル

  • XXXXXXXXXX
  • XXXXXXXXXX
  • XXXXXXXXXX
code
<div class="p-box p-red" style="margin-top:50px; margin-bottom:30px;">
<span class="p-box-title">タイトル</span>
<p><ul>
<li>XXXXXXXXXX</li>
<li>XXXXXXXXXX</li>
<li>XXXXXXXXXX</li>
</ul></p>
</div>

オレンジ

タイトル

  • XXXXXXXXXX
  • XXXXXXXXXX
  • XXXXXXXXXX
code
<div class="p-box p-orange" style="margin-top:50px; margin-bottom:30px;">
<span class="p-box-title">タイトル</span>
<p><ul>
<li>XXXXXXXXXX</li>
<li>XXXXXXXXXX</li>
<li>XXXXXXXXXX</li>
</ul></p>
</div>

タイトル

  • XXXXXXXXXX
  • XXXXXXXXXX
  • XXXXXXXXXX
code
<div class="p-box p-green" style="margin-top:50px; margin-bottom:30px;">
<span class="p-box-title">タイトル</span>
<p><ul>
<li>XXXXXXXXXX</li>
<li>XXXXXXXXXX</li>
<li>XXXXXXXXXX</li>
</ul></p>
</div>

タイトル

  • XXXXXXXXXX
  • XXXXXXXXXX
  • XXXXXXXXXX
code
<div class="p-box p-blue" style="margin-top:50px; margin-bottom:30px;">
<span class="p-box-title">タイトル</span>
<p><ul>
<li>XXXXXXXXXX</li>
<li>XXXXXXXXXX</li>
<li>XXXXXXXXXX</li>
</ul></p>
</div>

カスタマイズ

タイトル

  • XXXXXXXXXX
  • XXXXXXXXXX
  • XXXXXXXXXX
code
<div class="p-box p-custom" style="margin-top:50px; margin-bottom:30px;">
<span class="p-box-title">タイトル</span>
<p><ul>
<li>XXXXXXXXXX</li>
<li>XXXXXXXXXX</li>
<li>XXXXXXXXXX</li>
</ul></p>
</div>

ボタン / リンク

ボタン(赤と青)

赤ボタン 青ボタン
code
[btn href="#" class="raised red-bc strong" yoko]赤ボタン[/btn][btn href="#" class="raised main-bc strong" yoko]青ボタン[/btn]

ボタン(赤と青) センタリング

code
[center][btn href="#" class="raised red-bc strong" yoko]赤ボタン[/btn][btn href="#" class="raised main-bc strong" yoko]青ボタン[/btn][/center]

アフィリエイトリンクを改変せずにボタンを使う方法

code
[afbtn class="raised red-bc strong"]<a href="https://px.a8.net/XXXXX" rel="nofollow">ボタン名</a><img border="0" width="1" height="1" src="https://www14.a8.net/0.gif?XXXXX" alt="">[/afbtn]

アイコン付きのテキストリンク

code
<div><strong><a href="#" target="_blank" rel="nofollow noopener noreferrer"><i class="fas fa-arrow-circle-right"></i> テキストリンク</a></strong></div>

関連記事のリンク

はじめまして!防災夫婦です。はじめまして!防災夫婦です。失敗しない防災セットの選び方【2022年版】失敗しない防災セットの選び方
コード
[kanren id="投稿ID,投稿ID"]

参考サイトのリンク

参考 Google公式サイトwww.google.com
コード
[sanko href="https://www.google.com" title="Google公式サイト" site="www.google.com" rel="noopener" target="_blank"]

記事リンク (カード式:四角①)

はじめまして!防災夫婦です。 はじめまして!防災夫婦です。
code
[card id="投稿ID"]

記事リンク (カード式:横長②)

はじめまして!防災夫婦です。 はじめまして!防災夫婦です。
code
[card2 id="投稿ID"]

レイアウト

レスポンシブ (2列)

コード
[yoko2 responsive][cell]★1列目の内容★[/cell][cell]★2列目の内容★[/cell][/yoko2]

レスポンシブ (3列)

コード
[yoko3 responsive][cell]★1列目の内容★[/cell][cell]★2列目の内容★[/cell][cell]★3列目の内容★[/cell][/yoko3]

アコーディオン

アコーディオン

隠す内容
code
[open title='タイトル'] 隠す内容 [/open]

YouTube

YouTube


code
[youtube]
URL
[/youtube]

タイムライン

タイムライン

手順1
タイトル1
中身1
手順2
タイトル2
中身2
手順3
タイトル3
中身3
手順4
タイトル4
中身4
手順5
タイトル5
中身5
code
[timeline][tl label='手順1' title='タイトル1']中身1[/tl][tl label='手順2' title='タイトル2']中身2[/tl][tl label='手順3' title='タイトル3']中身3[/tl][tl label='手順4' title='タイトル4']中身4[/tl][tl label='手順5' title='タイトル5']中身5[/tl][/timeline]

タイムライン + アコーディオン

手順1
タイトル1
中身1
手順2
タイトル2
中身2
手順3
タイトル3
中身3
手順4
タイトル4
中身4
手順5
タイトル5
中身5
code
[open title='タイトル']
[timeline][tl label='手順1' title='タイトル1']中身1[/tl][tl label='手順2' title='タイトル2']中身2[/tl][tl label='手順3' title='タイトル3']中身3[/tl][tl label='手順4' title='タイトル4']中身4[/tl][tl label='手順5' title='タイトル5']中身5[/tl][/timeline]
[/open]

黒板

黒板(オレンジの点)

黒板スタイル

  • あああ
  • いいい
  • ううう
code
<div class="kokuban">
<p class="title">黒板スタイル</p>
<ul>
 	<li>あああ</li>
 	<li>いいい</li>
 	<li>ううう</li>
</ul>
</div>

黒板(数字)

黒板スタイル

  1. あああ
  2. いいい
  3. ううう
HTML
<div class="kokuban">
<p class="title">黒板スタイル</p>
<ol>
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
</ol>
</div>

★★★

◯◯◯

code
●●●