①3ヶ月程度の賃料滞納が発生するまで待つ
数週間
STEP
タイトル
本文
STEP
タイトル
本文
STEP
タイトル
本文

ステップバー枠外はここに移動

STEP
タイトル
本文

ここに追加する

グリッドレイアウトについて

コンテンツセクションの区分け、段組み、幅やマージンの設定を、”wrapper” “row” “column” の3つのショートコードを使用して行います。

  • “wrapper”は、セクションの縦方向のスペーシングとブロックの背景色等を設定します。
  • “row”は、横幅の規定と「段組ブロック」の区切りとして使用します。”row”が閉じられる、次に始まる”row”は、いったん段組みが解除され、新たな段組みとして表示されます。
  • “column”は、「段組みブロック」の中の「段」の横幅を規定します。”row”の横幅に収まる “column”は、横方向に隣り合って配置されます。
[wrapper]
[row]
[column class="w-1-2"]コンテンツ[/column]
[column class="w-1-2"]コンテンツ[/column]
[/row]
[/wrapper]

wrapper

[wrapper id="" class="bg-gray less-spacing"][/wrapper]

主に全幅(サイドバー無)テンプレートで使用します。

  • id=””:id属性をもたせることで、ページ内部のアンカーポイントとなり、リンクの行き先として機能します。リンク先のurlの記述では通常のURLの後に、「”#” + “id属性”(#id-name)」を追加して適用します。同一ページ内での移動は、「# + “id属性”」のみでページ内リンクが機能します
  • class=”less-spacing”:通常のブロック内の余白(縦方向)を通常より少なく取ります。
  • class=”bg-white bg-gray bg-green bg-beige”:ブロックの背景色を規定するclass。

row

[row class="w-95 less-spacing"][/row]
  • id=””:id属性をもたせることで、ページ内のアンカーポイントンクとなり、リンクの行き先として機能します。
  • class=”w-95″:主に全幅(サイドバー無)テンプレートで、横幅をせばめて表示したいときに、”w-95″ 〜 “w-5″(wide 95% 〜 wide 5%)のclassを使用します。5%から95%まで、5%刻みのclassが規定されています。(w-5 / w-10 / w-15 / w-20 / w-25 / w-30 / w-35 / w-40 / w-45 / w-50 / w-55 / w-60 / w-65 / w-70 / w-75 / w-80 / w-85 / w-90 / w-95 )
  • class=”less-spacing”:”row”(行) 内に配置された “column”(列)の隙間を通常より少ないサイズにします。
row 上に点線入る

column

[column class="w-5-12"][/column]
[column class="w-7-12"][/column]
  • id=””:id属性をもたせることで、ページ内のアンカーポイントンクとなり、リンクの行き先として機能します。
  • class=”w-6-12″:”column”の横幅を規定します。1〜12を分母とした、整数値の分子による横幅classが規定済みです。

段組の見本

1:1の比率(50%:50%)

w-1-2
w-1-2

5:6の比率(45.45%:54.54%)

w-5-11
w-6-11

4:5の比率(44.44%:55.55%)

w-4-9
w-5-9

3:4の比率(42.85%:57.14%)

w-3-7
w-4-7

5:7の比率(41.66%:58.33%)

w-5-12
w-7-12

2:3の比率(40%:60%)

w-2-5
w-3-5

4:7の比率(36.36%:63.63%)

w-4-11
w-7-11

1:2の比率(33.33%:66.66%)

w-1-3
w-2-3

3:7の比率(30%:70%)

w-3-10
w-7-10

3:8の比率(27.27%:72.72%)

w-3-11
w-8-11

1:3の比率(25%:75%)

w-1-4
w-3-4

1:4の比率(20%:80%)

w-1-4
w-4-5

3等分

w-1-3
w-1-3
w-1-3

4等分

w-1-4
w-1-4
w-1-4
w-1-4

mat

囲いのあるハイライトブロックを生成します。

記載方法

[mat class="bordered"]
コンテンツ〜
[/mat]

実際の表示

コンテンツ〜(class=”bordered”)

コンテンツ〜(class=”bg-white”)

コンテンツ〜(class=”bg-gray”)

利用可能なclass

  • bordered
  • bg-gray
  • bg-white