QHM-haik #main_visual・#logo_imageを使用した場合は？

haik_kinaco サンプル表示
#main_visualのみ表示

[check]以下は#bs_box(alert,danger)を使用しています。

デザインの表示種類

QHMでは、デザイン表示の際に、

  • #main_visual
  • #logo_image

といった、「おまじない」で画像表示することが可能です。

このサイトでは、QHMの標準デザインを下記4パターンでサンプル表示します。

  1. #main_visual・#logo_image 共に表示しない
  2. #main_visual のみ表示
  3. #logo_image のみ表示
  4. #main_visual・#logo_image 両方表示

表示させる画像は全デザイン共通で、

  • #main_visual 横750px・縦200px
    #main_visual 横750px・縦200px
  • #logo_image 横750px・縦200px
    #logo_image 横750px・縦200px

としました。

[check]以下は#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)などのように「おまじない」を書くと、
任意のレイアウトを適用することができます。

例えば、
トップページにメニュー付きレイアウトを適用したければ、

  • #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_kinaco デザインサンプル


↑ページのトップへ　|　TopPage　|　前の画面に戻る


QHMとは

Quick Homepage Maker (QHM)は、ホームページ上でホームページを編集し、直感的で、簡単、素早く、きれいに仕上げることができます。

使い方は、会員サイトなどをご覧下さい。

無料体験は下記バナーをクリック

簡単ホームページ作成Quick Homepage Maker



(各書式の表示サンプルです)


表組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が各種画像ファイルであればそのまま表示します
    • http://www.nfc-jp.net/swfu/d/nfc_logo_name_w300.jpg

その他の文字装飾 

整形済みテキスト整形済みテキスト整形済みテキスト
整形済みテキスト整形済みテキスト整形済みテキスト

色の変更も可能なルール(COLOR(#993333))

サイズの変更も可能なルール(SIZE(10))

両方指定(SIZE(20)COLOR(#333399))

打ち消し線

左寄せ

中寄せ

右寄せ

[smile] [bigsmile] [huh] [oh] [wink] [sad] [worried] [heart]