QHM (Quick Homepage Maker) ユーザのためのTips集。小技から大技までテクニック満載

レイアウトの変更

No.L01 WordPressのテーマを使用　[☆☆☆]

QHMでWordPressのテーマを使用することで、全世界にある無数のすばらしいデザインを取り込むことができます。このデザインを取り込むことで、見た目はまったく違った印象を受けます。
以下のサイトを見てください。
コンテンツは同じものですが、デザインが異なるだけです。
コンテンツ内にWordpressのテーマを取り込む方法について説明があります。

以下は、Wordpressのテーマをダウンロードし、2つの方法でWordpressのデザインを取り込んだ例です。どちらの方法を採用するかは、あなた自身で検討してください。

• ヒント
  • QHMと相性のよいテーマが見つかれば　⇒方法１
  • PHPソースなんか見たくもない人は　⇒方法２
  • CSSを勉強したい、ある程度できる人は　⇒方法２
  • CSSもPHPソースもみたくない人は、あきらめてください。

No.L02 おまじないでレイアウト変更　[☆☆]

QHMでは#html2プラグインを使用して、コンテンツ内のレイアウトを自由に変更することができます。レイアウトは、四角いボックスを上から順番に並べていくような感じで行います。
並べたボックスの中に、文章や画像などを入れてレイアウトを作成します。ボックスは右寄せまたは左寄せに指定できます。また、ボックスを並べたとき横幅いっぱいになり入りきらないときは、そのボックスは次の行へ流れます。ボックスの枠線は表示もできますが、通常は非表示にします。

例）
　　工事中

No.L03 QHMでリキッドデザイン（サイズ可変デザイン）　[☆]

　リキッドデザインとは、アマゾン(Amazon.com)のサイトのように、ブラウザを横に広げるとコンテンツ表示部が横に広がるデザインのことです。通常、QHM横幅は固定サイズですが、これを可変にしてみました。

　メニュー幅は固定サイズにして、コンテンツ部はブラウザの横幅のサイズにより変化します。
リキッドデザインは、１ページ内に多数のコンテンツを掲載するサイトに有効です。また、横幅の小さい画面で見る人にとっては、横スクロールバーが出ないため見やすいかもしれません。
ただし、ブラウザのサイズによりデザインが違ってくるため、デザインが少しやりにくいかも...
QHMユーザーフォーラムもリキッドデザインになっています。

確認デザイン：g_blue02, g_modern01, g_wide03
確認ブラウザ：Win XP + IE8, Firefox 3.6

(1)メニューを右側、コンテンツ部を左側のとき。

以下のスクリプトをナビ２に入れてください。

#beforescript{{
<style type="text/css">
<!--
/* ここから、Wide系のデザイン用 */
#header {
 width: 100%;
}
#navigator {
 width:100%;
}
#navigator2 {
width: 100%;
}
#main {
 width: 100%;
}
/* ここまで、Wide系のデザイン用 */

/* 以下は全てのデザイン共通 */
#headcopy {
width:100%;
}
#logo img {
width:100%;
}
#wrap_content {
width:100%;
float:left;
margin-right:-200px;
}
#wrap_content>*{
margin-right:200px;
}
#wrap_sidebar {
width:200px;
float:right;
}
#wrapper {
width:98%;
}
-->
</style>
}}

(2)メニューを左側、コンテンツ部を右側のとき。

以下のスクリプトをナビ２に入れてください。(★は上記と異なる箇所のマーク。使用するときは、★は削除してください)

#beforescript{{
<style type="text/css">
<!--
/* ここから、Wide系のデザイン用 */
#header {
 width: 100%;
}
#navigator {
 width:100%;
}
#navigator2 {
width: 100%;
}
#main {
 width: 100%;
}
/* ここまで、Wide系のデザイン用 */

#headcopy {
width:100%;
}
#logo img {
width:100%;
}
#wrap_content {
width:100%;
float:right;　★
margin-left:-200px;　★
}
#wrap_content>*{
margin-left:200px;　★
}
#wrap_sidebar {
width:200px;
float:left;　★
}
#wrapper {
width:98%;
}
-->
</style>
}}

No.L04 ページ名を画面右下に移動　[☆☆]

ナビのすぐ右下に表示される、FrontPage などのページ名を目立たなくするために画面右下に移動したい場合は、以下のファイルを編集する必要があります。

/skin/hokukenstyle/pukiwiki.skin.php

【注意】
このファイルはとても重要なファイルです。改造に失敗すると画面が何も表示されなくなることも考えられます。必ずバックアップを取ってから行ってください。

• 改造方法

  pukiwiki.skin.php の以下の行
  <h2 class="title">#{$this_right_title}</h2>
  を
  </div><!-- □END id:body -->
  の行の下に移動する。

No.L05 CSSを変更してレイアウト変更　[☆☆]

（未稿）

No.L06 テンプレートを変更　[☆☆☆]

（未稿）

No.L07 全ページ共通の画像を表示　[☆☆☆]

（未稿）

No.L08 画面横いっぱいのスライドショー (jQuery)　[☆☆☆]

（未稿）

ご意見箱

皆様のご意見をお待ちします。

お名前: 認証コード(5601)

当ページは役に立ちましたか？

選択肢	投票
たいへん役に立った	19
ちょっとだけ役に立った	2
普通	2
あんまり	1