おしゃれなデザイン防災グッズはこちら

テンプレート

参考 全記事の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"]

レイアウト

レスポンシブ （２列）

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

レスポンシブ （３列）

コード 
[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 
●●●