コンポーネント集

通常テキスト

web表示

コラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキスト

Sample Code

<p class="_mb-s">
コラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキスト
</p>

※ pタグの中にテキストを記述します。

h◯（見出し）

※hタグはclassにcssがあたっているので、h2などに書き換えても問題ない

web表示

[h2] ダミーテキスト。大タイトルテキストが入ります。

Sample Code

<h2 class="section-ttl2 _mt-m">[h2] ダミーテキスト。大タイトルテキストが入ります。</h2>

h◯（見出し）

※hタグはclassにcssがあたっているので、h2などに書き換えても問題ない

web表示

[h3] ダミーテキスト。中タイトルテキストが入ります。

Sample Code

<h3 class="section-ttl3 _mt-m">[h3] ダミーテキスト。中タイトルテキストが入ります。</h3>

h◯（見出し）

※hタグはclassにcssがあたっているので、h2などに書き換えても問題ない

web表示

[h4] ダミーテキスト。小タイトルテキストが入ります。

Sample Code

<h4 class="section-ttl4 _mt-m">[h4] ダミーテキスト。小タイトルテキストが入ります。</h4>

リスト Type1

web表示

リスト
リスト
リスト

Sample Code

<ul class="hifuka_list">
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

※ liの先頭に●を自動付与

リスト Type2

web表示

ダミーテキスト。ダミーテキスト。
ダミーテキスト。ダミーテキスト。
ダミーテキスト。ダミーテキスト。

Sample Code

<ol class="hf_numberli _mt-s">
  <li>ダミーテキスト。ダミーテキスト。</li>
  <li>ダミーテキスト。ダミーテキスト。</li>
  <li>ダミーテキスト。ダミーテキスト。</li>
</ol>

※ liの数だけナンバリングを先頭に自動付与

画像埋込み

web表示

Sample Code

<figure class="_center img-wrap _mt-m">
  <img decoding="async" src="/hifuka/blog/wp-content/uploads/2025/07/noimage.png" alt="画像の説明を記載"><br>
</figure>

※ 画像掲載（中央寄せ）

画像のアップロードはWordPress管理画面のメディアから行います。

ボタン

web表示

ボタンのテキスト

Sample Code

<div class="btn _mt-m _center">
  <a href="リンク先のURLを記入" class="btn_single">ボタンのテキスト</a>
</div>

その他：少しだけ上に隙間を空けたい（margin）

web表示

上に少しだけ隙間を作る（極小）

上に少しだけ隙間を作る（小）

上に少しだけ隙間を作る（中）

上に少しだけ隙間を作る（大）

上に少しだけ隙間を作る（特大）

Sample Code

<div class="_mt-xs">
上に少しだけ隙間を作る（極小）
</div>
<div class="_mt-s">
上に少しだけ隙間を作る（小）
</div>
<div class="_mt-m">
上に少しだけ隙間を作る（中）
</div>
<div class="_mt-l">
上に少しだけ隙間を作る（大）
</div>
<div class="_mt-xl">
上に少しだけ隙間を作る（特大）
</div>

その他：少しだけ下に隙間を空けたい（margin）

web表示

下に少しだけ隙間を作る（極小）

下に少しだけ隙間を作る（小）

下に少しだけ隙間を作る（中）

下に少しだけ隙間を作る（大）

下に少しだけ隙間を作る（特大）

Sample Code

<div class="_mb-xs">
下に少しだけ隙間を作る（極小）
</div>
<div class="_mb-s">
下に少しだけ隙間を作る（小）
</div>
<div class="_mb-m">
下に少しだけ隙間を作る（中）
</div>
<div class="_mb-l">
下に少しだけ隙間を作る（大）
</div>
<div class="_mb-xl">
下に少しだけ隙間を作る（特大）
</div>

その他：少しだけ上に隙間を空けたい（padding）

web表示

上に少しだけ隙間を作る（極小）

上に少しだけ隙間を作る（小）

上に少しだけ隙間を作る（中）

上に少しだけ隙間を作る（大）

上に少しだけ隙間を作る（特大）

Sample Code

<div class="_pt-xs">
上に少しだけ隙間を作る（極小）
</div>
<div class="_pt-s">
上に少しだけ隙間を作る（小）
</div>
<div class="_pt-m">
上に少しだけ隙間を作る（中）
</div>
<div class="_pt-l">
上に少しだけ隙間を作る（大）
</div>
<div class="_pt-xl">
上に少しだけ隙間を作る（特大）
</div>

その他：少しだけ下に隙間を空けたい（padding）

web表示

下に少しだけ隙間を作る（極小）

下に少しだけ隙間を作る（小）

下に少しだけ隙間を作る（中）

下に少しだけ隙間を作る（大）

下に少しだけ隙間を作る（特大）

Sample Code

<div class="_pb-xs">
下に少しだけ隙間を作る（極小）
</div>
<div class="_pb-s">
下に少しだけ隙間を作る（小）
</div>
<div class="_pb-m">
下に少しだけ隙間を作る（中）
</div>
<div class="_pb-l">
下に少しだけ隙間を作る（大）
</div>
<div class="_pb-xl">
下に少しだけ隙間を作る（特大）
</div>

その他：コンテンツを左右or中央に寄せたい

※block要素のみ

web表示

左に寄せる

右に寄せる

中央に寄せる

Sample Code

<div class="_left">
左に寄せる
</div>
<div class="_right">
右に寄せる
</div>
<div class="_center">
中央に寄せる
</div>

その他：PCにだけ表示させたい

※文章中に入れる場合はspanなどを使用

web表示

PCにだけ表示される

Sample Code

<div class="_sp-none">
PCにだけ表示される
</div>

その他：スマホにだけ表示させたい

※文章中に入れる場合はspanなどを使用

web表示

スマホにだけ表示される

Sample Code

<div class="_pc-none">
スマホにだけ表示される
</div>

その他：テキストにアンダーラインを引きたい

※文章中に入れる場合はspanなどを使用

web表示

テキストにアンダーラインを引きたい

Sample Code

<span class="_text-underline">テキストにアンダーラインを引きたい</span>

その他：テキストを太字にしたい

※文章中に入れる場合はspanなどを使用

web表示

テキストを太字にしたい

Sample Code

<span class="_text-bold">テキストを太字にしたい</span>

その他：リスクを表示したい

リスクを追加したい箇所に[tag data-category="~~~~.../tag] のSample Codeを入れる。
※data-category=""のコードは施術によって異なりますので、必要に応じて書き換えをお願いいたします。施術コードを入力すると、ご希望の施術が表示されます。下記の皮膚科コード一覧よりご検索ください。（「Ctrl + F」または『Command + F』で検索バーが出ます）

皮膚科施術コード一覧はこちら

※最新の情報は総合管理画面カテゴリ管理の情報になります。

web表示

Sample Code

  <!-- 小カテゴリ -->
[tag data-category="1349" data-template="2"][/tag]
  <!-- 大カテゴリ -->
[tag data-category="20" data-template="2"][/tag]

その他：ポイント背景背景色

※文章中に入れる場合はspanなどを使用

web表示

ポイントエリアの背景色をつける
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

Sample Code

<div class="point_area">
ポイントエリアの背景色をつける<br>
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト<br>
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
</div>

その他：タイトルに下線を引きたい

文字に下線を引くにはタグに、style="border-bottom: 2px solid #e798ac;"と書くと下線が引かれる

web表示

タイトル下線

Sample Code

<h2 style="border-bottom: 2px solid #e798ac;">タイトル下線</h2>
<!-- #〇〇〇〇〇〇はカラーコードになりますので、お好きな色を指定して下さい。2pxの部分の数字を増やすと太くなります。 -->