QHM-haikサンプル集 Part.2

目的

先ほどお知らせしましたように「QHM-haikサンプル集」を公開させていただきました。

その目的は、

  • 既存のQHMサイトにQHM-haikを導入するために、どこの部分を直すのが一番楽で簡単かを調べる
  • 既存のQHMサイトにQHM-haikを導入したらどのように表示されるのかを確認する
  • 既存のQHMサイトの命令文とQHM-haikの命令文との相性というか兼ね合いというか、ま、そのまま使える命令文と変えなければならない命令文を調べる
  • QHM-haikの各デザイン毎の特徴を調べる

といったようなものです。

公開時の状態

QHMのバージョン

公開時のQHMのバージョンは、V5.0(rev1235)です。

元となったサイト

弊社で公開している「QHM標準デザインサンプル集」をそのままコピーして、特定部分だけQHM-haik用に修正しました。

修正した箇所

QHMユーザーの方用にQHMの用語で説明します。

ナビ部分

QHM-haikのプルダウン機能を使用するために #bs_nav を使用しています。
それに伴い階層化しています。

メニュー部分

既存のQHMではメニュー部分の記述は「*」を使用することが奨励されていましたが、QHM-haikでは「-」を使用するようになっていたので、「*」を「-」に変更しました。

また、3カラム用にメニュー2も設定してあります。

アイキャッチの追加

QHM-Haikの新機能である「アイキャッチ」をスライドショー機能で使用するために、 #eyecatch(fit){{#bs_carousel{{{ を追加しました。

ナビ2部分(フッター)

QHM-haikデザインには、QHMライセンス表記が無いために、編集画面に行くのに、http://xxxxx.xxx/index.php?cmd=qhmauth とURLを入力しなければなりません。
Google Chrome に QHM編集機能を追加してあればよいのですが、そうでないとURL入力が面倒くさいので、ナビ2部分(フッター)に、

[[サイト管理>http://xxxxx.xxx/index.php?cmd=qhmauth]]

を追加しました。WordPressのメタ情報のイメージです。

#main_visual・#logo_imageとQHM-haik

今までのQHMではQHM-haikの「アイキャッチ」みたいに画像を印象付ける方法として#main_visualや#logo_image を使用している方もいると思います。

QHM-haikの各デザインに#main_visual・#logo_imageを「アイキャッチ」と同時に使用したらどうなるのかを確認したところ、現時点では下記の現象になっています。

「アイキャッチ」を使用している状態で

  • #main_visualを使用した場合

    「アイキャッチ」は表示されず、#main_visual のみが表示

  • #logo_imageを使用した場合

    #logo_image は表示されず、「アイキャッチ」のみが表示。

  • #main_visual・#logo_image 両方使用した場合

    #main_visual のみが表示され、「アイキャッチ」・#logo_image は表示されない

よって、現時点での力関係は、#main_visual > 「アイキャッチ」 > #logo_image みたいです。
そもそも#logo_imageは全く役に立ってません。


上記QHM-haikの命令文で標準デザインではどうなる?

あくまで現時点での結果です。
ブラウザのバージョンによっても結果は異なるかもしれません。

時間が無かったのでまだ、「3_green01」・「check_red」・「glass_yellow」しか試していません。

結果は下図の状況です。実物はQHM-haikデザインサンプル集でご覧ください

次回に続きます。