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

コンテンツ編

No.C01 ページ毎にデザインを変更したい　[☆]

ここではデザイン変更として、以下の２通りの方法を紹介します。

ヘッダのみ画像を変更する方法

ヘッダの画像のみ変更し、それ以外のデザインは元のものを利用する方法です。
◆手順

1. ヘッダに使用する画像を作成し、SWFUでアップします。サイズ：横750px　縦は任意サイズ
2. 新規作成で、newskin というページを作成し、以下のコードをコピペします。
   heightは作成した画像の高さから 20px程度差し引いた値に調整してください。
   コード

   #beforescript{{
   <style type="text/css">
   <!--
   #logo_text{
   height: 80px;
   background-image:url("swfu/d/画像名.png");
   }
   -->
   </style>
   }}

3. このヘッダを使用したいページに以下を記述します。

   #include(newskin,notitle)

画面全体のデザインを変更する方法

画面全部をまったく異なるデザインにする方法です。

#nclude_skin プラグインを使用することにより、ページ毎にデザインを変更できます。

• サンプルサイトはこちら

通常は、トップページに複数の入口を設けて、入口毎にデザインを変更する方法が一般的でしょう。
例えば、小学校のホームページの場合、一般用と児童用は明確に分けた方が親しみがわくでしょう。
一般用は落ち着いたデザインで、児童用はポップなデザインにするといったことが簡単にできます。

1. 既存のデザインをそのまま使用するときの設置方法
   1. QHMのインストーラで「デザインを後で変更する」で設定し、複数のデザインを用意します。
   2. デザインの変更画面で、デザインテンプレートに使いたいデザイン名があることを確認します。
   3. 各ページの先頭に以下を記述します。

      #include_skin(デザイン名)

      この指定をしないときは、初期設定の画面デザインになります。
      ◆注意：この機能は、QHM 2.4.6からサポートされています。
      
      
2. 複数のオリジナルヘッダを作成するときの設置方法
   ヘッダの画像は、設定画面からはひとつしか設定できませんので、CSSを変更してbackground-imageで指定した方が良いでしょう。
   1. ヘッダに使用する画像を複数作成し、SWFUでアップします。
   2. 新規作成で、newskin というページを作成し、以下のコードをコピペします。
      heightは調整してください。
      画像名とデザイン名は指定したいものに変更してください。
      コード

      #beforescript{{
      <style type="text/css">
      <!--
      #logo_text{
      height: 80px;
      background-image:url("swfu/d/画像名.png");
      }
      -->
      </style>
      }}
      #include_skin(デザイン名)

   3. このデザインを使用したいページに以下を記述します。

      #include(newskin,notitle)

   4. 同様に newskin2 を作成して、使用したいページに以下を記述します。

      #include(newskin2,notitle)

No.C02 右側にもメニュー部を追加したい　[☆☆]

QHMは6パートのデザインで構成されています。メニューはコンテンツの左側に表示されますが、コンテンツの右側にもメニューなどを表示したい場合は、以下の方法で可能です。
やり方は簡単です。コンテンツを段組で分けて、右側の段にメニューなどを入れるだけです。
ただし、画面右上に表示されるページ名が邪魔になるので、QHMのテンプレートを少し修正します。

７パート（３段組）のサイトを作ります。以下のようになります。

メニュー２を追加し、本文の右側に表示します。

これは、コンテンツに段組を使用し、右側にメニュー２を擬似的に作成する方法です。あくまでもコンテンツの分割なので、メニュー２のスタイルはコンテンツと同じになります。
メニュー２専用のスタイルを作成したいときは、メニュー２の編集画面で指定可能です。

◆手順

1. 標準の横幅は 750px と小さいので、main.css 内の以下を適当なサイズに変更する。

   #wrapper、#headcopy、#logo img　の　width:750px;　を変更。
   以下の例ではサイズは750px のままで作成してあります。

2. 右上に表示されるページ名がじゃまなので右下に移動する。

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

3. メニュー２に対応するページを新規作成する。例）menu_right
4. 本文を作成するとき、以下の #style2 プラグインで段組を作る。
   　右側のメニューの内容は #includeで取り込む。本文内には書かない。

   #style2(style=width:400px;float:left;text-align:left){{
   
   ここに本文を記述する。
   
   }}
   #style2(style=width:150px;float:left;text-align:left;margin-left:10px;border-left-style:dotted;border-left-width:1px;padding-left:5px){{
   
   #include(menu_right,notitle)
   
   }}

5. メニュー２に対応するページ(menu_right)を編集するときは、一覧から選択する。

■メリット

• この方法だと、右側のメニューが独立できるので編集が楽。
• 特定ページのみ３段、または２段と使い分けができる。

■デメリット

• 本文を書くとき、上下に段組のための余計な文字（おまじない）が入るので少しじゃま。

■注意
段組の右側は直接修正しないほうが良いでしょう。特定のページだけ何か別のものを入れたいときは記述してもよいですが、わかりにくくなるので、できたら #includeを使用することをお奨めします。

No.C03 ページの先頭に戻るリンクを追加したい　[☆]

編集画面で適当な箇所へ以下をコピー＆ペーストします。
（#headcopyは画面一番上にある、H1タグが入るIDです。）

#style(style=text-align:right;){{
[[▲トップへ戻る>#headcopy]]
}}

No.C04 前のページに戻るリンクを追加したい　[☆]

前に操作していたページに戻るリンクを作るときは、編集画面で適当な位置に以下をコピー＆ペーストしてください。
JavascriptがONになっていないと動作しません。
「▲トップへ戻る」はそのページ内の先頭に戻りますが、これは直前の操作したページへ戻ります。

RIGHT:&modoru(戻る);

No.C05 全ページに共通の戻るボタンを追加したい　[☆☆☆]

デザインテンプレートを修正すると、本文には何も書かなくても全ページの画面上部に「戻る」ボタンを追加できます。

• 修正するファイル

  \skin\hokukenstyle\pukiwiki.skin.php

• 修正内容

  div id="body"><!-- ■BEGIN id:body -->　の行の前に
  以下を追加します。
  画像(back.gif)は事前にSWFUでアップしておいてください。

<div style="margin:0px;padding:0px;" align="right"><a href="#" onClick="history.back(); return false;"><img src="swfu/d/back.gif">戻る</img></a></div>

修正後のpukiwiki.skin.php

省略
<!-- ◆ Content ◆ ========================================================= -->
<div id="main"><!-- ■BEGIN id:main -->
<div id="wrap_content"><!-- ■BEGIN id:wrap_content -->
<div id="content"><!-- ■BEGIN id:content -->
<h2 class="title">#{$this_right_title}</h2>
<div style="margin:0px;padding:0px;" align="right"><a href="#" onClick="history.back(); return false;"><img src="swfu/d/back.gif">戻る</img></a></div>
<div id="body"><!-- ■BEGIN id:body -->
#{$qp_here_start}
#{$body}
#{$qp_here_end}
</div><!-- □END id:body -->
#{$summary}
</div><!-- □END id:content -->
</div><!-- □ END id:wrap_content -->
省略

No.C06 ブログのタイトルと更新日を1行で表示したい　[☆☆]

以下のプラグインを改造することで、1行にRSSのタイトルと日付を表示できます。

ただし、FTPでこのファイルをダウンロードして、修正後、アップロードすることができる場合のみ行ってください。
技術に不安があるときは、やらないでください。
バックアップを取ってから改造したほうが良いと思います。
当方で動作確認しましたが、何か不具合が発生しても保障はできませんので、自己責任でお願いします。

■改造するプラグイン名 (QHM 4.27)
　\plugin\showrss.inc.php

■改造場所と改造内容
　196行目を1行だけ修正します。

　上の行が改造前　（行の先頭に // を付けて改造前を保存しておくとよいでしょう。）
　下の行が改造後

// return "<strong>$date</strong>\n<ul class=\"recent_list\">\n$str</ul>\n";
return "<ul class=\"recent_list\">$str ($date)</ul>\n";

■プラグインの記述例

#showrss(http://xxxx/index.rdf, recent, 5)

・タイトル (2010-01-28) の形式で表示します。

日付を前に持ってきたかったのですが、改行されてしまいどうしてもうまくいかず
タイトル、日付　の順番になりました。これでも結構いい感じだと思いますが...
誰かもっといい案ありましたら教えてください。

No.C07 コンテンツを画像枠で囲みたい　[☆☆]

1. 画像枠を作成し、GIF、 PNG、JPG等で保存します。
2. 保存したファイルをSWFUでアップします。
3. 以下のコードをページ内に書きます。画像名,width,paddingは適当に変更してください。

#beforescript{{
<style type="text/css">
<!--
.box1{
background-image:url(swfu/d/画像ファイル名);
background-repeat: no-repeat;
width: 380px;
padding: 40px 100px 40px 60px;
}
-->
</style>
}}

#html2(<div class="box1">)
ここにおまじないが書けます
&size(24){''これは大きな文字''};
[[&show(fancy_button.jpg,,ボタン);>http://ensmall.net/uf/forum/index.php]]
-これはリスト1
--リスト1-1
--リスト1-2
ここにおまじないが書けます。長い文字を書くとこんな感じで改行されます。
&color(red){ここにおまじないが書けます};
#html2(</div>)

No.C08 コンテンツ内の指定した画像に枠をつけたい　[☆☆]

枠線を付けたい画像があるページに以下を書いてください。

そのページのコンテンツが入るエリア（本文を書くところ）にある全ての画像に対し枠線が付きます。

#body　は、コンテンツが入るエリアの id名です。(QHM固有)

#bodyを削除して　img だけにすると、メニューも含め全部の画像に枠が付きます。
ページが沢山あるときは、これを　ナビ２編集　で　SiteNavigator2 のページに入れると全ページに適用されます。
全ページに適用されると困るときは、#includeプラグインを必要なページに書いた方がよいと思います。

#beforescript{{
<style type="text/css">
<!--
div#body img{
margin:5px 10px;
border: 4px solid #cccccc;
}
-->
</style>
}}

もし、枠が付いて欲しくない画像まで枠が付くようでしたら以下のようにしてください。
ナビ２に設定するのは同じです。

#body を .frameimg に変更 (frameimg　は新規作成のclass)

#beforescript{{
<style type="text/css">
<!--
div.frameimg img{
margin:5px 10px;
border: 4px solid #cccccc;
}
-->
</style>
}}

さらに、枠を付けたい画像がある開始位置に以下を追加

要するに <div> </div>で必要な範囲を指定します。
分かりにくいので、以下に例を書きました。

この例では、3つの画像のうちflower01.jpg と flower02.jpg だけに枠が付きます。

例）

#html2(<div class="frameimg">)
&ref2(swfu/d/flower01.jpg,nolink,,画像の説明);フレームあり
&ref2(swfu/d/flower02.jpg,nolink,,画像の説明);フレームあり
#html2(</div>)
&ref2(swfu/d/flower03.jpg,nolink,,画像の説明);フレームなし

フレームなし

No.C09 #htmlで指定した画像の改行幅を変更したい　[☆☆]

以下のように"リンク先タイトル"という文字列が3個ある場合、リンク先タイトルC　の上の改行幅を変更したい。

リンク先タイトルA　　リンク先タイトルB
　　　　　　　　　　　　　　　　　　  ←　ここの改行幅を変更したい。
リンク先タイトルC

この場合は、以下のようにすればできます。

#html{{
<div style="position: relative;">
<img src="画像アドレス" width="261" height="178" alt="画像の説明" /><br />
<div style="position: absolute; top: 40px; left: 25px; width: 261px;">
<span style="line-height:50px">
<img src="画像アドレス" alt="xxx" /><a href= "リンク先アドレス"><u>リンク先タイトルA</u></a>
<img src="画像アドレス" alt="xxx" /><a href= "リンク先アドレス"><u>リンク先タイトルB</u></a><br /></span>
<img src="画像アドレス" alt="xxx" /><a href= "リンク先アドレス"><u>リンク先タイトルC</u></a>

</div>
</div>
}}

QHMはXHTMLを生成しますので、HTMLの文法には気をつけたほうが良いです。

<br> ではなく　<br />　です。

No.C10 クリッカブルマップを使いたい　[☆☆]

QHMにはクリッカブルマップの機能はありません。以下のように#htmlプラグインで記述する必要があります。

◆手順

1. 画像をSWFUでアップする。
2. 以下のようなクリッカブルマップのコードを#htmlプラグインに書く。

コード

#html{{
<img src="swfu/d/clickmap.gif" usemap="#clickmap" width="500" height="500">
<map name="clickmap">
<area shape="rect" coords="285,360,489,456" href="http://www.xxx.com" target="_blank" alt="xxx.com">
<area shape="rect" coords="2,338,242,475" href="http://www.yyy.com" target="_blank" alt="yyy.com">
</map>
}}

No.C11 ページ名の文字サイズ、色を変更したい　[☆☆]

各ページの右上に表示している　ページ名はおまじないでは文字サイズや色の変更はできませんが、以下の方法で変更可能です。
方法１、２どちらでも可能です。自分に合った方法をご利用ください。
方法１が簡単です。

方法１．スタイル指定を設定画面で行う。FTPは不要。
　以下のコードを　サイト情報の設定　→　その他のタグ　に記入する。

<style type="text/css">
<!--
#content h2.title {
font-size:20px;　　　　←　文字サイズを指定
color:red; 　　　　　　←　文字の色を指定
}
-->
</style>

方法２．CSSファイルを変更する。FTPが必要。
　　　\skin\hokukenstyle\デザイン名\main.css　の　318行目

#content h2.title {
text-align:right;
font-size:20px;　　　　←　文字サイズを指定
color:red; 　　　　　　←　文字の色を指定（追加）
margin:0;
padding-top:5px;
}

No.C12 表示のたびに異なる画像を表示したい　[☆☆☆]

スクリプト編を参照してください。

No.C13 別のWebサイトを表示したい　[☆]

「Yahoo!カレンダー」などの外部サイトを取り込むときは、以下のプラグインを使用します。

• #formz

  #formzu(読み込むURL,縦サイズ,横サイズ,[left,right,center])

  で表示できます。left,right,centerはどれかひとつを書きます。省略してもよいです。
  例）

  #formzup(http://ドメイン/,800px,500px,center)

• #formzup

  #formzuと同じですが、赤い枠線で囲みます。パラメータは #formzu同じです。

◆注意

#formzu　または　#formzupはカンマが付いているURLは使用できません。

以下の方法でURLにカンマが入っていても表示することができます。

例）

#html{{
<iframe src="http://calendar.yahoo.co.jp/YYY,db880b/srt,0/brot_rinde_calendar/?v=2&t=1257798146" height=300 width=550>
この部分は iframe 対応のブラウザで見てください。
</iframe>
}}

No.C14 リンクできる画像にカーソルを乗せた時に画像を半透明にさせる方法　[☆☆]

以下のコードを、設定画面の「その他のタグ」に入れてください。リンクがある全てのページに適用されます。

D++ Cool Design Laboさんのサイトで紹介されているテクニックです。いつも有益な情報をいただいています。ありがとうございます。

例）リンクがある画像の上にカーソルを持ってくると、画像が半透明になります。
　FrontPageへリンクしています

コード

<style type="text/css">
<!--
a:hover img{
opacity:0.75; /* opera firefox safari */
filter: alpha(opacity=75); /* ie */
}
-->
</style>

No.C15 自動で更新日付にNewの表示・非表示を行う方法

newプラグインを使用すると、指定した日付を基準に　New の文字を自動表示できます。
標準では１日以内の場合に 赤で　New! を、5日以内の場合に 緑で　New を表示します。それ以上の場合は表示しません。

書式

&new(nodate){基準日付};

nodate を指定すると、日付を表示しないで　New　のみ表示します。

例）
基準日が 2010/04/01場合。
以下のように記述すると、日付により表示が変化します。

[&new(){2010-04-01};]○○の説明を追加。

• 当日が2010/04/01のとき

  　[2010-04-01 New!]○○の説明を追加。

• 5日以内のとき（当日が2010/04/02～2010/04/05のとき)

  　[2010-04-01 New]○○の説明を追加。

• 5日以降のとき（当日が2010/04/06～のとき)

  　[2010-04-01]○○の説明を追加。

カスタマイズ方法

• 5日以内を30日以内に変更するとき
  \plugin\new.inc.php の以下の行を変更します。

21行目：
60 * 60 * 24 * 5 => ' <span class="new5" title="%s">New</span>');  // 5days
　　　　　　　　↓変更
60 * 60 * 24 * 30 => ' <span class="new5" title="%s">New</span>');  // 30days

• Newの文字を変更もっと目立つようにするとき（背景に色を付けて文字は白）
  \skin\hokukenstyle\デザイン名\plugin.css　を変更します。

389行目付近
span.new1{
    color:white;　　　　　　　←文字色：白
    background-color:red; 　　←背景色：赤　（この行を追加）
    font-size:x-small;
}
span.new5{
    color:white;　　　　　　　←文字色：白
    background-color:green; 　←背景色：緑　（この行を追加）
    font-size:xx-small;
}

No.C16 コンテンツ部の背景に画像を表示したい

コンテンツ部の背景に画像を表示する方法はいろいろありますが、ここでは２つ紹介します。
事前に、画像をSWFUでアップしておいてください。サンプルコードの画像名は変更してください。

◆方法１
　この方法は、コンテンツ部全体に画像を表示する方法です。以下のコードを画像を表示したいページに記述してください。

#beforescript{{
<style type="text/css">
<!--
#content{
background-image:url(swfu/d/bg_image.png);
background-repeat: no-repeat;
}
-->
</style>
}}

#content はQHMのコンテンツ部のIDです。この状態では、画像はコンテンツ部の左上にひとつだけ表示されます。
background-repeat: no-repeat;　を　repeat に変更すれば、同じ画像がコンテンツ部全体に表示されます。
複数ページでこのコードを使いたいときは、毎回同じコードをコピーするのは面倒なので、#includeプラグインで取り込むと便利です。

#includeプラグインを使う手順

1. 新規作成でページを作成。例）bgimage
2. このページに上記コードを入力して保存。
3. 背景画像を設定したいページに以下を記述。

   #include(bgimage,notitle)

背景に模様をつけたりするときにこの方法が利用できます。

◆方法２
　コンテンツ部の任意の位置に画像を表示して、その画像の上に何か文字などを表示したい場合は、以下を参照してください。

No.C07 コンテンツを画像枠で囲みたい

ご意見箱

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

• イメージ画像があると、とってもいいと思いますよ(＾_＾) -- Miku 2010-03-30 (火) 00:29:55
• Mikuさん　ありがとうございます。文字だらけのサイトですみません。画像については、公開する前から気になっていましたが、それを待っていてはいつになるかわからないため、強引に公開してしまいました。これから画像を入れていきたいと思います。 -- tomzo 2010-03-30 (火) 17:41:51
• No.C07の「コンテンツを画像枠で囲む」テクニックは大感激です。涙が出るほど嬉しいテクニックです。この技はQHMのクイック・デザイナーのソフトを使っても出来ない技なので、QHMではこういうページは作れないんだ・・・と諦めていました。これでまたサイトのデザインの幅が広がりました。ありがとうございました！！ -- pikoneko 2011-09-26 (月) 19:30:14
• No.C07の「コンテンツを画像枠で囲む」テクニックは大感激です。涙が出るほど嬉しいテクニックです。この技はQHMのクイック・デザイナーのソフトを使っても出来ない技なので、QHMではこういうページは作れないんだ・・・と諦めていました。これでまたサイトのデザインの幅が広がりました。ありがとうございました！！ -- pikoneko 2011-09-26 (月) 19:55:17
• pikoneko さん　お役に立てて何よりです。最近は、なかなか更新ができていませんが、少しづつ改良して行きますのでよろしくお願いします。 -- tomzo 2011-09-26 (月) 21:00:32

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

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

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