パーツカタログ
このページに記載するパーツは 固定ページ でのみ使用してください。
お知らせ記事で使用すると、レイアウトが崩れる可能性があります。
カラーパレット
- ピンク： #d48d80
- 薄ピンク： #fdf7f3
- グレー（茶）： #96957f
- 黒： #333333
テキスト
標準テキスト
強調テキスト
※注釈テキスト
<p>標準テキスト</p>
<p><b>強調テキスト</b></p>
<p><span class="c-annotation">※注釈テキスト</span></p>タイトル、見出し
タイトル
<h1 class="c-title">タイトル</h1>大見出し
<h2 class="c-heading">大見出し</h2>中見出し
中見出し（罫線なし）
中見出し（用語解説アイコン）
<h3 class="c-heading -medium">中見出し</h3>
<h3 class="c-heading -medium -noborder">中見出し（罫線なし）</h3>
<h3 class="c-heading -medium -noborder"><img src="/wp-content/themes/akachan-engumi/assets/images/common/icon_book.svg" alt=""> 中見出し（用語解説アイコン）</h3>小見出し
<h4 class="c-heading -small">小見出し</h4>リンク、ボタン
<p><a class="c-link" href="">サイト内テキストリンク</a></p>
<p><a class="c-link" href="" target="_blank" rel="noopener">外部サイトテキストリンク</a></p>
<p class="u-tac"><a class="c-link" href="">サイト内テキストリンク（中央寄せ）</a></p>
<p class="u-tar"><a class="c-link" href="">サイト内テキストリンク（右寄せ）</a></p><p><a class="c-btn" href="">サイト内ボタンリンク</a></p>
<p><a class="c-btn" href="" target="_blank" rel="noopener">外部サイトボタンリンク</a></p>
<p class="u-tac"><a class="c-btn" href="">サイト内ボタンリンク（中央寄せ）</a></p>
<p class="u-tar"><a class="c-btn" href="">サイト内ボタンリンク（右寄せ）</a></p>リスト
- 箇条書きリスト
- 箇条書きリスト
- 箇条書きリスト
<ul class="c-list">
<li class="c-item">箇条書きリスト</li>
<li class="c-item">箇条書きリスト</li>
<li class="c-item">箇条書きリスト</li>
</ul>画像、動画
写真キャプション
写真サイズ小、写真キャプション（中央揃え）
<div class="c-block"><img class="c-round" src="/wp-content/themes/akachan-engumi/assets/images/sample/sample_img_01.jpg" alt=""></div>
<div class="c-block"><img class="c-round" src="/wp-content/themes/akachan-engumi/assets/images/sample/sample_img_01.jpg" alt="">
<p class="c-annotation">写真キャプション</p>
</div>
<div class="c-container -small">
<div class="c-block"><img class="c-round" src="/wp-content/themes/akachan-engumi/assets/images/sample/sample_img_01.jpg" alt="">
<p class="c-annotation u-tac">写真サイズ小、写真キャプション（中央揃え）</p>
</div>
</div>動画キャプション（中央揃え）
<div class="c-block">
<div class="c-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/9Bp6Aath85E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<p class="c-annotation u-tac">動画キャプション（中央揃え）</p>
</div>分割レイアウト（画像＋テキスト）
見出し
ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。
<section class="c-floatbox"><img class="c-round" src="/wp-content/themes/akachan-engumi/assets/images/sample/sample_img_02.jpg" alt="">
<h3 class="c-heading -medium">見出し</h3>
<p>ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。</p>
</section>左右反転
ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。
<section class="c-floatbox -reverse"><img class="c-round" src="/wp-content/themes/akachan-engumi/assets/images/sample/sample_img_02.jpg" alt="">
<h3 class="c-heading -small">左右反転</h3>
<p>ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。</p>
</section>画像小さめ
ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。
<section class="c-floatbox -small"><img class="c-round" src="/wp-content/themes/akachan-engumi/assets/images/sample/sample_img_02.jpg" alt="">
<h3 class="c-heading -small">画像小さめ</h3>
<p>ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。</p>
</section>左右反転、画像小さめ
ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。
<section class="c-floatbox -small -reverse"><img class="c-round" src="/wp-content/themes/akachan-engumi/assets/images/sample/sample_img_02.jpg" alt="">
<h3 class="c-heading -small">左右反転、画像小さめ</h3>
<p>ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。</p>
</section>その他
区切り線
<hr class="c-hr">コラム
ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。
<div class="c-column">
<p>ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。</p>
<p class="u-mt-small"><a class="c-link" href="">リンク先</a></p>
</div>インタビュー
発言者Aダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。
発言者Bダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。
<p><span class="c-interviewee -blue">発言者A</span>ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。</p>
<p><span class="c-interviewee -pink">発言者B</span>ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。</p>汎用クラス
テキスト要素 整列
- .u-tac（中央揃え）
- .u-tar（右揃え）
余白調整
- .u-mt-0（余白削除）
- .u-mt（余白付与）
- .u-mt-small（ちょっとだけ余白付与）
viewport毎の表示調整
- .u-hidden-sm（768px未満で非表示）
- .u-hidden-md（768px以上、1024px未満で非表示）
- .u-hidden-lg（1024px以上で非表示）
一括指定する「.u-hidden-up-**」「.u-hidden-down-**」もあり
アンカー位置調整
- .c-adjustanchor（ページ内アンカーでヘッダーが本文に被ることを防ぐ）