このページはkakuyasuテーマのブログパーツ一覧マニュアルです。HTMLをコピーして各記事に貼り付けてください。

見出し

h２の見出しテキスト

code <h2>見出しテキスト</h2>

h３の見出しテキスト

code <h3>見出しテキスト</h3>

h４の見出しテキスト

code <h4>見出しテキスト</h4>

ナンバー見出し（.pointBox）

demo

1ナンバー付きh3見出し

2ナンバー付きh4見出し

code <div class="pointBox"> <h3><span class="num">1</span>見出しテキスト</h3> <h4><span class="num">2</span>見出しテキスト</h4> </div>

リスト

チェックリスト（ul.check）

demo
  • チェック項目のテキスト
  • チェック項目のテキスト
  • チェック項目のテキスト
code <ul class="check"> <li>テキスト</li> <li>テキスト</li> </ul>

丸点リスト（ul.circle）

demo
  • リスト項目のテキスト
  • リスト項目のテキスト
  • リスト項目のテキスト
code <ul class="circle"> <li>テキスト</li> <li>テキスト</li> </ul>

ナンバーリスト・丸背景（ol.numList）

demo
  1. ナンバーリストの項目テキスト
  2. ナンバーリストの項目テキスト
  3. ナンバーリストの項目テキスト
code <ol class="numList"> <li>テキスト</li> <li>テキスト</li> </ul>

ボックス

注意ボックス（.warn-block）

demo

注意点

注意事項のテキストをここに入力します。

code <div class="warn-block"> <p class="warn-block__title"> <i class="fa-solid fa-triangle-exclamation"></i>注意点 </p> <p>本文テキスト</p> </div>

ポイントボックス（.point-block）

demo

ポイント

ポイント・補足情報のテキストをここに入力します。

code <div class="point-block"> <p class="point-block__title"> <i class="fa-solid fa-circle-info"></i>ポイント </p> <p>本文テキスト</p> </div>

参考情報ボックス（.ref-block）

demo
参考情報

参考情報・補足データのテキストをここに入力します。

code <div class="ref-block"> <span class="ref-block__badge"> <i class="fa-solid fa-book-open"></i>参考情報 </span> <p>本文テキスト</p> </div>

吹き出し（.speech-block）

demo

吹き出しのテキストをここに入力します。

code <div class="speech-block"> <div class="speech-block__avatar"> <i class="fa-solid fa-user"></i> </div> <div class="speech-block__bubble"> <p>テキスト</p> </div> </div>

ステップ紹介（.stepBox > .step-item）

demo
STEP 1　見出しテキスト

内容テキスト。p・ul・olが使えます。

STEP 2　見出しテキスト

内容テキスト。

code <div class="stepBox"> <div class="step-item"> <div class="step-item__head">STEP 1　見出し</div> <div class="step-item__body"> <p>内容テキスト</p> </div> </div> <div class="step-item"> <div class="step-item__head">STEP 2　見出し</div> <div class="step-item__body"> <p>内容テキスト</p> </div> </div> </div>

メリット・デメリット（.pros-cons）

demo

メリット

  • 項目テキスト
  • 項目テキスト

デメリット

  • 項目テキスト
  • 項目テキスト
code <div class="pros-cons"> <div class="pros-cons__col pros-cons__col--pros"> <p class="pros-cons__title">メリット</p> <ul><li>項目</li></ul> </div> <div class="pros-cons__col pros-cons__col--cons"> <p class="pros-cons__title">デメリット</p> <ul><li>項目</li></ul> </div> </div>

FAQ（.faq-block）

demo

Q質問テキストをここに入力します

A

回答テキストをここに入力します。

code <div class="faq-block"> <div class="faq-block__item"> <p class="faq-block__q"><span>Q</span>質問テキスト</p> <div class="faq-block__a"><span>A</span><p>回答テキスト</p></div> </div> </div>

まとめエリア（.matome-block）

demo

まとめのリード文をここに入力します。

  • まとめ項目テキスト
  • まとめ項目テキスト
  • まとめ項目テキスト
code <div class="matome-block"> <div class="matome-block__body"> <p>リード文</p> <ul class="matome-block__list"> <li>まとめ項目</li> </ul> </div> <div class="matome-block__figure"> <img src="画像URL" alt="alt"> </div> </div>

テキスト強調

太文字（span.f）・蛍光マーカー（span.marker）

demo

通常テキストの中に太文字（span.f）を使います。重要な箇所には蛍光マーカー（span.marker）を使います。

code <span class="f">太文字テキスト</span> <span class="marker">蛍光マーカーテキスト</span>

オレンジ文字（.text-orange）

demo

通常テキストの中にオレンジ色のテキストを使います。

code <span class="text-orange">オレンジ文字</span>

インラインラベル（.label-*）

demo

NEW新着コンテンツや新機能の紹介に使います。
重要必ず読んでほしい重要な情報に使います。
おすすめ推奨・おすすめを伝えるときに使います。
POINTポイント・補足を強調するときに使います。

code <span class="label-new">NEW</span> <span class="label-important">重要</span> <span class="label-recommend">おすすめ</span> <span class="label-point">POINT</span>

引用ボックス（blockquote.blog-quote）

demo

引用テキストをここに入力します。著名人の言葉や出典のある文章を引用するときに使います。

出典・著者名
code <blockquote class="blog-quote"> <p>引用テキスト</p> <cite>出典・著者名</cite> </blockquote>

表組（.blog-table）

demo
列見出し１列見出し２列見出し３
内容テキスト内容テキスト内容テキスト
内容テキスト内容テキスト内容テキスト
code <div class="blog-table"> <table> <thead><tr> <th>見出し１</th><th>見出し２</th> </tr></thead> <tbody><tr> <td>内容</td><td>内容</td> </tr></tbody> </table> </div>

リンク

インナーリンク（a.inner-link）

demo

詳しくはこの記事の〇〇の項目で解説しています。

code <a href="#anchor" class="inner-link">リンクテキスト</a>

外部リンク（a.outer-link）

demo

詳しくは公式サイトをご確認ください。

code <a href="https://..." class="outer-link" target="_blank" rel="noopener">リンクテキスト</a>