サンプル Sample

Headline見出し

強調用見出し .lead

h3テキスト .h3_ttl

ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

h4テキスト .h4_ttl

ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

h5テキスト .h5_ttl

ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

Timetable診療時間

診療時間 月 火 水 木 金 土
9:00～13:00 ○ ○ ○ ○ ○ ○
14:30～18:00 ○ ○ ／ ○ ○ ／
  • 午前・午後ともに30分前に受付終了

【休診日】水曜午後・土曜午後・日曜・祝日

時間を揃えたいときは0を「span.invisible」で囲う

Image画像

h3タイトル

h4タイトル

ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

画像にスタイルのある場合

クラスなしでスタイル付与

キャプション

スタイル不要の場合　.img_none

ul/ol
リスト

  • リスト .list-disc
  • リストリスト
  • リストリスト
  • 文字サイズ大きめ
  • リスト .list-check
  • リストリスト
  • リストリスト
  • リスト .list-none
  • リストリスト
  • リストリスト
  • リスト .list-inline
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リスト .list-disc.d_flexw
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  1. ナンバーリスト olクラスなし
  2. ナンバーリスト
  3. ナンバーリスト
  • こめリスト .kome
  • こめリスト
  • こめリスト
  1. 数字付きこめリスト ol.kome
  2. こめリスト
  3. こめリスト

dlリスト

定義リスト dl.dl-border

定義リスト
定義リストが入ります定義リストが入ります定義リストが入ります定義リストが入ります
定義リスト
定義リスト
定義リストが入ります定義リストが入ります定義リストが入ります定義リストが入ります
定義リスト
定義リストが入ります定義リストが入ります定義リストが入ります定義リストが入ります
定義リストが入ります定義リストが入ります定義リストが入ります定義リストが入ります

経歴リスト dl.biography

2000年
リストリストリストリストリストリスト
2000年
リストリストリストリストリストリスト
2000年
リストリストリストリストリストリスト

dl

dl_p5～50

症状：
症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります
経過：
経過が入ります経過が入ります経過が入ります経過が入ります経過が入ります経過が入ります経過が入ります

縦配置.dl_column

定義リスト
定義リストが入ります定義リストが入ります定義リストが入ります定義リストが入ります
定義リスト
定義リストが入ります定義リストが入ります定義リストが入ります定義リストが入ります
定義リスト
定義リストが入ります定義リストが入ります定義リストが入ります定義リストが入ります

Well囲み枠

通常well　.well

タイトル　.well_ttl

テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト

赤well　.well_red

タイトルタイトルタイトル

テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト

シンプルwell　.well_g

テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト

Buttons
ボタン

ふつうのボタン

ボタン .btn.btn-original

外部リンク

PDF

ボタン .btn.btn-pdf

拡張子がpdfの場合は自動で切り替わる or .btn-pdfをつけてもOK

疑似要素（&::after ）なし

ボタン .btn.af_none

色違い

.btn-sub

ベタ塗り

ベタ塗り a.btn.btn-solid
ブロックa.btn..btn-original.btn-block

ページ内リンク

ページ内リンク ページ内リンク ページ内リンク ページ内リンク

Table
テーブル

header header header
data data data
data data data
data data data
テーブルキャプション
header data data
data data data
data data data
data data data
テーブルキャプション
title data data
title data data
title data data
title data data

.table-responsive

この表はスワイプできます
header header header header header
長文長文長文長文長文長文長文長文長文長文長文長文長文長文 長文長文長文長文長文長文長文長文長文長文長文長文長文長文 data data data
data data data data data
data data data data data

Colors色

.fc_b

.fc_s

.fc_a1

.fc_a2

.fc_a3（未設定）

Flow フロー

ul.flow

  • タイトル　.flow_ttl

    ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

  • タイトル　.flow_ttl

    ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

  • タイトル　.flow_ttl

    ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

数字フロー　ol.flow

  1. タイトル　.flow_ttl

    ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

  2. タイトル　.flow_ttl

    ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

  3. タイトル　.flow_ttl

    ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

Q&A　dl.q_and_a

質問がはいります。質問がはいります。質問がはいります。質問がはいります。
回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります
質問がはいります。質問がはいります。質問がはいります。質問がはいります。
回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります
質問がはいります。質問がはいります。質問がはいります。質問がはいります。
回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります

Labelラベル

ラベル.labelラベル.label.label_sラベル.label.label_a1ラベル.label.label_a2ラベル.label.label_a3ラベル.label.label_default

Posts投稿関連

ページナビ確認用

Otherその他

アコーディオン

「.ac_wrap」で囲ってクラス「.ac_ttl、.ac_body」を追加

ページ内リンク

  • ページ内リンクの一覧に表示したくないとき…クラス「hide_linkname」を追加
  • 見出しとページ内リンクの名前が違う時…h2タグに「data-linkname="xxxx"」

Youtube

[youtube src=https://youtu.be/bjmBJ1Fl0cs"]

パーツ用ショートコード

フォルダ「page/parts」内のパーツを呼び出す時は【echo do_shortcode( '[parts type="xxxx"]' )】

MVスライドショー

  1. assets.phpのslick（js、css）を読み込む
  2. config.jsの「メインイメージスライドショー」の項目を有効化
  3. style.scssのslick.scssを解除
  4. 以下を挿入（参考）
<ul class="mainimage_slider">
              <li class="slider_item item01"></li>
              <li class="slider_item item02"></li>
              <li class="slider_item item03"></li>
            </ul>

アイコン

軽量化のため、使わなさそうなアイコンはコメントアウトしてます。必要なときは「sass/module/fontawesome.scss」からコメントを外してください。

アイコン参考

アイコンサイズ（fa-●●）…fa-xs,sm,lg,fa-2～fa-10 固定幅（fa-fw）…アイコンに固定幅をつけてテキストの開始位置を揃える
テキストテキスト
テキストテキスト
リスト（fa-ul、fa-li）…アイコンをabsolute配置
  • テキストが入ります
  • テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります
  • テキストが入ります
位置回転（fa-rotate-●●）

水平・垂直回転（fa-flip-●●）

回転アニメーション（fa-spin,fa-pulse）

アイコン合体（fa-stack）…アイコンを円で囲みたいときなど

INFORMATION.医院概略

TEL:050-3146-4293

〒 816-0849  福岡県春日市星見ヶ丘2丁目27

診療時間 月 火 水 木 金 土
9:00～13:00 ○ ○ ○ ○ ○ ○
14:30～18:00 ○ ○ ／ ○ ○ ／
  • 午前・午後ともに30分前に受付終了

【休診日】水曜午後・土曜午後・日曜・祝日

アクセス詳細
© 2021-2023  ばばトータルケアクリニック