テンプレート一覧

カゴへ

[contact-form-7 id="3386" title="休業期間のお知らせ"]

<!-★★の部分を適宜変更してください-->
<!--非表示にしたい時は全文をコメントアウトで囲むか、このページの内容を消去してください-->
<!--以下テンプレート
<h2>★★休業のお知らせ</h2>
<p>平素は格別のお引き立てをいただき厚くお礼申し上げます。</p>
<p>当院では、誠に勝手ながら下記日程を★★休業とさせていただきます。</p>

<h3>◆ ★★休業期間◆</h3>
<p>2023年★★月★★日(★)～2023年★★月★★日(★)</p>

<p>休業期間中にいただいたごお問合せにつきましては、</p>
<p>休業明けの営業開始日以降に順次返信させていただきます。</p>
<p>皆様には大変ご不便をおかけいたしますが、何卒ご理解の程お願い申し上げます。</p>
-->

タイトル

<h2 class=”pinkGradation–outside”>タイトル</h2>

タイトル

<h2 class=”pinkGradation–in”>タイトル</h2>

名前

<h2 class=”advice–handwriting” data-en=”Vol.数字” >名前</h2>

指導士になりたいあなたへ

<h2 class=”blueBird”>指導士になりたいあなたへ</h2>

目次

• ジャンプ先の名前など
• ジャンプ先の名前など
• 入れ子にしたい時
  • 入れ子にしたい時
  • 入れ子にしたい時
  • 入れ子にしたい時
• さらに入れ子にしたい時
  • さらに入れ子にしたい時
  • さらに入れ子にしたい時
  • さらに入れ子にしたい時
    • さらに入れ子にしたい時
    • さらに入れ子にしたい時
• ジャンプ先の名前など

<section class=”APNA_index”>
<details>
<summary>目次</summary>
<div class=”details-content”>
<ul>
<li><a href=”#ジャンプ先のidの中身”>ジャンプ先の名前など</a></li>
<li><a href=”#ジャンプ先のidの中身”>ジャンプ先の名前など</a></li>
<li><a href=”#ジャンプ先のidの中身”>入れ子にしたい時</a>
<ul>
<li><a href=”#ジャンプ先のidの中身”>入れ子にしたい時</a></li>
<li><a href=”#ジャンプ先のidの中身”>入れ子にしたい時</a></li>
<li><a href=”#ジャンプ先のidの中身”>入れ子にしたい時</a></li>
</ul>
</li>
<li><a href=”#ジャンプ先のidの中身”>さらに入れ子にしたい時</a>
<ul>
<li><a href=”#ジャンプ先のidの中身”>さらに入れ子にしたい時</a></li>
<li><a href=”#ジャンプ先のidの中身”>さらに入れ子にしたい時</a></li>
<li><a href=”#ジャンプ先のidの中身”>さらに入れ子にしたい時</a>
<ul>
<li><a href=”#ジャンプ先のidの中身”>さらに入れ子にしたい時</a></li>
<li><a href=”#ジャンプ先のidの中身”>さらに入れ子にしたい時</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”#ジャンプ先のidの中身”>ジャンプ先の名前など</a></li>
</ul>
</div>
</details>
</section>
入れ子にしたい時は該当箇所のliを閉じる手前にulで新しいリストをぶち込むイメージ
現在は見出し（h2タグ）の上基準で入れてます！
<div id=”目次と同じ名前” class=”fixedAdjust”></div>
<h2 class=”fusen”>診療方針</h2>

見出し

<h2 class=”fusen”>見出し</h2>

小見出し

<h3 class=”nikukyu”>小見出し</h3>

タイトル

本文

本文
本文

<details>
<summary>タイトル</summary>
<div class=”details-content”>
<p>本文</p>
<p>改行すると<br>
これくらいの行間</p>
</div>
</details>

<div class=”box–greenDeshed”>
<p>本文</p>
</div>

小見出し

<h3 class=”header–underLine”>小見出し</h3>

項目	項目
内容	内容
内容	内容
内容	内容
内容	内容

<section class=”APNA_table”>
<table class=””>
<tr>
<th>項目</th>
<th>項目</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>
</section>

<div class=”box–outsideHeader”>
<span class=”box–outsideHeaderTitle”>タイトル</span>
<p>文章</p>
</div>

リンク

<span class=”APNA_link”><a href=”リンク”>リンク</a></span>

タイトル

本文

お名前

<div class="balloon_l">
  <div class="faceicon"><img src="/wp-content/uploads/2023/03/icon-human.png" alt="" loading="lazy"></div>
  <div class="says">
    <p>左側</p>
  </div>
</div>

<div class="balloon_r">
  <div class="faceicon"><img src="/wp-content/uploads/2023/03/icon-human.png" alt="" loading="lazy"></div>
  <div class="says">
    <p>右側</p>
  </div>
</div>

<article id="APNA_studentVoice">
  <section>
    <div class="balloon_l">
      <div class="faceicon"><img src="/wp-content/uploads/2023/03/icon-human.png" alt=""></div>
      <div class="says">
        <p>タイトル</p>
      </div>
    </div>
    <div class="balloon_l--inside">
      <p>本文</p>
      <p class="balloon_l--inside--name">お名前</p>
    </div>
  </section>
</article>

手書き風英字のCSS見出し

白

黒

ピンク

緑

名前

名前

<h2 class="heading07" data-en="Recruit">手書き風英字のCSS見出し</h2>
  <h2 class="cursive--white--diagonal" data-en="Recruit">白</h2>
  <h2 class="cursive--black--diagonal" data-en="Recruit">黒</h2>
  <h2 class="cursive--pink--diagonal" data-en="Recruit">ピンク</h2>
  <h2 class="cursive--green--diagonal" data-en="Recruit">緑</h2>
  <h2 class="cursive--white" data-en="Text">名前</h2>
  <h2 class="cursive--black" data-en="Text">名前</h2>
  
<div class="balloon_l">
  <div class="faceicon"> <img src="/wp-content/uploads/2023/03/icon-animal.png" alt="" loading="lazy"> </div>
  <div class="says">
    <p>左側</p>
  </div>
</div>
<div class="balloon_r">
  <div class="faceicon"> <img src="/wp-content/uploads/2023/03/icon-animal.png" alt="" loading="lazy"> </div>
  <div class="says">
    <p>右側</p>
  </div>
</div>

横並び ボタンボタンボタン 縦並び

/*横並び*/
<a href="リンク" class="APNA_btn">ボタン</a>
<a href="リンク" class="APNA_btn">ボタン</a>
<a href="リンク" class="APNA_btn">ボタン</a>

/*縦並び*/
<div><a href="リンク" class="APNA_btn">ボタン</a></div>
<div><a href="リンク" class="APNA_btn">ボタン</a></div>
<div><a href="リンク" class="APNA_btn">ボタン</a></div>

<p><a href="リンク" target="_blank" class="column1--buy--supplement"></a></p>

---

<p><a href="リンク" target="_blank" class="column1--buy--amazon"></a></p>

---

<p><a href="リンク" target="_blank" class="column1--buy--rakutenBooks"></a></p>

---

<div class="box--heartful--border--double">テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力</div>

<div class="box--heartful--blah">テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力</div>

<div class="box--heartful--border--dashed">テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力</div>

---

<div class="box--confidenceInFood--border--double">テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力</div>

<div class="box--confidenceInFood--blah">テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力</div>

<div class="box--confidenceInFood--border--dashed">テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力テキストを入力</div>

---

テキスト

<h2 class="i--nabe--white bar--orange">テキスト</h2>

---

LPなどでヘッダー、フッターなどを削除したい時

<style type="text/css">
#header, #footer_information, #footer_banner, #footer_menu_area, #footer_bottom, #footer_button, #dp-footer-bar{
    display: none;
}
</style>

---

---

---

---

---

---

---