QHM-haikデザインサンプル集
QHM-haik:V6.10beta PHP:7.0.10 使用
By 株式会社NFC

ようこそ!
QHM-haikデザインサンプル集 By 株式会社NFC

また、QHMの各書式をQHM-haik用に命令文をそのまま表示したらどう表示されるかも確認可能です。


QHMブログをQHM-haikで表示「QBlog」



[check]以下は#section(bgcolor=#1F3A93,color=#ffffff)を使用しています。

haik Paletteシリーズ サンプルページへ

[check]以下は#colsを使用しています。

2015-07-31追加デザイン

click

haik_tent

haik_tentのサンプルページは下をクリック
haik_tent
サンプルページ

click

haik_drawing

haik_drawingのサンプルページは下をクリック
haik_drawing
サンプルページ

click

haik_doc

haik_docのサンプルページは下をクリック
haik_doc
サンプルページ


2015-07-24追加デザイン

click

haik_cool

haik_popのサンプルページは下をクリック
haik_cool
サンプルページ

click

haik_fablic

haik_kinacoのサンプルページは下をクリック
haik_fablic
サンプルページ


2015-07-17追加デザイン

click

haik_pop

haik_popのサンプルページは下をクリック
haik_pop
サンプルページ

click

haik_kinaco

haik_kinacoのサンプルページは下をクリック
haik_kinaco
サンプルページ


2015-07-09追加デザイン

click

haik_flat

haik_flatのサンプルページは下をクリック
haik_flat
サンプルページ

click

haik_moi

haik_moiのサンプルページは下をクリック
haik_moi
サンプルページ

click

haik_bio

haik_bioのサンプルページは下をクリック
haik_bio
サンプルページ











[check]以下は#bs_boxを使用しています。

デザインの種類

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も設定してあります。



[check]以下は#section(bgcolor=#1F3A93,color=#ffffff)を使用しています。

haik Simpleシリーズ サンプルページへ
(haik初期リリースデザイン)

[check]以下は#colsを使用しています。

click

haik_ikk

haik_ikkのサンプルページは下をクリック
haik_ikk
サンプルページ

click

haik_nik

haik_nikのサンプルページは下をクリック
haik_nik
サンプルページ

click

haik_sank

haik_sankのササンプルページは下をクリック
haik_sank
サンプルページ


click

haik_yonk

haik_yonkのサンプルページは下をクリック
haik_yonk
サンプルページ

click

haik_gok

haik_gokのサンプルページは下をクリック
haik_gok
サンプルページ

click

haik_rokk

haik_rokkのサンプルページは下をクリック
haik_rokk
サンプルページ


click

haik_nanak

haik_nanakのサンプルページは下をクリック
haik_nanak
サンプルページ

click

haik_hakk

haik_hakkのサンプルページは下をクリック
haik_hakk
サンプルページ

click

haik_kyuk

haik_kyukのサンプルページは下をクリック
haik_kyuk
サンプルページ


click

haik_jikk

haik_jikkのサンプルページは下をクリック
haik_jikk
サンプルページ




haik初期リリースデザイン
#main_visual・#logo_imageを使用した場合とかは?

[check]以下は#bs_accordion(primary)を使用しています。



QHMとは

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

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

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

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



公式Website

このRSSは横600px 縦550pxで表示しています。



Facebook


QHM-haikデザインのおまじないで今までのQHMデザインを表示すると・・・

QHM-Pro Version:V5.0(rev:1305) 使用

デザインの表示種類

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

としました。


デザインの表示方法

  • 各サンプルページの表示はQHMのページ毎にデザインを設定する機能
    #include_skin
    を使用しています。
  • ただし、QHM-haikデザインについては #include_skin を使用せず、それぞれ別システムとして単一デザインの表示をしました。
  • アイキャッチ(スライドショー)機能 #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 新デザイン 2012年11月追加分サンプル

デザイン名称:check系2カラム [3] 2012-11-01追加

clickclickclick

デザイン名称:glass系2カラム [2] 2012-11-01追加

clickclick

デザイン名称:metal系2カラム [1] 2012-11-01追加

click

デザイン名称:natural系2カラム [4] 2012-11-01追加

clickclickclickclick

デザイン名称:pastel系2カラム [3] 2012-11-01追加

clickclickclick

デザイン名称:simple_系2カラム [7] 2012-11-01追加

clickclickclickclick
clickclickclick

デザイン名称:wall系2カラム [7] 2012-11-01追加

clickclickclickclick
clickclickclick

QHM 新デザイン 2011年12月追加分

企業向け:biz系2カラム [7] 2011-12-13追加

clickclickclickclick
clickclickclick

企業向け:biz系3カラム [7] 2011-12-22追加

clickclickclickclick
clickclickclick

シンプル:simple_系2カラム [9] 2011-12-22追加

clickclickclickclick
clickclickclickclick
click

グラデーション:gra系2カラム [6] 2011-12-22追加

clickclickclickclick
clickclick

標準3カラム [3]

clickclickclick

デザイン名称:g_w系 [29]

デザイン名称:g_w色系 [4]

デザイン名称:g_wcool [5]

デザイン名称:g_wcute [12]

デザイン名称:g_wide [8]

デザイン名称:g_色系 [30]

デザイン名称:g_black [4]

デザイン名称:g_blue [6]

デザイン名称:g_brown [2]

デザイン名称:g_gray [3]

デザイン名称:g_green [6]

デザイン名称:g_orange [2]

デザイン名称:g_pink [3]

デザイン名称:g_red [3]

デザイン名称:g_yellow [1]

デザイン名称:g_イメージ系 [10]

clickclickclickclick
clickclickclickclick
clickclick

デザイン名称:色系 [23]

デザイン名称:black [2]

デザイン名称:blue [6]

デザイン名称:brown [3]

デザイン名称:green [1]

デザイン名称:orange [1]

デザイン名称:pink [1]

デザイン名称:purple [3]

デザイン名称:red [6]

デザイン名称:simple [5]

clickclickclickclick
click



QHMとは

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

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

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

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