サンプルページ

H2TitleH2タイトル

h2.h2_ttl

強調用見出し .lead

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

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

h4テキスト .h4_ttl

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

h5テキスト .h5_ttl

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

H2Title診療時間

診療時間
9:30~13:45
15:30~18:15
休診日
土曜、日曜、祝日
装具作成・調整
毎週木曜日 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
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  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

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

H2TitleWell

通常well .well

タイトル .well_ttl

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

赤well .well_red

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

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

シンプルwell .well_g

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

H2Titleボタン

ふつうのボタン

ボタン .btn.btn-original

PDF

ボタン .btn.btn-pdf

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

ページ内リンク

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

  1. タイトル .flow_ttl

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

  2. タイトル .flow_ttl

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

  3. タイトル .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スライドショー

  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>
  • 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)…アイコンを円で囲みたいときなど