サンプルページ - 東京都中央区月島・勝どきの動物病院

WPでアップロードした画像の埋め込みについて

<img src="https://anima-ah.com/wp/wp-content/uploads/2024/06(その月)/sample_img.jpg" alt="画像名">

ショートコード（WP編集画面で確認）：https://anima-ah.com/wp/wp-content/uploads/2024/06(その月)/画像名(.png, .jpg, etc…)としてください

リード文テキストリード文テキストリード文テキストリード文テキストリード文テキストリード文テキストリード文テキストリード文テキストリード文テキストリード文テキストリード文テキストリード文テキストリード文テキストリード文テキスト

h2テキスト

h3テキスト

通常テキスト（1カラム）16px｜行間1.8｜テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

h4テキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


<p class="lead">リード文テキストリード文テキストリード文テキストリード文テキスト</p>

<h2 class="title">h2テキスト</h2>

<h3 class="title">h3テキスト</h3>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

<h4 class="title">h4テキスト</h4>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

2カラム左：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


<div class="listCol2">
<div class="listItem">
  <p>2カラム左にテキストテキストテキストテキストテキスト</p>
</div>
<div class="listItem">
  <img src="https://anima-ah.com/wp/wp-content/themes/anima/images/second/sample_img.jpg" alt="画像名">
</div>
</div>

2カラム右：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


<div class="listCol2 reverse">
<div class="listItem">
  <p>2カラム右にテキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="listItem">
  <img src="https://anima-ah.com/wp/wp-content/themes/anima/images/second/sample_img.jpg" alt="画像名">
</div>
</div>


<div class="listCol3">
<div class="listItem"><img src="https://anima-ah.com/wp/wp-content/themes/anima/images/second/sample_img.jpg" alt="画像名"></div>
<div class="listItem"><img src="https://anima-ah.com/wp/wp-content/themes/anima/images/second/sample_img.jpg" alt="画像名"></div>
<div class="listItem"><img src="https://anima-ah.com/wp/wp-content/themes/anima/images/second/sample_img.jpg" alt="画像名"></div>
</div>


    <div class="listCol2">
    <div class="listItem">
      <img class="imgCol2" src="https://anima-ah.com/wp/wp-content/themes/anima/images/second/sample_img.jpg" alt="画像名">
    </div>
    <div class="listItem">
      <img class="imgCol2" src="https://anima-ah.com/wp/wp-content/themes/anima/images/second/sample_img.jpg" alt="画像名">
    </div>
  </div>


<div class="imgCenter">
<img src="https://anima-ah.com/wp/wp-content/themes/anima/images/second/sample_img.jpg" alt="画像名">
</div>

小見出し(18px)

囲みありテキスト。背景#ffffff。注釈、特殊扱いの文章などに使用します。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

特殊テキスト。重要な注意書きなどに使用します。


<div class="colorBox">
<p class="colorBoxTitle">小見出し</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

<div class="colorBoxImp">
<p>特殊テキスト。重要な注意書きなどに使用します。</p>
</div>

見出し

2カラム左にテキストテキストテキストテキストテキスト


    <div class="borderBox">
    <div class="listCol2 fixed">
      <div class="listItem">
        <p>2カラム左にテキストテキストテキストテキストテキスト</p>
      </div>
      <div class="listItem">
        <img src="../images/second/sample_img.jpg" alt="画像名">
      </div>
    </div>
    </div>

テキスト装飾・アイコン

表組リスト

項目1: リストリストリストリスト
項目2: リストリストリストリスト
項目3: リストリストリストリスト


<dl class="commonList">
<div>
  <dt>項目1</dt>
  <dd>リストリストリストリスト</dd>
</div>
<div>
  <dt>項目2</dt>
  <dd>リストリストリストリスト</dd>
</div>
<div>
  <dt>項目3</dt>
  <dd>リストリストリストリスト</dd>
</div>
</dl>

表組リスト（横並び）

地域	感染源となる動物
アジア・アフリカ	イヌ・ネコ
ヨーロッパ・北米	コウモリ・キツネ・スカンク・アライグマ・イヌ・ネコ

scope=”row”を指定する事で指定した列の見た目が変わります（幅が広がります）。

thになにも指定しなければ、均等の大きさになります。


    <h3 class="title">表組リスト（横並び）</h3>
    <table class="commonTable">
      <tr>
        <th>th</th>
        <th scope="row">th</th>
      </tr>
      <tr>
        <td>テキスト</td>
        <td>テキストテキストテキスト</td>
      </tr>
      <tr>
        <td>テキスト</td>
        <td>テキストテキストテキスト</td>
      </tr>
    </table>

テキストリンク

テキストリンクデフォルト：下線あり

別窓リンク


<div class="btn"><a href="" class="textLink">テキストリンク</a></div>
<div class="btn"><a href="" class="blank" target="_blank">別窓リンク</a></div>

ボタン

中央寄せ


<div class="btnLarge">
<div class="more">
  <a href="#">
    <span class="en">MORE</span>
    <span class="arrow"><svg>
        <use xlink:href="https://anima-ah.com/wp/wp-content/themes/anima/svg/icons.svg#arrow"></use>
      </svg></span>
  </a>
</div>
</div>

<div class="more">
<a href="#">
  <span class="en">MORE</span>
  <span class="arrow"><svg>
      <use xlink:href="https://anima-ah.com/wp/wp-content/themes/anima/svg/icons.svg#arrow"></use>
    </svg></span>
</a>
</div>

左寄せ


<div class="btnLarge btnLeft">
<div class="more">
  <a href="#">
    <span class="en">MORE</span>
    <span class="arrow"><svg>
        <use xlink:href="https://anima-ah.com/wp/wp-content/themes/anima/svg/icons.svg#arrow"></use>
      </svg></span>
  </a>
</div>
</div>

<div class="more btnLeft">
<a href="#">
  <span class="en">MORE</span>
  <span class="arrow"><svg>
      <use xlink:href="https://anima-ah.com/wp/wp-content/themes/anima/svg/icons.svg#arrow"></use>
    </svg></span>
</a>
</div>

右寄せ


<div class="btnLarge btnRight">
<div class="more">
  <a href="#">
    <span class="en">MORE</span>
    <span class="arrow"><svg>
        <use xlink:href="https://anima-ah.com/wp/wp-content/themes/anima/svg/icons.svg#arrow"></use>
      </svg></span>
  </a>
</div>
</div>

<div class="more btnRight">
<a href="#">
  <span class="en">MORE</span>
  <span class="arrow"><svg>
      <use xlink:href="https://anima-ah.com/wp/wp-content/themes/anima/svg/icons.svg#arrow"></use>
    </svg></span>
</a>
</div>

戻るボタン

お知らせ一覧へ


<div class="btnLarge btnBack">
<div class="more">
<a href="#">
<span class="arrow"><svg>
    <use xlink:href="https://anima-ah.com/wp/wp-content/themes/anima/svg/icons.svg#arrow"></use>
  </svg></span>
<span class="ja">お知らせ一覧へ</span>
</a>
</div>
</div>

ダウンロードボタン

初診票ダウンロードする


<div class="btnDL">
	<a href="#">
		<svg><use xlink:href="https://anima-ah.com/wp/wp-content/themes/anima/svg/icons.svg#download"></use></svg>
		<span class="ja">初診票ダウンロードする</span>
	</a>
</div>

SDGs ロゴ

<div class="sdgs_box">
    <div class="logo">
    <img src="../images/second/sdgs.png" alt="sustaionable development goals">
    </div>
    <ul class="icons">
    <li><img src="../images/second/sdg_icon_01_ja_2.png" alt="貧困をなくそう"></li>
    <li><img src="../images/second/sdg_icon_04_ja_2.png" alt="質の高い教育をみんなに"></li>
    <li><img src="../images/second/sdg_icon_10_ja_2.png" alt="人や国の不平等をなくそう"></li>
    <li><img src="../images/second/sdg_icon_11_ja_2.png" alt="住み続けられるまちづくりを"></li>
    </ul>
</div>

ロゴのボタン

<div class="logoLink">
  <a href="https://anima-ah.com/first/#vip"><img decoding="async" src="../images/bnr_8020.webp" alt=""></a>
</div>

ロゴのバナー

<div class="logoBnrLink">
  <a href="https://pet.apokul.jp/web/250/reservations/add" target="_blank" rel="noopener"><img decoding="async" src="../images/second/bnr_8020_form.png" alt="新規で8020クラブへ入会する方の申し込みフォーム"></a>
  </div>
<div class="logoBnrLink">
  <a href="https://pet.apokul.jp/web/250/reservations/add" target="_blank" rel="noopener"><img decoding="async" src="../images/second/bnr_8020_form.png" alt="新規で8020クラブへ入会する方の申し込みフォーム"></a>
  </div>