パーツサンプルコード

Parts Sample

index

抜粋

抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト
抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト
抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト
HTML
copy
<?php
////////////////////////////////////////
// 抜粋 設定されている場合に表示
////////////////////////////////////////
?>
<?php if (has_excerpt()) : ?>
<div id="sec-excerpt" class="section">
    <div class="inner">
        <?php echo nl2br(get_the_excerpt(get_the_ID())); ?>
    </div>
</div>
<?php endif; ?>

管理画面で固定ページ、または投稿記事の「抜粋」に入力されたテキストを自動表示する。
設定されていなければ、セクションごと非表示となる。

セクション基本形

HTML
copy
<?php
////////////////////////////////////////
// セクション 〇〇〇
////////////////////////////////////////
?>
<div id="sec-●●●" class="section">
    <div class="inner">
        <h2 class="sec-title">セクションタイトル</h2>
        <p class="sec-lead">セクションリード文</p>
        <div class="block">
            <h3 class="block-title">ブロックタイトル</h3>
        </div>
    </div>
</div>

H2の情報単位でセクションを設ける。

  • 「id="sec-●●●"」の「●●●」にはセクションの内容を表す簡潔な英単語を用いる
  • 「.inner」はサイト幅管理用のため、指示がない限りは省略不可
  • セクション内にH3がある場合は、その関連要素含め「.block」でラップする
  • H2は省略可だが、H3を設ける場合は必ずH2も設ける
  • 「.sec-lead」は省略可
  • パーツは「.inner」内に設置する

パーツ テキスト

標準テキスト

本文テキスト本文テキスト本文テキスト

HTML
copy
<p>本文テキスト本文テキスト本文テキスト</p>

標準テキスト+強調テキスト

本文テキスト 強調テキスト強調テキスト 本文テキスト

HTML
copy
<p>本文テキスト <strong>強調テキスト強調テキスト</strong> 本文テキスト</p>
HTML
copy
<p>本文テキスト<a class="kyhp-text-link" href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">文中リンク</a>本文テキスト</p>
  • リンク先のパス出力は必ず関数「ND_echoPageUrl()」を使用する
HTML
copy
<p>本文テキスト<a class="kyhp-text-link" href="https://〇〇〇" target="_blank" rel="noopener noreferrer">テキストリンク(外部リンク)</a>本文テキスト</p>
  • リンク先のパス出力は必ず関数「ND_echoPageUrl()」を使用する
  • 必ず属性「target="_blank" rel="noopener noreferrer"」を付与する

背景色ボックス+テキスト

本文テキスト本文テキスト本文テキスト

HTML
copy
<div class="kyhp-color-box">
    <p>本文テキスト本文テキスト本文テキスト</p>
</div>

背景色ボックス+ulリスト

  • リスト
  • リストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリスト
  • リスト
HTML
copy
<div class="kyhp-color-box">
    <ul class="kyhp-ul-list">
        <li>リスト</li>
    </ul>
</div>
  • 基本的には背景色ボックスとセットで設置する
  • 背景色ボックスが不要な場合は、div「.kyhp-color-box」を外す
  • liを必要数分追加する

背景色ボックス+olリスト

  1. リスト
  2. リストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリスト
  3. リスト
HTML
copy
<div class="kyhp-color-box">
    <ol class="kyhp-ol-list">
        <li>リスト</li>
    </ol>
</div>
  • 基本的には背景色ボックスとセットで設置する
  • 背景色ボックスが不要な場合は、div「.kyhp-color-box」を外す
  • liを必要数分追加する

パーツ ボタン

単独ボタン

HTML
copy
<div class="kyhp-btn"><a href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">標準ボタン</a></div>

リンク先のパス出力は必ず関数「ND_echoPageUrl()」を使用する。
外部サイトへのリンクは必ず属性「target="_blank" rel="noopener noreferrer"」を付与する。

ボタンサイズは3種類。属性「data-size」で指定する。

  • 標準ボタン:指定なし
  • 小ボタン :small
  • 大ボタン :large

ボーダー有無は属性「data-type」で指定する。

  • ボーダーなし:指定なし
  • ボーダーあり:border
HTML
copy
<div class="kyhp-btn-block">
    <div class="kyhp-btn"><a href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">標準ボタン</a></div>
    <div class="kyhp-btn"><a href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">標準ボタン</a></div>
</div>

div「.kyhp-btn-block」でボタンをラップする。

HTML
copy
<div class="kyhp-btn"><a href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">標準ボタン</a></div>
<div class="kyhp-btn" data-type="border"><a href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">標準ボタン(ボーダー)</a></div>
HTML
copy
<div class="kyhp-btn" data-size="small"><a href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">smallボタン</a></div>
<div class="kyhp-btn" data-size="small" data-type="border"><a href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">smallボタン(ボーダー)</a></div>
HTML
copy
<div class="kyhp-btn" data-size="large"><a href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">largeボタン</a></div>
<div class="kyhp-btn" data-size="large" data-type="border"><a href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">largeボタン(ボーダー)</a></div>

パーツ タブ(有料)

ラベルラベル1

ラベルラベル2

ラベルラベル3

コンテンツ1テキストテキストテキスト

コンテンツ2テキストテキストテキスト

コンテンツ3テキストテキストテキスト

HTML
copy
<div class="kyhp-tab">
    <div class="tabs">
        <div class="tab active">
            <p class="tab-label">ラベルラベル1</p>
        </div>
        <div class="tab">
            <p class="tab-label">ラベルラベル2</p>
        </div>
        <div class="tab">
            <p class="tab-label">ラベルラベル3</p>
        </div>
    </div>
    <div class="contents">
        <div class="content active">
            <p>コンテンツ1テキストテキストテキスト</p>
        </div>
        <div class="content">
            <p>コンテンツ2テキストテキストテキスト</p>
        </div>
        <div class="content">
            <p>コンテンツ3テキストテキストテキスト</p>
        </div>
    </div>
</div>
  • 「.tab」と「.content」で1セット
  • 「.tab」と「.content」の数、並びを合わせること
  • 最初に表示しておく「.tab」と「.content」のclassに「.active」を指定しておく
  • タブ要素のSP時表示は案件ごとに要検討

パーツ 画像

標準画像

サンプル画像

画像キャプション画像キャプション画像キャプション

HTML
copy
<div class="kyhp-image">
    <img src="<?php ND_echoTmpImgUrl("/sample/img-sample.jpg"); ?>" alt="サンプル画像" width="960" height="540">
    <p class="caption">画像キャプション画像キャプション画像キャプション</p>
</div>
  • 画像サイズがサイト幅より大きい場合はサイト幅で表示される
  • 画像サイズがサイト幅より小さい場合は画像幅で表示される
  • 画像キャプションは削除可

スライダー(swiper使用)

/sample/image-slider-01.jpg
/sample/image-slider-02.jpg
/sample/image-slider-03.jpg
HTML
copy
<div class="kyhp-slider">
    <?php
    $slider_arr = [
        ["path"=>"/sample/image-slider-01.jpg", "alt"=>"スライド1"],
        ["path"=>"/sample/image-slider-02.jpg", "alt"=>"スライド2"],
        ["path"=>"/sample/image-slider-03.jpg", "alt"=>"スライド3"],
    ];
    ?>
    <div class="swiper slider-sample">
        <div class="swiper-wrapper">
            <?php foreach($slider_arr as $var): ?>
            <div class="swiper-slide">
                <img src="<?php ND_echoTmpImgUrl($var["path"]); ?>" alt="<?php echo $var["path"]; ?>" />
            </div>
            <?php endforeach; ?>
        </div>
    </div>
    <!-- 前後の矢印 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- ページネーション -->
    <div class="swiper-pagination"></div>
</div>
SCRIPT
copy
<script>
$(function(){
    // スライダー
    const swiper = new Swiper(".swiper", {
        loop: true,
        autoplay: {
            delay: 3000,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        }
    });
    swiper.autoplay.stop(); //画面に現れるまでswiperを停止
    $(window).on('load scroll', function () {
        let position = $('.slider-sample').offset().top - $(window).innerHeight() + 100,
            scrollTop = $(window).scrollTop(); 
        if(scrollTop > position) {
            swiper.autoplay.start(); //画面に現れたらswiperを開始
        }else{
            swiper.autoplay.stop(); // 画面外にスクロールしたらswiperを停止
        }
    });
});
</script>
  • 1スライドに1画像
  • テキスト等の画像以外の要素は使用不可
  • テキストが必要な場合は画像に含める
  • 配列「$slider_arr」で画像設定を行う
    path:「library/images」以降のファイル名まで指定
    alt :画像の「alt」を設定
  • htm、スクリプトはページのテンプレート内に必要数分設置する
    その際、div「.swiper」を個別のclass名とし、スクリプトも必要数分設置すること
    ※代入する変数名、Swiperの第一引数も各々変更すること
  • その他は指示がない限り変更不可

左画像+右テキスト

サンプル画像

画像キャプション画像キャプション画像キャプション

タイトル

本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト

HTML
copy
<div class="kyhp-flex">
    <div class="image">
        <img src="<?php ND_echoTmpImgUrl("/sample/img-sample.jpg"); ?>" alt="サンプル画像" width="424" height="240">
        <p class="caption">画像キャプション画像キャプション画像キャプション</p>
    </div>
    <div class="info">
        <h4 class="title">タイトル</h4>
        <p>本文テキスト本文テキスト本文テキスト</p>
        <div class="kyhp-btn" data-type="border" data-size="small"><a href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">smallボタン(ボーダー)</a></div>
        <div class="kyhp-btn"><a href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">標準ボタン</a></div>
    </div>
</div>
  • 画像キャプションは削除可
  • 必ず「.image」「.info」の順番で記述
    ※SP時に縦積み表示するため
  • 「.info」内の見出しレベル(h4)は埋め込む場所によって適宜変更

右画像+左テキスト

サンプル画像

画像キャプション画像キャプション画像キャプション

タイトルパーツ

本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト

HTML
copy
<div class="kyhp-flex" data-order="reverse">
    <div class="image">
        <img src="<?php ND_echoTmpImgUrl("/sample/img-sample.jpg"); ?>" alt="サンプル画像" width="424" height="240">
        <p class="caption">画像キャプション画像キャプション画像キャプション</p>
    </div>
    <div class="info">
        <h4 class="title">タイトルパーツ</h4>
        <p>本文テキスト本文テキスト本文テキスト</p>
        <div class="kyhp-btn" data-type="border" data-size="small"><a href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">smallボタン(ボーダー)</a></div>
        <div class="kyhp-btn"><a href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">標準ボタン</a></div>
    </div>
</div>
  • 画像キャプションは削除可
  • 必ず「.image」「.info」の順番で記述
    ※SP時に縦積み表示するため
  • 「.info」内の見出しレベル(h4)は埋め込む場所によって適宜変更

パーツ 表

T見出し T見出し T見出し
T見出し Tデータ Tデータ Tデータ
T見出し Tデータ Tデータ Tデータ
T見出し Tデータ Tデータ Tデータ
HTML
copy
<div class="kyhp-tbl">
    <div class="block-wscroll-tablet">
        <div class="block-wscroll-inner">
            <table>
                <tr>
                    <th></th>
                    <th>T見出し</th>
                    <th>T見出し</th>
                    <th>T見出し</th>
                </tr>
                <tr>
                    <th>T見出し</th>
                    <td>Tデータ</td>
                    <td>Tデータ</td>
                    <td>Tデータ</td>
                </tr>
            </table>
        </div>
    </div>
</div>
  • 表全体の幅はサイト幅
  • ブラウザ幅が表全体の幅に満たない場合はスクロール表示される
  • trが1行分。必要数分追加する

パーツ カードリスト

カードリスト

タイトル1

タイトル1

推奨MAX(44文字)リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

タイトル2

タイトル2

推奨MAX(44文字)リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

タイトル3

タイトル3

推奨MAX(44文字)リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

HTML
copy
<?php
$card_list_arr = [
    "image_width" => 272,
    "image_height" => 154,
    "item" => [
                    ["title"=>"タイトル1", "lead"=>"推奨MAX(44文字)リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文", 
                    "image_path"=>"/sample/img-sample.jpg", "btn_label"=>"ボタンラベル", "btn_href"=>"/〇〇〇/"],
                    ["title"=>"タイトル2", "lead"=>"推奨MAX(44文字)リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文", 
                    "image_path"=>"/sample/img-sample.jpg", "btn_label"=>"ボタンラベル", "btn_href"=>"/〇〇〇/"],
                    ["title"=>"タイトル3", "lead"=>"推奨MAX(44文字)リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文", 
                    "image_path"=>"/sample/img-sample.jpg", "btn_label"=>"ボタンラベル", "btn_href"=>"/〇〇〇/"],
                ],
];
?>
<div class="kyhp-card-list">
    <?php foreach($card_list_arr["item"] as $var) : ?>
    <div class="item">
        <div class="image">
            <img src="<?php ND_echoTmpImgUrl($var["image_path"]); ?>" alt="<?php echo $var["title"]; ?>" width="<?php echo $card_list_arr["image_width"]; ?>" height="<?php echo $card_list_arr["image_height"]; ?>">
        </div>
        <div class="info">
            <h4 class="title"><?php echo $var["title"]; ?></h4>
            <p class=" lead"><?php echo $var["lead"]; ?></p>
            <div class="kyhp-btn" data-type="border" data-size="small"><a href="<?php ND_echoPageUrl($var["image_path"]); ?>"><?php echo $var["btn_label"]; ?></a></div>
        </div>
    </div>
    <?php endforeach; ?>
</div>

カード情報は配列「$card_list_arr」で設定する。

  • image_width :画像のwidth属性値(全カード共通)
  • image_height:画像のheight属性値(全カード共通)
  • item title :タイトル
  • lead :リード文
  • image_path:「library/images」以降のファイル名まで指定
  • btn_label :ボタンラベル
  • btn_href :ボタンリンク先URL

div「.info」内のh4「.title」は状況に応じて他タグ(h3やh5やp)に変更可だが、必ずclassに「.title」を付与すること

ボタンの種類を変更したい場合は、div「.kyhp-btn」内の属性を変更する。

ボタンが不要の場合は、div「.kyhp-btn」を削除する

2列にする場合は、div「.kyhp-card-list」に属性「data-col="2"」を追加する

HTML
copy
<?php
$card_list_link_arr = [
    "image_width" => 272,
    "image_height" => 154,
    "item" => [
        ["title"=>"タイトル1", "lead"=>"推奨MAX(44文字)リード文リード文リード文", 
        "image_path"=>"/sample/img-sample.jpg", "href"=>"/〇〇〇/", "target"=>""],
        ["title"=>"タイトル2", "lead"=>"推奨MAX(44文字)リード文リード文リード文", 
        "image_path"=>"/sample/img-sample.jpg", "href"=>"/〇〇〇/", "target"=>""],
        ["title"=>"タイトル3", "lead"=>"推奨MAX(44文字)リード文リード文リード文", 
        "image_path"=>"/sample/img-sample.jpg", "href"=>"/〇〇〇/", "target"=>""],
    ],
];
?>
<div class="kyhp-card-list kyhp-image-zoom" data-type="link">
    <?php foreach($card_list_link_arr["item"] as $var) : ?>
    <a class="item" href="<?php echo $var["href"]; ?>" <?php if($var["target"]){echo 'target="_blank" rel="noopener noreferrer"';} ?> >
        <div class="image">
            <img src="<?php ND_echoTmpImgUrl($var["image_path"]); ?>" alt="<?php echo $var["title"]; ?>" width="<?php echo $card_list_arr["image_width"]; ?>" height="<?php echo $card_list_arr["image_height"]; ?>">
        </div>
        <div class="info">
            <h4 class="title"><?php echo $var["title"]; ?></h4>
            <p class=" lead"><?php echo $var["lead"]; ?></p>
        </div>
    </a>
    <?php endforeach; ?>
</div>

カード情報は配列「$card_list_link_arr」で設定する。

  • image_width :画像のwidth属性値(全カード共通)
  • image_height:画像のheight属性値(全カード共通)
  • item title :タイトル
  • lead :リード文
  • image_path:「library/images」以降のファイル名まで指定
  • btn_label :ボタンラベル
  • href :リンク先
    サイト内リンクの場合は、ドメイン以降のパス(先頭と末尾に「/」を付ける)
    外部リンクの場合は、URL
  • target :サイト内リンクの場合は空、外部リンクの場合は「brank」を設定

div「.info」内のh4「.title」は状況に応じて他タグ(h3やh5やp)に変更可だが、必ずclassに「.title」を付与すること

2列にする場合は、div「.kyhp-card-list」に属性「data-col="2"」を追加する

イラストリスト

タイトル1

タイトル1

推奨MAX(44文字)リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

タイトル2

タイトル2

推奨MAX(44文字)リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

タイトル3

タイトル3

推奨MAX(44文字)リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

HTML
copy
<?php
$card_list_illust_arr = [
    "image_width" => 256,
    "image_height" => 256,
    "item" => [
                    ["title"=>"タイトル1", "lead"=>"推奨MAX(44文字)リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文", 
                    "image_path"=>"/sample/illust-sample-1.png", "btn_label"=>"ボタンラベル", "btn_href"=>"/〇〇〇/"],
                    ["title"=>"タイトル2", "lead"=>"推奨MAX(44文字)リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文", 
                    "image_path"=>"/sample/illust-sample-2.png", "btn_label"=>"ボタンラベル", "btn_href"=>"/〇〇〇/"],
                    ["title"=>"タイトル3", "lead"=>"推奨MAX(44文字)リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文", 
                    "image_path"=>"/sample/illust-sample-3.png", "btn_label"=>"ボタンラベル", "btn_href"=>"/〇〇〇/"],
                ],
];
?>
<div class="kyhp-card-list" data-type="illust">
    <?php foreach($card_list_illust_arr["item"] as $var) : ?>
    <div class="item">
        <div class="image">
            <img src="<?php ND_echoTmpImgUrl($var["image_path"]); ?>" alt="<?php echo $var["title"]; ?>" width="<?php echo $card_list_illust_arr["image_width"]; ?>" height="<?php echo $card_list_illust_arr["image_height"]; ?>">
        </div>
        <div class="info">
            <h4 class="title"><?php echo $var["title"]; ?></h4>
            <p class=" lead"><?php echo $var["lead"]; ?></p>
            <div class="kyhp-btn" data-type="border" data-size="small"><a href="<?php ND_echoPageUrl($var["btn_href"]); ?>"><?php echo $var["btn_label"]; ?></a></div>
        </div>
    </div>
    <?php endforeach; ?>
</div>

カード情報は配列「$card_list_illust_arr」で設定する。

  • image_width :画像のwidth属性値(全カード共通)
  • image_height:画像のheight属性値(全カード共通)
  • item title :タイトル
  • lead :リード文
  • image_path:「library/images」以降のファイル名まで指定
  • btn_label :ボタンラベル
  • btn_href :ボタンリンク先URL

div「.info」内のh4「.title」は状況に応じて他タグ(h3やh5やp)に変更可だが、必ずclassに「.title」を付与すること

ボタンの種類を変更したい場合は、div「.kyhp-btn」内の属性を変更する。

ボタンが不要の場合は、div「.kyhp-btn」を削除する

2列にする場合は、div「.kyhp-card-list」に属性「data-col="2"」を追加する

パーツ dlリスト

項目名

内容文章文章文章文章文章文章文章文章

リンク

項目名

内容文章文章文章文章文章文章文章文章内容文章文章文章文章文章文章文章文章内容文章文章文章文章文章文章文章文章内容文章文章文章文章文章文章文章文章内容文章文章文章文章文章文章文章文章

リンク

項目名

内容文章文章文章文章文章文章文章文章

リンク

HTML
copy
<dl class="kyhp-dl-list">
    <div class="item">
        <dt>項目名</dt>
        <dd>
            <p>内容文章文章文章文章文章文章文章文章</p>
            <p><a class="kyhp-text-link" href="/〇〇〇/">リンク</a></p>
            <div class="kyhp-btn" data-type="border" data-size="small"><a href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">テキスト</a></div>
        </dd>
    </div>
</dl>
  • div「.item」がデータの1セット。必要数分追加する
  • dtを変更し、dd内に必要なテキスト、パーツを設置する

パーツ 番号リスト

アイコンつき番号リスト

サンプル画像

見出しテキスト見出しテキスト見出しテキスト

リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

サンプル画像

見出しテキスト見出しテキスト見出しテキスト

リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

サンプル画像

見出しテキスト見出しテキスト見出しテキスト

リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

サンプル画像

見出しテキスト見出しテキスト見出しテキスト

リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

HTML
copy
<div class="kyhp-num-image-list" data-type="icon">
    <div class="item">
        <div class="image">
            <img src="<?php ND_echoTmpImgUrl("/sample/icon-sample-1.svg"); ?>" alt="サンプル画像" width="120" height="120">
        </div>
        <div class="info">
            <h4 class="title"><span>見出しテキスト見出しテキスト見出しテキスト</span></h4>
            <p>リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文</p>
            <div class="kyhp-btn" data-type="border" data-size="small"><a href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">テキスト</a></div>
        </div>
    </div>
</div>
  • div「.item」がデータの1セット。必要数分追加する
  • 番号は自動で付与されるため、テキストとして設置しないこと
  • div「.info」内のh4「.title」は状況に応じて他タグ(h5やp)に変更可だが、必ずclassに「.title」を付与すること
  • div「.info」内の「.title」要素以外は、テキスト、パーツを変更可

画像つき番号リスト

サンプル画像

見出しテキスト見出しテキスト見出しテキスト

リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

サンプル画像

見出しテキスト見出しテキスト見出しテキスト

リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

サンプル画像

見出しテキスト見出しテキスト見出しテキスト

リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

サンプル画像

見出しテキスト見出しテキスト見出しテキスト

リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

HTML
copy
<div class="kyhp-num-image-list">
    <div class="item">
        <div class="image">
            <img src="<?php ND_echoTmpImgUrl("/sample/img-sample.jpg"); ?>" alt="サンプル画像" width="272" height="154">
        </div>
        <div class="info">
            <h4 class="title"><span>見出しテキスト見出しテキスト見出しテキスト</span></h4>
            <p>リード文リード文リード文リード文リード文</p>
            <div class="kyhp-btn" data-type="border" data-size="small"><a href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">テキスト</a></div>
        </div>
    </div>
</div>
  • div「.item」がデータの1セット。必要数分追加する
  • 番号は自動で付与されるため、テキストとして設置しないこと
  • div「.info」内のh4「.title」は状況に応じて他タグ(h5やp)に変更可だが、必ずclassに「.title」を付与すること
  • div「.info」内の「.title」要素以外は、テキスト、パーツを変更可

番号リスト

見出しテキスト見出しテキスト見出しテキスト

リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

見出しテキスト見出しテキスト見出しテキスト

リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

見出しテキスト見出しテキスト見出しテキスト

リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

見出しテキスト見出しテキスト見出しテキスト

リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

HTML
copy
<div class="kyhp-num-list">
    <div class="item">
        <div class="info">
            <h4 class="title">見出しテキスト見出しテキスト見出しテキスト</h4>
            <p>リード文リード文リード文リード文リード文</p>
            <div class="kyhp-btn" data-type="border" data-size="small"><a href="<?php ND_echoPageUrl("/〇〇〇/"); ?>">テキスト</a></div>
        </div>
    </div>
</div>
  • div「.item」がデータの1セット。必要数分追加する
  • 番号は自動で付与されるため、テキストとして設置しないこと
  • div「.info」内のh4「.title」は状況に応じて他タグ(h5やp)に変更可だが、必ずclassに「.title」を付与すること
  • div「.info」内の「.title」要素以外は、テキスト、パーツを変更可

パーツ アコーディオン

テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
HTML
copy
<?php
$accordion_arr = [
    [
        "summary"=>"タイトルタイトルタイトル",
        "content"=>"テキストテキストテキストテキスト",
    ],
];
?>
<?php get_template_part( 'template-parts/kyhp-accordion-list',null,$accordion_arr ); ?>
  • ページ表示時、1つ目のセットが開いた状態となる
  • 配列「$accordion_arr」で設定を行う。1要素(配列)が1セット。必要数分追加する
    summary:タイトル
    content:タイトルクリックで表示されるテキスト
HTML(content内容をカスタムする場合)
copy
<div class="kyhp-accordion-list">
	<details class="accordion is-opened" open="true">
		<summary class="accordion-summary">
			<div class="accordion-inner">
				<div class="summary">質問テキスト</div>
				<div class="accordion-btn"></div>
			</div>
		</summary>
		<div class="accordion-content">
			<div class="accordion-inner">
				<div class="content">回答コンテンツ</div>
			</div>
		</div>
	</details>
</div>
  • 「details」が1セット
  • 「.summary」に質問テキストを設定する
  • 「.content」に回答コンテンツを設定する
  • 「details」を必要セット設定する

パーツ Google Map

HTML
copy
<div class="kyhp-googlemaps">
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12958.217924158913!2d139.8051365!3d35.7125796!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188fe34c656ae7%3A0x1aed652d4b2c72c8!2zTkVSROOIsQ!5e0!3m2!1sja!2sjp!4v1684928647443!5m2!1sja!2sjp" width="880" height="440" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>

GoogleMapsで埋め込みコードを取得し、iframeを差し替える

  • widthはサイト幅に合わせる

パーツ アクセス(左テキスト+右Map)

東京店

〒999-9999
東京都練馬区〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇

TEL:03-888-8888

営業時間等の補足情報

  • Twitter公式アカウント
  • Facebook公式アカウント
  • Instagram公式アカウント
  • YouTube公式アカウント
HTML
copy
<div class="kyhp-access-flex">
    <div class="info">
        <h3 class="title">東京店</h3>
        <div class="info-address">
            <p>〒999-9999<br>
            東京都練馬区〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</p>
            <p class="tel">TEL:03-888-8888</p>
        </div>
        <div class="info-memo">
            <p>営業時間等の補足情報</p>
        </div>
        <div class="info-sns">
            <ul class="sns-list">
                <li class="sns-twitter"><a href="https://twitter.com/NERDTEAMPR" target="_blank" rel="noopener noreferrer"><img src="<?php ND_echoTmpImgUrl("/common/icon-sns-twitter.svg"); ?>" alt="Twitter公式アカウント" width="48" height="48"></a></li>
                <li class="sns-facebook"><a href="https://www.facebook.com/nerdteampr/" target="_blank" rel="noopener noreferrer"><img src="<?php ND_echoTmpImgUrl("/common/icon-sns-facebook.svg"); ?>" alt="Facebook公式アカウント" width="48" height="48"></a></li>
                <li class="sns-instagram"><a href="https://www.instagram.com/ruiz1010temmyo/" target="_blank" rel="noopener noreferrer"><img src="<?php ND_echoTmpImgUrl("/common/icon-sns-instagram.svg"); ?>" alt="Instagram公式アカウント" width="48" height="48"></a></li>
                <li class="sns-youtube"><a href="https://www.youtube.com/channel/UCLGluHyrSP4onqVbgXmj_7Q" target="_blank" rel="noopener noreferrer"><img src="<?php ND_echoTmpImgUrl("/common/icon-sns-youtube.svg"); ?>" alt="YouTube公式アカウント" width="48" height="48"></a></li>
            </ul>
        </div>
        <div class="kyhp-btn"><a href="〇〇〇" target="_blank" rel="noopener noreferrer">Google Map</a></div>
    </div>
    <div class="map">
        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d25916.43571824557!2d139.805137!3d35.71258!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188fe34c656ae7%3A0x1aed652d4b2c72c8!2zTkVSROOIsQ!5e0!3m2!1sja!2sjp!4v1694930351114!5m2!1sja!2sjp" width="560" height="460" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
</div>

テキスト情報 div「.info」内

  • h3「.title」は状況に応じて他タグ(h4やp)に変更可だが、必ずclassに「.title」を付与すること
  • div「.info-address」内に住所や電話番号等、基本情報を設置
  • div「.info-memo」内に営業時間等、補足情報をテキストで適宜設定
  • div「.info-memo」は削除可
  • div「.info-sns」でTwitter、Facebook、Instagrm、YouTubeの4種類から必要なSNSを設置し、設置するSNSの公式アカウントURLを適宜変更
  • div「.info-sns」は削除可
  • div「.kyhp-btn」のリンク先に該当ヶ所のGoogleMapsのURLを設置
  • div「.kyhp-btn」は削除可

div「.map」内

  • GoogleMapsで埋め込みコードを取得し、iframeを差し替える
  • iframeの属性「width」は560とする

SNSシェア

Share on
URLをクリップボードにコピー
HTML
copy
<div id="sec-share" class="section">
	<div class="inner">
		<?php get_template_part( 'template-parts/block-share' ); ?>
	</div>
</div>

固定ページや投稿記事詳細ページなど、ページをシェアさせたい場合に設置する

全幅画像

HTML
copy
<div class="kyhp-full-image"></div>
  • div「.inner」内に含めないこと
  • セクション内に全幅画像しか存在ない場合、div「.inner」は削除
  • 画像はcssで背景画像として指定
  • テキスト等はなし(バナー的に扱う)。必要な場合は画像に含める

投稿用導線(カード式) お知らせ

申し訳ございません。
お探しの情報は見つかりませんでした。

HTML
copy
<?php
////////////////////////////////////////
// 投稿用導線(カード式)
////////////////////////////////////////
$param = [
    "slug" => "news",
    // "sec_class" => "no-margin",
    "title" => "投稿用導線(カード式) お知らせ",
    // "lead" => "リード文",
    "cnt"  => 3,
    "btn_label" => "もっと見る",
    "type" => "card",
    // "temp_type" => "news",
];
get_template_part('template-parts/kyhp-sec-post-list', null, $param);
?>

導線用のため、当該の一覧ページには使用しない。

ディレクトリ「template-parts」内の「kyhp-sec-post-list.php」を呼び出す。

記事がない場合はセクションごと出力されない。(セクションタイトルも表示されない)

「kyhp-sec-post-list.php」はセクションごと出力するため、セクション、及び「.inner」の記述不要

設定は配列「$param」で行う。

  • slug :カスタム投稿タイプのslug
  • title :セクションタイトル(カスタム投稿タイプのラベルを使用する場合はコメントアウト)
  • lead :リード文(不要な場合はコメントアウト)
  • cnt :記事表示数(指示がない限り3)
  • btn_label:一覧ページへのボタンラベル
  • type :card
  • temp_type:1件分表示に個別に作成したテンプレートを使用する場合は、カスタム投稿タイプのslugを指定
    デフォルト表示の場合はコメントアウト

投稿用導線(リスト式) お知らせ

リード文リード文リード文リード文リード文

申し訳ございません。
お探しの情報は見つかりませんでした。

HTML
copy
<?php
////////////////////////////////////////
// 投稿用導線(リスト式)
////////////////////////////////////////
$param = [
    "slug" => "news",
    // "sec_class" => "no-margin",
    "title" => "投稿用導線(リスト式) お知らせ",
    "lead" => "リード文リード文リード文リード文リード文",
    "cnt"  => 3,
    "btn_label" => "もっと見る",
    "type" => "list",
    "temp_type" => "news",
];
get_template_part('template-parts/kyhp-sec-post-list', null, $param);
?>

導線用のため、当該の一覧ページには使用しない。

ディレクトリ「template-parts」内の「kyhp-sec-post-list.php」を呼び出す。

記事がない場合はセクションごと出力されない。(セクションタイトルも表示されない)

「kyhp-sec-post-list.php」はセクションごと出力するため、セクション、及び「.inner」の記述不要

設定は配列「$param」で行う。

  • slug :カスタム投稿タイプのslug
  • title :セクションタイトル(カスタム投稿タイプのラベルを使用する場合はコメントアウト)
  • lead :リード文(不要な場合はコメントアウト)
  • cnt :記事表示数(指示がない限り3)
  • btn_label:一覧ページへのボタンラベル
  • type :list
  • temp_type:1件分表示に個別に作成したテンプレートを使用する場合は、カスタム投稿タイプのslugを指定
    デフォルト表示の場合はコメントアウト
HTML
copy
<?php
////////////////////////////////////////
// CTA 〇〇〇
////////////////////////////////////////
?>
<?php get_template_part( 'template-parts/cta-〇〇〇' ); ?>

ディレクトリ「template-parts」内に作成した「cta-〇〇〇.php」を呼び出す。

「cta-〇〇〇.php」はセクションごと出力するため、セクション、及び「.inner」の記述不要

  • 事前にディレクトリ「template-parts」内に「cta-〇〇〇.php」を作成しておくこと
  • get_template_part関数で指定するファイル名には拡張子を付けないこと
  • サイト内全ページに設置する場合は、「footer.php」に設置すること(特定のページに設置する場合のみ、該当ページに設置)