QHM-haik #main_visual・#logo_imageを使用した場合は?
haik_kinaco サンプル表示
#main_visualのみ表示
以下は#bs_box(alert,danger)を使用しています。
デザインの表示種類
QHMでは、デザイン表示の際に、
といった、「おまじない」で画像表示することが可能です。
このサイトでは、QHMの標準デザインを下記4パターンでサンプル表示します。
- #main_visual・#logo_image 共に表示しない
- #main_visual のみ表示
- #logo_image のみ表示
- #main_visual・#logo_image 両方表示
表示させる画像は全デザイン共通で、
- #main_visual 横750px・縦200px

- #logo_image 横750px・縦200px

としました。
以下は#bs_box(alert,success)を使用しています。
このページのデザインの表示方法
- 各サンプルページの表示は各サンプルサイトに移動して表示します。
- アイキャッチ(スライドショー)機能 #eyecatch(fit) #bs_carousel を使用しています。
使用画像サイズは、横1600px 縦400pxです。
- 各命令文の順序は下記の通りです。
- #include_skin (各サンプルページ共通)
- #eyecatch(fit) #bs_carousel (各サンプルページ共通)
- #logo_image (パターン3・パターン4)
- #main_visual (パターン2・パターン4)
- コンテンツ表示部分は、全て共通で同じ命令文を記述しています。
既存QHM標準デザインと全く同じものを使用し、QHM-haik専用のものは未使用です。
サイト全体共通
- ナビ部分
QHM-haikのプルダウン機能を使用するために #bs_nav を使用しています。
それに伴い階層化しています。
- メニュー部分
既存のQHMではメニュー部分の記述は「*」を使用することが奨励されていましたが、QHM-haikでは「-」を使用するようになっていたので、「*」を「-」に変更しました。
また、3カラム用にメニュー2も設定してあります。
デザインの表示方法
QHM-haikでは、以下の4種類のレイアウトが用意されています。
- トップページ用レイアウト(default)
- コンテンツ用レイアウト(content)
- ブログ用レイアウト(article)
- フルページレイアウト(fullpage)2014年7月15日機能追加
各ページに#layout(default)などのように「おまじない」を書くと、
任意のレイアウトを適用することができます。
例えば、
トップページにメニュー付きレイアウトを適用したければ、
といった具合です。
なお、
トップページ(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_kinaco デザインサンプル
haik_kinaco
#main_visual・#logo_image を使用した場合
QHMとは
Quick Homepage Maker (QHM)は、ホームページ上でホームページを編集し、直感的で、簡単、素早く、きれいに仕上げることができます。
使い方は、会員サイトなどをご覧下さい。
無料体験は下記バナーをクリック
(各書式の表示サンプルです)
見出し
大見出し 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
中見出し 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
日付
日付 &date;
date?
時刻 &time;
time?
日時 &now;
- 日時 2004-08-16 (月) 07:30:27
now?
リンク
URLやメールアドレスは自動的にリンクになります
その他の文字装飾
整形済みテキスト整形済みテキスト整形済みテキスト
整形済みテキスト整形済みテキスト整形済みテキスト
色の変更も可能なルール(COLOR(#993333))
サイズの変更も可能なルール(SIZE(10))
両方指定(SIZE(20)COLOR(#333399))
打ち消し線
左寄せ
![[heart]](image/face/heart.png)