コードサンプル

残タスク

  • NEWS CMSやり直し
  • 施設詳細やり直し
  • 施設検索
  • LP 多言語対応
  • 粗い画像のピックアップ

ベースカラー

ホワイト

// background-color
<div class="bg-white"></div>
//テキストカラー
<p class="t-white"></p>
グレー

// background-color
<div class="bg-gray"></div>
//テキストカラー
<p class="t-gray"></p>
ライトグレー

// background-color
<div class="bg-light-gray"></div>
//テキストカラー
<p class="t-light-gray"></p>
ピンク

// background-color
<div class="bg-pink"></div>
//テキストカラー
<p class="t-pink"></p>
ライトピンク

// background-color
<div class="bg-light-pink"></div>
//テキストカラー
<p class="t-light-pink"></p>
グリーン

// background-color
<div class="bg-green"></div>
//テキストカラー
<p class="t-green"></p>
ライト アイボリー

// background-color
<div class="bg-light-ivory"></div>
//テキストカラー
<p class="t-light-ivory"></p>
オレンジ

// background-color
<div class="bg-orange"></div>
//テキストカラー
<p class="t-orange"></p>
紫

// background-color
<div class="bg-purple"></div>
//テキストカラー
<p class="t-purple"></p>
ブルー

// background-color
<div class="bg-blue"></div>
//テキストカラー
<p class="t-blue"></p>

フォントサイズ

※ブレイクポイントに応じて文字サイズは縮小されます。

※スペースやまわりの要素の兼ね合いでレイアウト崩れを起こす可能性があります。

テキスト


<p class="--fs-16">テキスト</p>

テキスト


<p class="--fs-18">テキスト</p>

テキスト


<p class="--fs-20">テキスト</p>

テキスト


<p class="--fs-22">テキスト</p>

テキスト


<p class="--fs-24">テキスト</p>

テキスト


<p class="--fs-26">テキスト</p>

テキスト


<p class="--fs-28">テキスト</p>

テキスト


<p class="--fs-30">テキスト</p>

フォントウエイト

日本語 デフォルト


// Zen Kaku Gothic New : 400
<p class="regular-jp">テキスト</p>

日本語 セミボールド


// Zen Kaku Gothic New : 500
<p class="semibold-jp">テキスト</p>

日本語 ボールド


// Zen Kaku Gothic New : 600
<p class="bold-jp">テキスト</p>

English regular


// Manrope : 400
<p class="regular-en">Text</p>

English semi bold


// Manrope : 600
<p class="semibold-en">Text</p>

English bold


// Manrope : 800
<p class="bold-en">Text</p>

よく使うアクシビリティ対応コード

スクリーンリーダーに読ませない

aria-hidden="true"


aria-hidden="true"
<i aria-hidden="true"></i>
<div aria-hidden="true"></div>

スクリーンリーダーに読ませる

role, aria-label


<i role="img" aria-label="報告アイコン"></i>

外部リンクのaria-label

aria-label


aria-hidden=""
<a aria-label="外部リンク: Example.com">

別タブリンク

同一ドメイン内の別タブリンク


<a href="" target="_blank" rel="noopener noreferrer" aria-label="外部リンク: 新しいタブで開きます">
    外部リンク (新しいタブ)
</a>

別タブリンク

別ドメインへの別タブリンク


<a href="" target="_blank" rel="nofollow noopener noreferrer" aria-label="外部リンク: 新しいタブで開きます">
    外部リンク (新しいタブ)
</a>

見出しスタイル

日本語タイトル


<h2 class="bold-jp h-type1">
    <div class="--en" aria-hidden="true">English</div>
    <span class="--heading-text">日本語タイトル</span>
</h2>
//Option
.--border-b

日本語タイトル


//Option : .--border-b
<h2 class="bold-jp h-type1 --border-b">
    <div class="--en" aria-hidden="true">English</div>
    <span class="--heading-text">日本語タイトル</span>
</h2>

日本語タイトル


//Option : .--border-b, .--left
<h2 class="bold-jp h-type1 --left">
    <div class="--en" aria-hidden="true">English</div>
    <span class="--heading-text">日本語タイトル</span>
</h2>

日本語タイトル


//Option : 色の変更例
<h2 class="bold-jp h-type1 --left">
    <div class="--en" aria-hidden="true">English</div>
    <span class="--heading-text">日本語タイトル</span>
</h2>

新着情報


<h2 class="h-type2">
    <span>新着情報</span>
</h2>

社会福祉法人サン・ビジョン　決算報告書


<h2 class="bold-jp h-type3">
    <span>社会福祉法人サン・ビジョン　決算報告書</span>
</h2>
//Option: .--center

社会福祉法人サン・ビジョン　決算報告書


//Option: .center
<h2 class="bold-jp h-type3 --center">
    <span>社会福祉法人サン・ビジョン　決算報告書</span>
</h2>

テキスト


//デフォルト: center
<h2 class="bold-jp h-type4">
    <span>テキスト</span>
</h2>

テキスト


//Option: .--left
<h2 class="bold-jp h-type4 --left">
    <span>テキスト</span>
</h2>

テキスト


//Option: color
<h2 class="bold-jp h-type4 --left">
    <span class="t-pink">テキスト</span>
</h2>

テキスト


//line color option : green, orange, blue, pink, purple
<h2 class="bold-jp h-type4 --left --line-pink">
    <span class="t-pink">テキスト</span>
</h2>

働く人にも優しい
ノーリフティングポリシー


<h2 class="h-type5 bold-jp t-pink">
    働く人にも優しい
    <br>ノーリフティングポリシー
</h2>

ノーリフティングポリシーとは？


<h2 class="h-type6">
    <span class="bold-jp">ノーリフティングポリシーとは？</span>
</h2>

タイトル


<h2 class="h-type7">
    <span class="bold-jp">タイトル</span>
</h2>

Table Style

thtd
thtd
thtd
thtd
thtd

//カラーオプション
//フォントスタイルオプション
//フォントウエイトオプション利用可

//.table-sm-scrollerで囲うと、スマホ縦で横スクロール

<table class="simple-table">
    <thead>
        <tr>
            <th class="bg-pink t-white">th</th>
            <td class="bold-en">td</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>th</th>
            <td>td</td>
        </tr>
        <tr>
            <th>th</th>
            <td>td</td>
        </tr>
        <tr>
            <th>th</th>
            <td>td</td>
        </tr>
        <tr>
            <th>th</th>
            <td>td</td>
        </tr>
    </tbody>
</table>
thtd
thtd
thtd
thtd
thtd

//.table-sm-scrollerで囲うと、スマホ縦で横スクロール
//.js-scrollableを加えると、スクロールヒントが表示
※table4行以上を推奨。3行以下だと、スクロールヒントがoverflowしてしまう。
<div class="table-sm-scroller js-scrollable">
    <table class="simple-table">
    </table>
</div>

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/lib/scroll-hint.min.js/scroll-hint.css">
<script src="<?php echo get_template_directory_uri(); ?>/lib/scroll-hint.min.js/scroll-hint.min.js"></script>
<script>window.addEventListener('DOMContentLoaded', function() {new ScrollHint('.js-scrollable', {scrollHintIconAppendClass: 'scroll-hint-icon-white',suggestiveShadow: true,i18n: {scrollable: "スクロールできます"}});});</script>

リンクスタイル

お問い合わせ先一覧はこちら 

<a href="/contact/" class="linkBtnAnimation mb-2">
    <span>お問い合わせ先一覧はこちら</span>
</a>
お問い合わせ先一覧はこちら 

//Option : .--pink
<a href="/contact/" class="linkBtnNormal --pink mx-auto mb-2">
    <span>お問い合わせ先一覧はこちら</span>
</a>
お問い合わせ先一覧はこちら 

//Option : span.bold-jp
<a href="/contact/" class="linkBtnNormal --pink mx-auto mb-2">
    <span class="bold-jp">お問い合わせ先一覧はこちら</span>
</a>
お問い合わせ先一覧はこちら 

//Option : .--position-right
<a href="/contact/" class="linkBtnNormal --pink mx-auto --position-right mb-2">
    <span class="bold-jp">お問い合わせ先一覧はこちら</span>
    <i class="fa-regular fa-chevron-right" aria-hidden="true"></i>
</a>
お問い合わせ先一覧はこちら 

//Option : .--position-right
<a href="/contact/" class="linkBtnNormal --pink mx-auto --position-left mb-2">
    <span class="bold-jp">お問い合わせ先一覧はこちら</span>
    <i class="fa-regular fa-chevron-right" aria-hidden="true"></i>
</a>
お問い合わせ先一覧はこちら 

//Option : オプション無しでi挿入例
<a href="/contact/" class="linkBtnNormal --pink mx-auto --position-left mb-2">
    <i class="fa-regular fa-chevron-right" aria-hidden="true"></i>
    <span class="bold-jp">お問い合わせ先一覧はこちら</span>
</a>
お問い合わせ先一覧はこちら 

//Option : オプション無しでi挿入例
<a href="/contact/" class="linkBtnNormal --pink mx-auto --position-left mb-2">
    <span class="bold-jp">お問い合わせ先一覧はこちら</span>
    <i class="fa-regular fa-chevron-right" aria-hidden="true"></i>
</a>
お問い合わせ先一覧はこちら 

デフォルトの高さは46pxに対して
高さ：.h50, .h60, .h70, .h80が利用可
<a href="/contact/" class="linkBtnNormal --pink mx-auto --position-left h80 mb-2">
    <span class="bold-jp">お問い合わせ先一覧はこちら</span>
    <i class="fa-regular fa-chevron-right" aria-hidden="true"></i>
</a>
お問い合わせ先一覧はこちら 

デフォルトの高さは500pxに対して
高さ：.--w300, .--w400, .--w-max が利用可
<a href="/contact/" class="linkBtnNormal --pink mx-auto --position-left h80 mb-2">
    <span class="bold-jp">お問い合わせ先一覧はこちら</span>
    <i class="fa-regular fa-chevron-right" aria-hidden="true"></i>
</a>

ユーティリティ

テキストの折り返し禁止
一番長い文字を含むthにクラス付与で、スマホ時にthの幅が丁度よくなる


<p class="text-nowrap">テキスト</p>
<th class="text-nowrap">テキスト</th>

スクリーンリーダー用テキスト
視覚的に非表示で、スクリーンリーダーで読まれるテキスト


<h2 class="visually-hidden">テキスト</h2>
<span class="visually-hidden">テキスト</span>
<legend  class="visually-hidden">テキスト</legend>

背景をはみ出してWave Top 白 to 透明
※paddingの定義必須


//Option
.--wave padding上下自動付与
.--wave-top padding-top自動付与
.--wave-bottom padding-bottom自動付与

<section class="section_pdg-bottom --wave">
    <div class="--wave-white-top">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 50">
        <path fill="#fff" d="M878.6,24.4c-58,4.9-114.2,13.7-172,19-82.4,7.6-168.2,8-250.5.2-79.9-7.6-162.8-26.2-241.8-35.7C144.3-.5,67.8-3.9,0,6.5v43.5h1200v-12.4c-102.5-17.6-213.6-22.2-321.4-13.2Z" />
        </svg>
    </div>
</section>

OR
@param top, bottom
echo esc_attr(get_wave_white_to_transparent("top"));

その他

アスタリスクマーク付きリスト

  • アスタリスクマークを付与

<ul class="asterisk">
    <li>
        <span class="asterisk-icon">アスタリスクマークを付与</span>
    </li>
</ul>

アスタリスクマーク付きリスト

  • フォントウエイトを指定
  • フォントカラーを指定 

<ul class="asterisk">
    <li>
        <span class="asterisk-icon bold-jp">フォントウエイトを指定</span>
    </li>
    <li>
        <span class="asterisk-icon">
            <span class="t-pink">フォント</span><span class="t-blue">カラーを</span><span class="t-green">指定</span>
        </span>
    </li>
</ul>

スクロールバー


<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/lib/simplebar/simplebar.css">
<script src="<?php echo get_template_directory_uri(); ?>/lib/simplebar/simplebar.min.js"></script>
<noscript>
 <style>
     .simplebar-content-wrapper {
         scrollbar-width: auto;
         -ms-overflow-style: auto;
     }
     .simplebar-content-wrapper::-webkit-scrollbar,
     .simplebar-hide-scrollbar::-webkit-scrollbar {
         display: initial;
         width: initial;
         height: initial;
         }
     </style>
 </noscript>

 <section data-simplebar>
     …スクロールコンテンツ
 </section>

Light Box


<a href="#" class="btn btn-primary" role="button" data-bs-toggle="modal" data-bs-target="#lightboxModalFullscreen">画像を表示</a>

<div class="modal fade --lightbox" id="lightboxModalFullscreen" tabindex="-1" aria-labelledby="lightboxModalFullscreenLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen" data-bs-dismiss="modal" aria-label="Close">
        <div class="modal-content" style="background-color:unset;">
            <div class="modal-body d-flex align-items-center justify-content-center">
                <div class="--lightbox-body">
                    <div class="close-btn">
                        <i class="fa-regular fa-xmark" aria-hidden="true"></i>
                    </div>
                    <img src="" alt="" width="646" height="459" class="img-fluid" loading="lazy" data-bs-dismiss="modal" aria-label="Close" />
                </div>
            </div>
        </div>
    </div>
</div>

アクセス情報 itemscope属性あり


<dl class="facility_cards__info">
    <dt class="facility_cards__info--dt-1 semibold-jp">
        <span>住所</span>
    </dt>
    <dd itemprop="address" itemscope itemtype="https://schema.org/PostalAddress" class="facility_cards__info--dd-1">
        <span itemprop="postalCode" class="pe-2">〒461-0004</span>
        <span itemprop="addressRegion">愛知県</span>
        <span itemprop="addressLocality">名古屋市</span>
        <span itemprop="streetAddress">東区葵3-25-23</span>
    </dd>
    <dt class="facility_cards__info--dt-2 semibold-jp">
        <span>電話番号</span>
    </dt>
    <dd class="facility_cards__info--dd-2">
        <a href="tel:052-856-8811" itemprop="telephone" class="regular-en">052-856-8811</a>
    </dd>
    <dt class="facility_cards__info--dt-3 semibold-jp">
        <span>FAX番号</span>
    </dt>
    <dd class="facility_cards__info--dd-3">
        <span itemprop="faxNumber" class="regular-en">052-856-3111</span>
    </dd>
    <dt class="facility_cards__info--dt-4 semibold-jp">
        <span>駐車場</span>
    </dt>
    <dd class="facility_cards__info--dd-4">
        <span itemprop="amenityFeature">地下にあり</span>
    </dd>
</dl>

関数

画像呼び出し関数
1x,2x,3xのpng or jpgと対のwebpが必須


$picture = [
    'img_path' => '/img/pages/path/',
    'file_name' => 'basename',
    'format' => 'png', // png or jpg
    'width' => 幅,
    'height' => 高さ,
    'alt' => '',
    'class' => '',
];
echo get_picture($picture);

GoogleMapと経路案内の取得関数
※引数に施設名（GoogleMapで施設名が表示する場合のみ有効）


<?php echo get_google_map_link("ジョイフル千種"); ?>