デザインの種類
QHM-haikでは、以下の4種類のレイアウトが用意されています。
- トップページ用レイアウト(default)
- コンテンツ用レイアウト(content)
- ブログ用レイアウト(article)
- フルページレイアウト(fullpage)2014年7月15日機能追加
各ページに#layout(default)などのように「おまじない」を書くと、
任意のレイアウトを適用することができます。
例えば、
トップページにメニュー付きレイアウトを適用したければ、
- #layout(content)
といった具合です。
なお、
トップページ(FrontPage)には、自動的にdefaultが、
それ以外のページには、自動でcontentが、
ブログにはarticleが適用されるといった仕様になっています。
そこで、実際の表示はどうなるかを確認するために、このサイト及びページを作成いたしました。
デザインの表示方法
- アイキャッチ(スライドショー)機能 #eyecatch(fit) #bs_carousel を使用しています。
使用画像サイズは、横1600px 縦400pxです。 - 各命令文の順序は下記の通りです。
- #layout(該当の種類) (各サンプルページ共通)
- #eyecatch(fit) #bs_carousel (各サンプルページ共通)
- コンテンツ表示部分は、全て共通で同じ命令文を記述しています。
書式表示部分は、既存QHM標準デザインと全く同じものを使用し、QHM-haik専用のものは未使用です。
サイト全体共通
- ナビ部分
QHM-haikのプルダウン機能を使用するために #bs_nav を使用しています。
それに伴い階層化しています。 - メニュー部分
既存のQHMではメニュー部分の記述は「*」を使用することが奨励されていましたが、QHM-haikでは「-」を使用するようになっていたので、「*」を「-」に変更しました。
また、3カラム用にメニュー2も設定してあります。
haik_yonk デザインサンプル
haik_yonk
各サンプルページへクリック!
新レイアウト
メニューなし
#layout(nomenu)
サンプル表示
ワイド
#layout(wide)
サンプル表示
ランディング
#layout(landing)
サンプル表示
レイアウト別表示
トップページ用
#layout(default)
サンプル表示
コンテンツ用
#layout(content)
サンプル表示
ブログ用
#layout(article)
サンプル表示
フルページ用
#layout(fullpage)
サンプル表示
#main_visual・#logo_image を使用した場合
QHMとは
Quick Homepage Maker (QHM)は、ホームページ上でホームページを編集し、直感的で、簡単、素早く、きれいに仕上げることができます。
使い方は、会員サイトなどをご覧下さい。
無料体験は下記バナーをクリック
(各書式の表示サンプルです)
表組1 | 表組2 | 表組3 |
見出し
大見出し 1
中見出し 1-1
小見出し 1-1-1
- 項目1
- 項目2
- 項目3
段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1
段落1段落1段落1段落1段落1段落強調1段落1段落1段落1段落1段落1
段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2
中見出し 1-2
- 用語1
- いろいろ書いた解説文1と強調単語 *1
段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1
段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1 - 用語2
- いろいろ書いた解説文2 *2
- 用語3
- いろいろ書いた解説文3 *3
大見出し 2
小見出し 2-1
小見出し 2-2
段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1
段落1段落1段落1段落イタリック1段落1段落1段落1段落1段落1段落1段落1
段落1段落1段落1段落イタリックボールド1段落1段落1段落1段落1段落1
段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2
段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2
レベル0レベル0レベル0レベル0レベル0レベル0
レベル1
レベル1
レベル2
レベル2
レベル3
- はろ1
- はろ2
ろろろろ2
- はろ3
- はろ2
- はろ3
- はろ2
- はろ3
レベル3
レベル3
レベル3
日付
日付 &date;
- 日付 2004-08-16
date?
- 2004-08-16
時刻 &time;
- 時刻 07:29:03
time?
- 07:29:03
日時 &now;
- 日時 2004-08-16 (月) 07:30:27
now?
- 2004-08-16 (月) 07:29:03
リンク
URLやメールアドレスは自動的にリンクになります
- URL -- http://example.org/
- メールアドレス -- foo@example.org
- URLが各種画像ファイルであればそのまま表示します
その他の文字装飾
整形済みテキスト整形済みテキスト整形済みテキスト 整形済みテキスト整形済みテキスト整形済みテキスト
色の変更も可能なルール(COLOR(#993333))
サイズの変更も可能なルール(SIZE(10))
両方指定(SIZE(20)COLOR(#333399))
打ち消し線
左寄せ
中寄せ
右寄せ