目的
先ほどお知らせしましたように「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部分(フッター)に、
を追加しました。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デザインサンプル集でご覧ください
次回に続きます。