サンプルページ

H2TitleH2タイトル

h2.h2_ttl

強調用見出し .lead

h3テキスト .h3_ttl
テストテスト

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

h4テキスト .h4_ttl

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

h5テキスト .h5_ttl

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

H2Title診療時間

診療時間	月	火	水	木	金	土
9:30～13:45	●	●	●	●	●※	／
15:30～18:15	●	●	●	●	●※	／

金曜日は9:30〜12:30 | 院長／14:00〜18:15 | 勝山医師（整形外科専門医/慶應義塾大学）となります。

当院の医師は全員、日本整形外科学会認定整形外科専門医です。

受付時間は、担当医師の手術予定によって変更となる場合がございますので、
必ず以下の担当医、診療時間表でご確認ください。
当院の診察は予約制ではありません。お気軽に受診ください。

10月の担当医・診察時間表

11月の担当医・診察時間表

・宇佐見医師
（整形外科専門医｜日本靴医学会名誉会員｜日本足の外科学会名誉会員）
・平石医師
（整形外科専門医｜日本靴医学会評議員｜日本足の外科学会評議員｜日本足の外科学会認定足の外科認定医）
・池澤医師
（整形外科専門医｜日本靴医学会評議員｜日本足の外科学会評議員｜日本足の外科学会認定足の外科認定医）

休診日: 土曜、日曜、祝日
装具作成・調整: 毎週木曜日 11:30〜12:30に受付をお願いします。

リハビリテーションは予約優先です。
当院では、院内でのマスク着用を必須とさせていただいております。

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

H2Title画像

h3タイトル

h4タイトル
h4タイトル

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

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

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

スタイル不要の場合　.img_none

リスト ul/ol

リスト .list-disc
リストリスト
リストリスト
文字サイズ大きめ

リスト .list-check
リストリスト
リストリスト

リスト .list-none
リストリスト
リストリスト

リスト .list-inline
リストリスト
リストリスト
リストリスト
リストリスト
リストリスト
リストリスト
リストリスト
リストリスト
リストリスト

リスト .list-disc.d_flexw
リストリスト
リストリスト
リストリスト
リストリスト
リストリスト
リストリスト
リストリスト
リストリスト
リストリスト

ナンバーリスト olクラスなし
ナンバーリスト
ナンバーリスト

こめリスト .kome
こめリスト
こめリスト

数字付きこめリスト ol.kome
こめリスト
こめリスト

リスト/dl

定義リスト dl.dl-border

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

経歴リスト dl.biography

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

dl

dl_p5～50

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

縦配置.dl_column

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

H2TitleWell

通常well　.well

タイトル　.well_ttl

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

赤well　.well_red

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

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

シンプルwell　.well_g

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

H2Titleボタン

ふつうのボタン

ボタン .btn.btn-original

外部リンク

ボタン .btn（target=_blank）

PDF

ボタン .btn.btn-pdf

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

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

ボタン .btn.af_none

色違い

.btn-sub

アウトライン

アウトライン a.btn.btn-outline

ブロックa.btn..btn-original.btn-block

ページ内リンク

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

H2Titleテーブル

header	header	header
data	data	data
data	data	data
data	data	data

線ありテーブル .table_line

header	header	header
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

H2Title色

.fc_b

.fc_s

.fc_a1

.fc_a2

.fc_a3

H2Titleフロー

ul.flow

タイトル　.flow_ttl
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
タイトル　.flow_ttl
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
タイトル　.flow_ttl
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

数字フロー　ol.flow

タイトル　.flow_ttl
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
タイトル　.flow_ttl
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
タイトル　.flow_ttl
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

Q&A　dl.q_and_a

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

H2Titleラベル

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

H2Title投稿関連

ページナビ確認用

H2Titleその他

アコーディオン

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

ページ内リンク

ページ内リンクの一覧に表示したくない時…クラス「hide_linkname」を追加
見出しとページ内リンクの名前が違う時…h2タグに「data-linkname="xxxx"」
自動で出力されるページ内リンクのスクロール位置を変えたいとき…btn.scss内にある span[id^="sec_"] のtopの数値を変更する
PC時、特定の場所で改行したい時…クラス「indention」を追加（div.spacerが挿入されます）

Youtube

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

パーツ用ショートコード

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

MVスライドショー

assets.phpのslick（js、css）を読み込む
config.jsの「メインイメージスライドショー」の項目を有効化
style.scssのslick.scssを解除
以下を挿入（参考）

<ul class="mainimage_slider">
              <li class="slider_item item01"></li>
              <li class="slider_item item02"></li>
              <li class="slider_item item03"></li>
            </ul>

layout.scss内のmainimageの指定も調整してください
参考サイト

アイコン

軽量化のため、使わなさそうなアイコンはコメントアウトしてます。必要なときは「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）…アイコンを円で囲みたいときなど

H2TitleH2タイトル

h2.h2_ttl

h3テキスト .h3_ttlテストテスト

h4テキスト .h4_ttl

h5テキスト .h5_ttl

H2Title診療時間

10月の担当医・診察時間表

11月の担当医・診察時間表

H2Title画像

h3タイトル

h4タイトルh4タイトル

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

リスト ul/ol

リスト/dl

定義リスト dl.dl-border

経歴リスト dl.biography

dl

dl_p5～50

縦配置.dl_column

H2TitleWell

通常well .well

赤well .well_red

シンプルwell .well_g

H2Titleボタン

ふつうのボタン

外部リンク

PDF

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

色違い

アウトライン

ページ内リンク

H2Titleテーブル

線ありテーブル .table_line

.table-responsive

H2Title色

H2Titleフロー

ul.flow

数字フロー ol.flow

Q&A dl.q_and_a

H2Titleラベル

H2Title投稿関連

ページナビ確認用

H2Titleその他

アコーディオン

ページ内リンク

Youtube

パーツ用ショートコード

MVスライドショー

アイコン

h3テキスト .h3_ttl
テストテスト

h4タイトル
h4タイトル

通常well　.well

赤well　.well_red

シンプルwell　.well_g

数字フロー　ol.flow

Q&A　dl.q_and_a