犬種記事用パーツHTMLフォーマット

犬種記事で使用するパーツのHTMLフォーマットです。

わんちゃんホンポ編集部

更新日：2018年10月23日

お気に入り登録

わんちゃんホンポの最新情報をお届け

画像スライダー

<div class="breed-slide">
<!-- スライダー開始 Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide"><img src="画像のURL" alt="代替テキスト"></div>
    <div class="swiper-slide"><img src="画像のURL" alt="代替テキスト"></div>
    <div class="swiper-slide"><img src="画像のURL" alt="代替テキスト"></div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
<!-- スライダー終了 -->
</div>

※「記事フッター広告(大)」枠に以下のスクリプト必須

<!--　↓↓↓　ここから「スライダー用スクリプト」　↓↓　 -->
<link rel="stylesheet" href="/js/swiper/lib/swiper.min.css">
<script src="/js/swiper/lib/swiper.min.js"></script>
<script src="/js/swiper/breed-swiper.js"></script>
<!--　↑↑↑　「スライダー用スクリプト」ここまで　↑↑↑　-->

基本情報

◯◯◯の基本情報

性格: 性格のテキスト
大きさ: X～Xkg（体重）
X～Xcm（体高）
毛色: 毛色のテキスト
寿命: xx年～xx年

<div class="breed-basic">
  <p class="title">◯◯◯の基本情報</p>
  <dl class="dl-table no-dlist">
    <div>
      <dt>性格</dt>
      <dd>性格のテキスト</dd>
    </div>
    <div>
      <dt>大きさ</dt>
      <dd>X～Xkg（体重）<br>X～Xcm（体高）</dd>
    </div>
    <div>
      <dt>毛色</dt>
      <dd>毛色のテキスト</dd>
    </div>
    <div>
      <dt>寿命</dt>
      <dd>xx年～xx年</dd>
    </div>
  </dl>
</div>

開閉ボタン（折りたたみコンテンツ）

初期で閉じられている部分です。このdivの中はHTMLタグを使って好きに書いてよいです。

<div class="js-stoggle" data-optext="もっと読む" data-cltext="閉じる">
<div class="stoggle-content ">

<p>初期で閉じられている部分です。このdivの中はHTMLタグを使って好きに書いてよいです。</p>

</div>
</div>

開閉ボタンは自動生成されます。

特徴

特徴タイトル

特徴サブタイトル

スコア左側テキスト

スコア右側テキスト

説明文などをいろいろと

<div class="breed-sd">
  <div class="breed-sd_head">
    <h3 class="breed-sd_title">特徴タイトル</h3>
    <div class="breed-sd_subtitle">特徴サブタイトル</div>
  </div>
  <div class="breed-sd_score">
    <div class="score" data-score="5">
      <span class="sr-only">5 Point</span>
    </div>
    <div class="score_word">
      <div class="score_word-a">スコア左側テキスト</div>
      <div class="score_word-b">スコア右側テキスト</div>
    </div>
  </div>
  <div class="breed-sd_detail js-stoggle">
    <div class="stoggle-content">
      <p>説明文などをいろいろと</p>
    </div>
  </div>
</div>

スコアバー部分はこの部分

<div class="score" data-score="5">
  <span class="sr-only">5 Point</span>
</div>

data-score="5"の数字部分によって画像が変わります。1～5まで対応しています。 <span class="sr-only">5 Point</span>にはこのサンプルでは「5 Point」と入れてありますが、お好きなテキストを入れてください。画面上には表示されませんのでSEO向けテキストです。

ご協力頂いた専門家の方々

リンク先名称

{職種}

{名前}

さま

リンク先名称

{職種}

{名前}

さま

<div class="qa-expert-group">
  <div class="qa-expert-title">ご協力頂いた専門家の方々</div>

  <div class="qa-expert-card">
    <div class="qa-expertphoto"><img src="プロフィール画像のURL" alt="{名前}{職種}の写真"></div>
    <div class="qa-expert-profile">
      <div class="kanren-profile">
        <div class="organization"><a href="リンク先のURL" target="_blank" rel="noopener">リンク先名称</a></div>
        <div class="expert-type">{職種}</div>
        <div class="name">{名前}</div>
        <div class="label">さま</div>
      </div>
    </div>
  </div>

  <div class="qa-expert-card">
    <div class="qa-expertphoto"><img src="プロフィール画像のURL" alt="{名前}{職種}の写真"></div>
    <div class="qa-expert-profile">
      <div class="kanren-profile">
        <div class="organization"><a href="リンク先のURL" target="_blank" rel="noopener">リンク先名称</a></div>
        <div class="expert-type">{職種}</div>
        <div class="name">{名前}</div>
        <div class="label">さま</div>
      </div>
    </div>
  </div>

</div>

ご回答頂いた専門家の方々

<div class="qa-expert-group">
  <div class="qa-expert-title">ご回答頂いた専門家の方々</div>

  <div class="qa-expert-card">
    <div class="qa-expertphoto"><img src="プロフィール画像のURL" alt="{名前}{職種}の写真"></div>
    <div class="qa-expert-profile">
      <div class="kanren-profile">
        <div class="organization"><a href="リンク先のURL" target="_blank" rel="noopener">リンク先名称</a></div>
        <div class="expert-type">{職種}</div>
        <div class="name">{名前}</div>
        <div class="label">さま</div>
      </div>
    </div>
  </div>

  <div class="qa-expert-card">
    <div class="qa-expertphoto"><img src="プロフィール画像のURL" alt="{名前}{職種}の写真"></div>
    <div class="qa-expert-profile">
      <div class="kanren-profile">
        <div class="organization"><a href="リンク先のURL" target="_blank" rel="noopener">リンク先名称</a></div>
        <div class="expert-type">{職種}</div>
        <div class="name">{名前}</div>
        <div class="label">さま</div>
      </div>
    </div>
  </div>

</div>

「ご協力頂いた専門家の方々」とはタイトル文が違うだけです。

Q＆Aアコーディオン

質問のテキスト

最初から表示されている回答のテキスト

開閉で表示される回答のテキスト

pタグで自由に記述して大丈夫です

<div class="breed-qa">
<div class="breed-qa_q">
  <p>質問のテキスト</p>
</div>
<div class="breed-qa_a">
  <p>最初から表示されている回答のテキスト</p>
  <div class="js-stoggle" data-optext="もっと読む" data-cltext="閉じる">
    <div class="stoggle-content ">
      <p>開閉で表示される回答のテキスト</p>
      <p>pタグで自由に記述して大丈夫です</p>
    </div>
    <!-- /.js-stoggle -->
  </div>
</div>
</div>