(1) ページ毎にレイアウトを変更する

HAIKの標準デザインテーマ「HAIK Seed(haik_seed)」には、5種類のレイアウトが含まれています。
(1) 標準レイアウト、(2) ワイドレイアウト、(3) ノーメニューレイアウト、(4) フルページレイアウト、(5) ランディングページレイアウトの5種類を、ページ別に設定することができます。

下記のコードをレイアウトを適用したいページに記述すると、そのページのみレイアウトを変更できます。

#layout(設定したいレイアウト名)


*テクニカル Tips*オリジナルテーマの作り方
オリジナルテーマを制作すれば、レイアウトも自由に設定することができます。
(1) テーマフォルダ内に、複数のレイアウト(default.skin.phpなど)を作成し、意図したレイアウトをHTMLベースで作成する。
(2) CSSの定義で、そのレイアウト用の記述を行う。


(2) haik_seed のページ別レイアウト一覧

ここでは、標準テーマ「haik_seed」のレイアウトの種類と表示内容を解説します。

(1) 標準レイアウト:2カラム
 サイドメニューあり、横幅は最大値が固定

標準的なレイアウトで、基本的にはすべてのページに、このデフォルトレイアウトが適用されます。

  • 設定方法
    #layout(default)
    
    //あえて書かなくても、この設定が自動的に有効に。
  • 適用されるテンプレートファイル
    pukiwiki.skin.php
  • 適用されるCSS
    //main.cssによる定義
    .container {max-width: 1045px;}
    //bootstrap.min.css による定義
    .container {padding-right: 15px;padding-left: 15px;}
  • ウィンドウサイズ 767px以下の場合
    スマホ用の1カラムデザインが適用されます。
    横幅は、ウィンドウサイズに合わせて伸び縮みします。
  • ウィンドウサイズ 768px〜1045pxの場合
    PC用の2カラムデザインが適用されます。
    横幅は、ウィンドウサイズに合わせて伸び縮みします。
  • ウィンドウサイズ 1045px以上の場合
    PC用の2カラムデザインが適用されます。
    横幅は、1015px(padding-right,padding-left{15px}を差し引いた幅)に固定されます。

デフォルトレイアウト


(2) “ワイド”レイアウト:2カラム
 サイドメニューあり、横幅=ウィンドウサイズに合わせて伸び縮み

  • 設定方法
    #layout(wide)
  • 適用されるテンプレートファイル
    wide.skin.php
  • 適用されるCSS
    //main.cssによる定義
    .container.haik-fullpage-container {max-width: 100%;}
    //bootstrap.min.css による定義
    .container {padding-right: 15px;padding-left: 15px;}
  • ウィンドウサイズ 767px以下の場合
    スマホ用のデザイン(1カラム)が適用されます。
    横幅は、ウィンドウサイズに合わせて伸び縮みします。
  • ウィンドウサイズ 768px以上の場合
    PC用の2カラムデザイン(サイドバー表示)が適用されます。
    横幅は、ウィンドウサイズに合わせて伸び縮みします。

ワイドレイアウト


(3) “ノーメニュー”レイアウト:1カラム
 サイドメニューなし、横幅は最大値が固定

  • 設定方法
    #layout(nomenu)
  • 適用されるテンプレートファイル
    nomenu.skin.php
  • 適用されるCSS
    //main.cssによる定義
    .container {max-width: 1045px;}
    //bootstrap.min.css による定義
    .container {padding-right: 15px;padding-left: 15px;}
  • ウィンドウサイズ 767px以下の場合
    スマホ用の1カラムデザインが適用されます。
    横幅は、ウィンドウサイズに合わせて伸び縮みします。
  • ウィンドウサイズ 768px〜1045pxの場合
    PC用の1カラムデザインが適用されます。
    横幅は、ウィンドウサイズに合わせて伸び縮みします。
  • ウィンドウサイズ 1045px以上の場合
    PC用の1カラムデザインが適用されます。
    横幅は、1015px(padding-right,padding-left{15px}を差し引いた幅)に固定されます。

ノーメニューレイアウト


(4) “フルページ”レイアウト:1カラム
 サイドメニューなし、横幅=ウィンドウサイズに合わせて伸び縮み

  • 設定方法
    #layout(fullpage)
  • 適用されるテンプレートファイル
    fullpage.skin.php
  • 適用されるCSS
    //main.cssによる定義
    .container.haik-fullpage-container {max-width: 100%;}
    //bootstrap.min.css による定義
    .container {padding-right: 15px;padding-left: 15px;}
  • ウィンドウサイズ 767px以下の場合
    スマホ用のデザイン(1カラム)が適用されます。
    横幅は、ウィンドウサイズに合わせて伸び縮みします。
  • ウィンドウサイズ 768px以上の場合
    PC用の1カラムデザイン(サイドバーなし)が適用されます。
    横幅は、ウィンドウサイズに合わせて伸び縮みします。

*フルページレイアウトは、上級者向けの使い方として
1. #layout(fullpage) を指定して、
2. sectionプラグインで背景色または背景画像を指定し、
2. section内部の横幅を固定(指定)する
とすることで、パララックスデザインのページを作ることができます。

フルページレイアウト


(5) “ランディングページ”レイアウト:1カラム
 サイドメニューなし、ヘッダーなし、横幅は最大値が固定

  • 設定方法
    #layout(wide)
  • 適用されるテンプレートファイル
    wide.skin.php
  • 適用されるCSS
    //main.cssによる定義
    .container {max-width: 1045px;}
    //bootstrap.min.css による定義
    .container {padding-right: 15px;padding-left: 15px;}
  • ウィンドウサイズ 767px以下の場合
    ヘッダーエリア、サイドメニューが非表示となり、1カラムデザインが適用されます。横幅は、ウィンドウサイズに合わせて伸び縮みします。
  • ウィンドウサイズ 1045px以上の場合
    ヘッダーエリア、サイドメニューが非表示となり、1カラムデザインが適用されます。横幅は、1015px(padding-right,padding-left{15px}を差し引いた幅)に固定されます。

*ヘッダーエリアとは、キャッチコピー、ロゴ、グローバルナビのこと。

ランディングページレイアウト