プラグイン

haikで使える色々なプラグイン

scrollup

scrollup

ウィンドウの右下にトップに移動する上矢印を表示します。
使い方(標準)

#scrollup
#scrollup


アクセスカウンターの設置

アップロダーFFFTPで「counter.inc.php」を 「haik」サイトにアップロード。

1, QHMで作ったサイトをFTPソフトで開きます。

pluginフォルダの中に「counter.inc.php」があるので

デスクトップ上(任意の場所)にダウンロードします。

2, 次にhaikを開き、haik-contents→pluginフォルダを開き

その中に「counter.inc.php」をアップロードします。

アップロードが完了したらFFFTPは閉じる。

3, 次にhaikで作成したサイトに下記おまじないを記入(コピペ)。

&deco(gray,12){a:4295 t:&counter(today); y:&counter(yesterday);};

注:(コピペの場合「&」は半角に修正してください)

フッターに設置すれば全てのページに反映されますのでお勧めです。

おまじないの前にRIGHT:と記載すればフッターの右下に設置。


テーブル(表)の作成

見出しここに内容を書く
見出しここに内容を書く
見出しここに内容を書く
見出しここに内容を書く

      ↓
|STYLE:class=table table-bordered|
|~見出し|ここに内容を書く|
|~見出し|ここに内容を書く|
|~見出し|ここに内容を書く|
|~見出し|ここに内容を書く|


テーブル(ストライプ)

見出しここに内容を書く
見出しここに内容を書く
見出しここに内容を書く
見出しここに内容を書く

      ↓
|STYLE:class=table table-striped|
|~見出し|ここに内容を書く|
|~見出し|ここに内容を書く|
|~見出し|ここに内容を書く|
|~見出し|ここに内容を書く|


アコーディオンのおまじないと書き方

アコーディオンのおまじないは以下です。

メニュー1の内容

メニュー2の内容

メニュー3の内容

メニュー4の内容

↓↓
#accordion{{
ー  メニュー1
ー メニュー2
ー  メニュー3
ー メニュー4
====
メニュー1の内容
====
メニュー2の内容
====
メニュー3の内容
====
メニュー4の内容
}}

メニュー名を「-」を先頭に入れて順番に箇条書きにします。
表示したいメニューを全て書き終わったら「====」で区切りを入れます。
この「====」以降は、各メニューの内容を入れていきます。

内容の部分では「====」を入れると、次のメニューの内容に移るので、
箇条書きしたメニューの分、「====」を入れて内容を書いていきます。


※アコーディオンのメニュー名にリンクを入れるとリンクとしてのみ機能する

メニュー名は文字装飾などで装飾が可能です。

また、リンクも挿入することができますが、
その場合アコーディオン機能は無視されて、通常のリンクになります。

メニュー2の内容

#accordion{{
- メニュー1(トップページへリンク)
- メニュー2
====
メニュー1の内容
====
メニュー2の内容
}}


#accordionのオプション

「#accordion」で指定できるオプションは以下です。

#accordion(最初に開いておくメニュー,デザイン){{
ーメニュー1
ーメニュー2
====
メニュー1の内容
====
メニュー2の内容
}}

メニュー1の内容

メニュー2の内容

()の中がオプションです。複数入れる際は「,」で区切ります。
指定できるオプションは2つですが、いくつか種類があります。順不同、省略も可能です。

以下、各オプションの簡単な説明。


最初に開いておくメニュー(数字)

ページを開いた時、最初から開いておくメニューを数字(順番)で指定します。
省略時、もしくは「0」と指定すると一つも開いてない状態になります。

#accordion(2){{
ーメニュー1
ーメニュー2
====
メニュー1の内容
====
メニュー2の内容
}}

メニュー1の内容

メニュー2の内容


デザイン(色指定)

アコーディオンのデザインを指定します。

デザインは枠(panel)の色と同じ指定で変更できます。
無指定の場合は「well」と同じになるようです

以下におまじないと全デザインを書いておきます。


#accordion(danger){{
ーメニュー1
ー メニュー2
====
メニュー1の内容
====
メニュー2の内容
}}

メニュー1の内容

メニュー2の内容


#accordion(success){{
ーメニュー1
ー メニュー2
====
メニュー1の内容
====
メニュー2の内容
}}

メニュー1の内容

メニュー2の内容


#accordion(info){{
ー メニュー1
ーメニュー2
====
メニュー1の内容
====
メニュー2の内容
}}

メニュー1の内容

メニュー2の内容


#accordion(theme){{
ー メニュー1
ーメニュー2
====
メニュー1の内容
====
メニュー2の内容
}}

メニュー1の内容

メニュー2の内容


#accordion(warning){{
ーメニュー1
ーメニュー2
====
メニュー1の内容
====
メニュー2の内容
}}

メニュー1の内容

メニュー2の内容


#accordion(primary){{
ーメニュー1
ー メニュー2
====
メニュー1の内容
====
メニュー2の内容
}}

メニュー1の内容

メニュー2の内容


タブボックス

タブボックスのおまじないの書式

おまじないは以下です。
#tabs(){{
- タブ1
- タブ2
====
タブ1の内容
====
タブ2の内容
}}

 ↓ ↓

タブ1の内容

タブ2の内容


「#tabs」のオプション

「#tabs」で使えるオプションです。
#tabs(最初に開いておくタブ,タブを幅いっぱいに表示){{
- タブ1
- タブ2
====
タブ1の内容
====
タブ2の内容
}}

  ↓ ↓

タブ1の内容

タブ2の内容


「#tabs」の後に()を付けて、中にオプションを入れていきます。省略は可能ですが、順不同です。

最初に開いておくタブ(数字)

数字を記述すると、ページを表示した際に最初に開いておくタブを指定できます。

  • タブ1
  • タブ2


タブを幅いっぱいに表示(justify)

「justify」と記述すると、タブの数に関係なく、タブの部分が幅いっぱいに表示されます。各タブの幅は均等になります。

  • タブ1の文章
  • タブ2の文章

ボックス

  1. 「alert」(boxの色の指定が出来る。)
    #box(alert,danger) (色の指定)
    #box(alert,success),#box(alert,info),#box(alert,theme),#box(alert,warning)
    (色無指定)⇒warningに
  2. 「panel」(枠のみ色が付くタイプ)
    タイプ「panel」(枠のみ色が付くタイプ)
    #box(panel,primary),#box(panel,danger),#box(panel,success),#box(panel,info),#box(panel,warning)
    #box(panel) (色無指定)
  3. #panel(primary)ヘッダー付きの枠
  4. #thumbnails(枠有り・ 画像有り)
  5. #thumbnails(枠有り・ 画像なし)

編集ツールで枠を作成する。

編集ツールの「>>」⇒「レイアウト」⇒「枠」をクリック
枠のサイズ・枠の種類・スクロール有り無しを選択・入力して「挿入」

枠のおまじないで種類の異なる枠を作成。

枠のおまじないの書き方とオプション

括弧()内はオプション
#box(枠の幅+左側空白,枠の種類,枠の色,閉じるボタン,スクロール有無(height=●●px)){{
ココに文章。ココに文章。
}}

オプションに記載なしの場合

#box(){{
ココに文章。ココに文章。
}}

     ↓ ↓

ココに文章。ココに文章。


枠の幅+左側空白                   

#box(4+5){{ここに文章。ここに文章。             
}}

#box(4+0){{
ここに文章。ここに文章。
}}

    ↓ ↓                     ↓ ↓

ここに文章。ここに文章。

ここに文章。ここに文章。

スクロール有り

#box(height=80px){{
スクロール有り。スクロール有り。スクロール有り。スクロール有り。
スクロール有り。スクロール有り。
スクロール有り。
}}

 ↓ ↓

スクロール有り。スクロール有り。スクロール有り。スクロール有り。
スクロール有り。スクロール有り。
スクロール有り。


ボックス「alert」(色のみ指定するとこれになる。)

 #box(alert,danger)

ここに文章。ここに文章。ここに文章。

 #box(alert,success)

ここに文章。ここに文章。ここに文章。

 #box(alert,info)

ここに文章。ここに文章。ここに文章。


#box(alert,theme) (使用している「カラー」により異なる)

ここに文章。ここに文章。

#box(4+0,alert,theme)

ここに文章。ここに文章。

#box(alert,warning)

ここに文章。ここに文章。ここに文章。

#box(alert) (色無指定)⇒warningに

ここに文章。ここに文章。ここに文章。

ボックス「panel」(枠のみ色が付くタイプ)

#box(panel,danger)

ここに文章。ここに文章。ここに文章。ここに文章。

#box(panel,success)

ここに文章。ここに文章。ここに文章。ここに文章。

#box(panel,info)

ここに文章。ここに文章。ここに文章。ここに文章。

#box(panel,warning)

ここに文章。ここに文章。ここに文章。ここに文章。

#box(panel,primary)

ここに文章。ここに文章。ここに文章。ここに文章。

#box(panel) (色無指定)

ここに文章。ここに文章。ここに文章。ここに文章。

ボックス「well」(グレーの枠+背景。サイズを3種類選べる。)

#box(well) 「panel」や「alert」より枠が少し大きめ。

ここに文章。ここに文章。ここに文章。ここに文章。

#box(sm) well+small。他と比べ枠が小さい。※smallでも可

ここに文章。ここに文章。ここに文章。ここに文章。

#box(lg) well+large。他と比べ枠が大きい。※largeでも可。

ここに文章。ここに文章。ここに文章。ここに文章。

ボックス「jumbotron」「hero」「hero-unit」(枠なし四角グレー背景+サイズ大+太字)

#box(jumbotron) ※「hero」「hero-unit」も同じ。

ここに文章。ここに文章。ここに文章。ここに文章。

パネル

使い方1
見出しがある枠を表示します。====は見出しと内容の区切り線です。

 #panel{{
 * 見出し
 ====

 内容

 }}

     ↓ 

見出し

内容

使い方2
見出しとフッターがある枠を表示します。

#panel{{
* 見出し
====

内容

====
フッター
}}

   ↓

見出し

内容

使い方3

見出しは無く、フッターがある枠を表示します。

 #panel(notitle){{

 内容

 ====
 フッター
 }}

枠や見出しの色を変える
色タイプは下記の表を参照してください

 ↓

内容

色タイプ

名前説明
primary青い枠を表示します
info水色の枠を表示します
success緑色の枠を表示します
warning黄色の枠を表示します
danger赤色の枠を表示します

ヘッダー付きの枠

タイトル

#panel(primary){{
タイトル
 ====
色の種類 #panel(default),#panel(success),#panel(danger),
  #panel(info),#panel(theme),#panel(warning),#panel(primary)
 }}


ヘッダー付きの枠theme

文章。

ヘッダー付きの枠 danger

文章。

ヘッダー付きの枠 warning

文章。

ヘッダー付きの枠 success

文章。


#thumbnails (枠付き・オプションとしては枠幅の指定が可能)

#thumbnails 枠有り 各枠の幅の指定が無ければ均等

#thumbnails(各枠の幅の指定が無ければ均等)

#thumbnails{{
 画像
**見出し
ここに文章を書く。
====
  画像
 **見出し2
  ここに文章を書く。
  ====
  画像
 **見出し3
ここに文章を書く。
====
}}

   ↓  ↓

tukurimori.jpg

造り盛り合わせ

宣伝文句・価格

kisutukuri.jpg

キスの造り

宣伝文句・価格

f209848c.jpg

造り盛り合わせ-2

宣伝文句・価格


#thumbnails 枠有り 各枠の幅の指定あり

#thumbnails(枠有り・ 画像なし・枠幅指定)

#thumbnails(3,3,6){{
 **見出し
  ここに文章を書く。
   ====
 **見出し2
  ここに文章を書く。
   ====
 **見出し3
  ここに文章を書く。
   ====
}}

        ↓↓

見出し

ここに文章を書く。

見出し2

ここに文章2を書く。

見出し3

ここに文章3を書く。

「#thumbnails{{ }}」で上下を囲み、その中に内容を記述。
間に「====」と記述すると列が分けられ、各列には自動で枠が表示されます。
各列の幅は指定が無ければ均等になります。(最大で12列)
オプションで各列の幅を指定することも可能です。

ココに一列目の文章。

ココに二列目の文章。

ココに三列目の文章。

#cols(枠なし)詳しくはパーツのページに記載

tukurimori

見出し

本文

kisutukuri

見出し

本文

tukurimori (2)

見出し

本文