沖縄とトールペイントが大好きでQuick Homepage Makerでのサイト作りに奮闘中！

Top / QHMReferenceBook

QHM 備忘録

QHMプロ会員サイトが大幅にリニューアルしました。2010年10月27日 QHM4.6 がリリースされ、QHMのおまじないでは使えなかった機能もたくさん増えました。
このページに記述してある方法も古くなっているものもありますのでご了承ください。なるべく最新情報に書き変えていきます。

電話番号リンク

• 携帯やスマホからアクセスしたときにタップ&クリック一つで電話をかけたり登録画面へのリンク方法
  例）TEL:01-2345-6789
  記述

  #html{{
  <a href="tel:0123456789">TEL:01-2345-6789</a>
  }}

  表示 TEL:01-2345-6789
• 「"tel:0123456789"」←ここの部分には「ハイフン」や全角文字は入れない事。
• スマホではタップすると、電話をかけたり電話帳登録する画面にいきます。携帯では確認していませんが、多分クリックすると電話をかけれると思います。
  注）パソコン上でのクリックはエラーになります

携帯サイトへの転送設定 Mobile Link Discovery（ﾓﾊﾞｲﾙ・ﾘﾝｸ・ﾃﾞｨｽｶﾊﾞﾘｰ）

アップデートで表の罫線が消える

スタイルシートを編集（main.css）

• デザインフォルダのmain.cssを開いて「.style_table」の中に以下を追加する。

  border-collapse: separate;
  border-spacing: 1px;

罫線が表示されないバグの解消手順（2012年8月22日のバージョンアップについて）

• 下記URL(会員サイト)にアクセスして罫線が表示されないバグの解消手順について解説しています。
  https://ensmall.net/p/qhmpro/index.php?cmd=read&page=20120831&word=%E7%BD%AB%E7%B7%9A

テーブルの枠線を表示しないはこちらから

ファビコンを設置してみましょう！

【ファビコン設置方法はこちらから】

固定された「Page Top」の設置

D++ design Labo様 が今年(2010)1月16日に公開されています。設置させて頂きました。
【 固定された「Page Top」の設置方法はこちらから 】

FTPソフトを使ったバックアップの取りかた

手書き下線をもっと文字に近づける。

• color.css（最後の556行目辺り）

  span.handline{
  	background-image:url("line.gif");
  	background-repeat:repeat-x;
  	background-position:bottom;
  	padding-bottom:0.2em

  【padding-bottom:0.2em】の数字を変える

  span.handline{
  	background-image:url("line.gif");
  	background-repeat:repeat-x;
  	background-position:bottom;
  	padding-bottom:0.1em

• main.css（span.handline を探して編集する。656行辺り）

  span.handline {
   padding-bottom: .2em;
   background-image: url(line.gif);
   background-repeat: repeat-x;
   background-position: bottom;
  }

今回は【padding-bottom:0em】にしてみました。

Flashを設置する

ナビとメニューバーを現在開いているページが分かるように色を指定する

【ページの先頭へ戻る】ボタンの設置（D++様参照）

文字の拡大・縮小表示ボタンの設置

詳しくは【こちらへ】

【メニュー部に設置できる文字サイズ変更ボタン 】です（D++様が無料公開されました。）

『箇条書きや見出し１～３、先頭に半角スペースを付けた場合の文字などは変わりません。主に本文の見易さを向上させるために使ってください。』との事です。ロールオーバー仕様になっていていい感じです。

文字サイズ変更

【D++QHMcooldesignLaboはこちらへ】

自分のサイトのサイトマップの作り方

[[サイトマップ>http://あなたのホームページアドレス/index.php?cmd=map]]

このようにリンクを作ってページに移動させる。

ロールオーバー（可愛いカメさんの動きです♪）

マウスを合わせてみて下さい。詳しくは【こちらへ】

Excelの表をそのまま貼り付ける方法

W3C RSSロゴの非表示（pukiwi.skin.php の編集）

• 「skin」→「hokukenstyle」→「pukiwi.skin.php」をダウンロードする。

  <!-- ■　W3C ロゴ■ ============================================== -->
  <p style="text-align:right; margin-top:5px;">
     #{$rss_tag}&nbsp; 
     #{$w3c_tag}</a>
  </p>
  </div>

  66行目辺りにある↑この部分を削除してアップロードする。（行数はデザインによって変わります）
  ＊pukiwiki.skin.phpは/skinの階層にもあるが、これは違うので注意すること。編集する必要があるのは/skin/hokukenstyle/階層の分になります。

文字の回りこみ

HTMLタグに文字を回り込ませる。

greyboxに文字を回り込ませるおまじない。

lightbox2に文字を回り込ませる。

リンクした画像に文字を回り込ませるおまじない。

スライドショー

#slideshow(350,false,5,90){{
画像のURL1,画像の説明1
画像のURL2,画像の説明2
画像のURL3,画像の説明3
}}

• （350←画像の高さ・false←前から順に・5←画像を切り替える秒数・90←中央に配置出来ないので左に余白を入れて調整するためのピクセル数）
  そのほかにも、falseをtrueに書き変えるとランダム表示も設定できます。
  スライドショーはこちら

テキストにスライドショウの回り込み

自動サイトマップの作り方

[[サイトマップ>http://あなたのホームページアドレス/index.php?cmd=map]]

と記述するとPukiWikiからの機能で、サイトマップのURLにアクセスされて表示されます。
(QHMユーザーフォーラムでの「Smith」さんの回答を参考にさせて頂きました。)

Blogのタグの大きさを揃える

タグクラウドはblogの編集画面で設定します。

#tagcloud()　→　#tagcloud(cloud=off)

こうする事で普通のリスト表示になります。
(QHMユーザーフォーラムでの「jun」さんの回答を参考にさせて頂きました。)

ブログのタグを消す

• タグを使用したブログのページを削除したりページ名を変更した為に残ってしまったタグを削除する方法。

  http://ドメイン/index.php?cmd=tag

  上記にアクセスすると、管理者パスワードを入力する画面になり「実行する」をクリック。

• ページを削除してもタグは残ってしまうので、タグのキャッシュを残さないようにページを削除する方法。

  いったんタグを削除してページを更新 ⇒ その後ページ内容を削除して更新

Smooth Scroll 機能を設置する

閉鎖しているサイトへのアクセス方法

http://あなたのＵＲＬ/index.php

• 普段は下記のように案内が入る。
  【お知らせ・現在、このページは制作中(一時停止)です。お手数ですが、今しばらくお待ち下さい。- Sorry, this page is still under construction.】

直接サイト認証画面へのアクセス方法

http://サイトのドメイン/index.php?QHMAdmin

http://サイトのドメイン/index.php?cmd=qhmauth

作りかけのページにアクセスさせないようにする

• ページの先頭に下記のように書く

  #redirect
  ※トップページ(FrontPage)では、使えません

• 訪問者は自動的にトップページに移動します。
• ページが完成したら【#redirect】を削除する

ページ毎に、キーワード、サイトの説明を個別に設置

画像について

画像についての注意すること

画像の縮小ページ

画像を単純に横並びにする

greyboxを使って画像やウェブサイトをポップアップする

lightboxを使ったポップアップ（画像の表示だけ）

HTMLソース（アフィリエイトタグ）を横並びにする

HTMLソースを中央に寄せる

画像の横に枠を並べる。

スクロールボックス

おまじないが使えるスクロールボックス

スクロールボックス（おまじない可）の隣に画像を並べる。

ウェブマスターツールのサイトマップ送信の入力

URL/index.php?cmd=sitemap

• 自サイトのURLの後に/index.php?cmd=sitemapと付け足して入力する。

キラーページについて

キラーページの注意点

セールスレター型ページ（killerpage）では、一切の自動リンク設定は無効になっています。また、すべてのリンクは、「別ページ」で開かれるようになっています。

強制的にリンクを「外部ウインドウで開かない」ようにする

#nowindowと付けると、可能。

• キラーページから他のページに戻る時、外部ウインドーで開いてしまうのを内部ウインドーで開くようにする場合。
  • ページの一番上に【#nowindow】と書く。（そのページの全部のリンクに対応）
  • リンクを作ってページ名の後に#nowindowと続けて書く。（１つのリンクに対応）

    [[トップページへ>FrontPage#nowindow]]

背景画像を繰り返さない編集

通常のページの背景画像を繰り返さない編集。（color.css）

skin→hokukenstyle→デザイン名→color.css を編集。
3行目あたりにある
body{
color:#4c4c4c;
background-color:#fceeeb;
background-image:url("jimi-a.jpg");
の後に
background-repeat:no-repeat; を書き加える。

• defaultでは繰り返しになっています。

killerpageの背景を繰り返さない編集方法。（default.css）

skin → killerpage2 にある default.css を編集する。
8行目辺りにある
body{
text-align:center;
padding:0px;
margin:0px;
の後に
background-repeat:no-repeat; を書き加える。

• defaultでは繰り返しになっています

背景画像を固定する

通常のページの背景画像の固定（color.css）

skin→hokukenstyle→デザイン名→color.css を編集。
3行目辺りにある
body{
color:#4c4c4c;
background-color:#fceeeb;
background-image:url("jimi-a.jpg");
の後に
background-attachment:fixed; ← を付け加える

• バージョン4,23からの編集。（main.css）

  skin→hokukenstyle→デザイン名 にある main.css を編集
  27行辺りにある
  body {
  text-align:center;
  font-size:14px;
  color:#333333;
  background-color:#fff;
  background-image:url(side_bg.png);
  background-repeat:repeat;
  の後に
  background-attachment:fixed; ←書き加える。

killerpageの背景画像を固定する。（default.css）

skin → killerpage2 にある default.css を編集する。
8行目辺りにある
body{
text-align:center;
padding:0px;
margin:0px;
の後に
background-attachment:fixed; と書き加える。

固定する場合はfixed、内容と共にスクロールさせるにはscrollを指定します。何も指定しない場合はscrollになります。
QHMのバージョンアップでシステムの更新をすると元に戻ってしまうので、再度設定し直す必要があります。

プロフィールページなどに、ブログの更新情報を表示する

• １．ブログの更新情報であるRSSのリンクを取得
  ２．QHMに以下のような書式で書き込む

  #showrss(あなたのブログのRSSのアドレス)

  ★重要な注意点：自分自身のホームページのRSSは、絶対に読み込まないで下さい。仕様上、エラーが起こりトップページが真っ白になります!

パンくずリストの作り方

• パンくずリスト(topicpath)と呼ばれる、現在参照しているウェブページの階層を表わす。
  • ページの最初に次のように書く

    &topicpath;

    こうなる↓
    Top / QHMReferenceBook
  • パンくずリストを何段階にするには【Top / QHMReferenceBook】だけでは【Top/AAAA】【Top/BBBB】【Top/CCCC】の２段階にしかなりません。【Top/AAAA/BBBB/CCCCC】とするには、ページ名を付けるときに【BBBB】と付けるのではなく【AAAA/BBBB】や【AAAA/BBBB/CCCC】と付ける事。

枠の中にHTMLコードを埋め込みたい

• #html2(ここに１行でコード)を使う
• 枠の中に、枠を入れるには、

  #style{{
  #html2(ここにコード)
  }}

  と書く。
  複数行のHTMLを１行にする方法は、
  http://www.hokuken.com/index.php?DelReturn
  ここで１行にしたHTMLをコピーして貼り付ける。

}}** 行の始めに半角スペースを入れると枠に囲まれる。 [#cb146e9f] -行の始めに、半角スペースを書き込みます。すると、四角い箱に囲まれます。このなかは、単純なテキスト情報だけで、&color(,pink){''リンクも装飾も、一切が無効になる''};状態です。 このようになります。 &br; ** 箇条書きの使い方 [#r647dce7] -　- (ハイフン)を使います。- は、単純な箇条書きです。 - 箇条書き1 -- 箇条書き2 --- 箇条書き3 &color(red){''↓''};こうなります。 - 箇条書き1 -- 箇条書き2 --- 箇条書き3 -　+ (プラス)を使います。 + は、番号付の箇条書きです（番号が自動で入ります！） + ア行 + カ行 + サ行 &color(red){''↓''};こうなります + ア行 + カ行 + サ行 &color(,pink){''&color(red){＊};空白行があると番号が続かないので注意！''}; &br; ** ちょっと便利なリンク作成方法（InterWikiName） [#kfecaba0] -[[ゆうなの花>Google:ゆうなの花]]　下のように書く。 [[ゆうなの花>Google:ゆうなの花]] -[[Google:大阪の天気]]　下のように書く。 [[Google:大阪の天気]] -[[大阪の天気>Google:大阪の天気]]　下のように書く。 [[大阪の天気>Google:大阪の天気]] &br; ** IFRAME（インラインフレーム）の作り方(（脆弱性&color(pink){ぜいじゃくせい};があるといわれているのでお勧めできません…） [#v65dbd6c] - 「inline frame」の略。のタグを使うことによって、Webページの中に別のページを表示させるこができる。 -インラインフレームのHTMLです。 -【フレームの中に入れるサイトのファイル名】には入れたいものがサイトならそのサイトのURLを、自分のサイトのあるページを入れたいならそのページの名前（URLのindexから後の部分）を入れる。 -width="○○○"の○○○の中には横幅のサイズの数値を、height="○○○"の中には、高さの数値を入れます。数値の単位はピクセルです。 -このHTMLタグを編集画面の下にあるHTMLボタンを押してその中に入れます。 #html{{ (ここにインラインフレームHTMLタグを挿入) }} %%-[[【例】サイトのページ（トールペイント）を入れた場合（サイズ480×150）>QHMReferenceBook/iframe]]%% - &color(,pink){''IFRAMEをどうしても使いたい方はの危険性を読まれてからにしてください！''}; [[&size(16){''&color(red){注};　IFRAMEの危険性''};>IFRAMEの危険性]] &br; #html{{

字下げしたいときや、箇条書きの文頭を揃える

• 方法は、引っ込めたい文頭に半角【>】を持ってくること、それだけ。

ページの目次の作り方

• ページの一番上に次のように書く

  #contents

• このように書くだけで本文中に【*・**】で見出し・小見出しをつけたものが自動的にページの一番上に目次として出きる（しかもリンクを貼られた状態で！）。
  本文で見出しを追加していくと目次も自動的に追加される。

ページ名を半角英数字にしブラウザ上を日本語で表示する方法

• 作成するページ名を日本語で入れれば、URLの窓に凄く長いアルファベットがズラ〜と並びます。北研さんによると、SEO上は問題ないそうですが…
  ページタイトルは、ブラウザの一番上に日本語表示された方が訪問者の方には分かりやすいと思います。だけど、自分のページ管理のためには、使いにくい感じです。

  TITLE:ここにタイトルを入れる

ページの最初にこのように書き込むとアルファベットのページ名でもブラウザ上ではTITLE:の後に書き込んだ文字が表示される。

ページ名を付けるときの注意点

• ページ名は、半角英数字で8文字以上、日本語の場合、4文字以上必要です。それ以下だと、表示にエラーが起こったり、問題が起こる可能性があります。スペースなども使わないこと！

お気に入りボタンの設置

&addfavorite(サイトの名前,button){お気に入りに登録};

プレビューでは表示されないので更新してからしか確認できません。

戻るボタンの作り方

• 次のHTMLタグを使う。

  <input type="button" value="　戻る　" onclick="history.back()" />

• 上のHTMLタグをQHMの編集の画面のHTMLをクリックしてその中に入れる

  #html{{
  <input type="button" value="　戻る　" onclick="history.back()" />
  }}

• こうなる↓

• センターに寄せるには

#html{{
<div align="center">
<input type="button" value="　戻る　" onclick="history.back()" />
</div>
}}

• 右側に寄せるには、"center"を"right"に変える。

  #html{{
  <div align="right">
  <input type="button" value="　戻る　" onclick="history.back()" />
  </div>
  }}

• テキストだけの戻るボタン

  &modoru(戻る);

  戻る

文字をスクロールさせる

#html{{
<marquee>この部分がスクロールします</marquee>
}}

この部分がスクロールします

ページのトップへ戻る方法

• ６パートデザインの場合

  [[トップへ>#navigator]] or [[ページのトップへ>#navigator]]

  ※　実際には、ナビが一番上になるように表示されます。

• キラーページの場合
  • キラーページ（セールスページ）では、ナビがないため上のおまじないは使用できないので下記のように指定する。

    [[トップ>#content]]

  • QHMのバージョンが3．65以降の場合は次のように書く

    [[トップ>#wrapper]]

ページ名と同じ言葉に自動リンク

「作成したページ名」と同じ単語が出てきた時に、自動的にそのページへリンクを行ないます。
全角文字で4文字以上・半角文字で8文字以上の場合のみです。それ以下の場合は、手動リンクでリンクを行う必要があります。

アンカーへのリンクのかけ方

QHMでは、大見出の頭に*を 中見出しの頭に**を 小見出しの頭***を付けるのだけど、これらをつけて編集し、ページの更新ボタンを押すと、その後の編集ページには、各々の見出しの尻尾のところに変な呪文が現われます。下の場合だと#w7e62842という横文字です。
これが、アンカーに相当します。したがって、下記の例のように、通常通りのリンクのやり方で編集を行い、リンク先に「アンカー」の呪文を記述します。

• ページ内へのリンクの飛ばし方

  [[こちらへ>#w7e62842]]

• 違うページへのリンクの飛ばし方（アンカーの前にページ名を付ける）

  [[こちらへ>ページ名#w7e62842]]

見出しを使っていない場所へアンカーをつけてリンクの飛ばす

• アンカー名は、英数字のみしか使えません。日本語、スペースは使えません。なぜなら、URLの一部だからです。なので（任意の名前）は、半角英数字のみで書くこと！

• まず、移動させたい場所に次のように書いておく

  &aname(任意の名前);　

• リンクを貼るところに次のように書く。

  [[こちらへ>ページ名#任意の名前]]

強制的にリンクを「外部ウインドウで開かない」ようにする

#nowindowと付けると、可能。

• キラーページから他のページに戻る時、外部ウインドーで開いてしまうのを内部ウインドーで開くようにする場合。
  • ページの一番上に【#nowindow】と書く。（そのページの全部のリンクに対応）
  • リンクを作ってページ名の後に#nowindowと続けて書く。（１つのリンクに対応）

    [[トップページへ>FrontPage#nowindow]]

強制的にリンクを「外部ウインドーで開く」ようにする

• GoogleMapを設置したページでは外部リンクが内部リンクでしか開かない…

• サイト全体で、外部サイトを別ウィンドウで開く方法は、専用のプログラム（Javascript）を使用しています。また、Google Mapの設置・表示にも専用のプログラム（Javascript）を使用しています。

• Google Mapを設置したページ内では、優先してGoogle Map Javascriptが読み込まれ、結果として、別ウィンドウで開く為のJavascriptが動作しない事が原因で別ウィンドウで開かないものと思われます。
  （※Google Mapを設置していないページでは、正常に外部サイトが別ウィンドウで表示されると思います。）

• Google Mapを設置したページ内では、明示的にothewin機能で、外部ウィンドウで開くように指定してください。

• どうしても、別ウインドウにしたい！という時に、便利に使ってください。

※otherwin = other(他) win(Window)のことです

&otherwin(ここにページ名 or URL){表示文字};

内部リンクを別ウインドーで開くようにする

&otherwin(ここにページ名 or URL){表示文字};

幅広コメント入力欄

• #comment3プラグインは、QHMユーザーフォーラムで桜さんの提案で、雪だるまさんがコードの書き換えをして、( ´∀｀)人(´∀｀ )ﾅｶｰﾏさんがご自分のサイトで配布、という経過で出来た物です。
• D++QHMcooldesignLabo様のサイトで#comment3のプラグインをダウンロードして、FTPソフトでアップロード。そしてサイトのページの編集画面で次のように書くだけです。

  #comment3

• このようにコメント欄が幅広くなり書き込みがしやすくなりました。
• Hey nice blog, just looking around some blogs, seems a pretty nice platform you are using. Im currently using Wordpress for a few of my sites but looking to change one of them over to a platform similar to yours as a trial run. Anything in particular you would recommend about it?
  [url=http://www.sdsf.ch/listinfo.php?pid=25]jacke moncler herren[/url] -- jacke moncler herren 2014-12-29 (月) 21:25:01

お名前: 認証コードを入力してください(8816) Every day, websites like yunahana.com fail to capture valuable opportunities to attract visitors. Don’t let that happen to you! Our AI-driven traffic system is specifically designed to bring more visibility and traffic to your site. Try it for free with a free trial of 4,000 visitors delivered directly to your site. Once you test the benefits, you can scale up to receive as many as 350,000 visitors each month. Discover how easy it is to unlock your website’s true potential. Get more information here: https://shorten.is/C3fg2

最新の更新表示のおまじない

#recent(5)

• （）の中の数字は表示する件数

検索ボックス（サイト内をキーワード検索する）

#search

と書く。

AND検索 OR検索

メニュー画面には２段で表示される。

検索ボックス（メニュー部分に検索ボックスを表示）

#search_menu

検索ボックスの設置で【検索】の表示を【サイト内検索】に変更する方法。

• 【/plugin】にある【search_menu.inc.php】を編集する。
  • 旧バージョン

    17行目辺りにある【<h2>検索</h2>】を【<h2>サイト内検索</h2>】と変更してアップロードする。

  • 新しいバージョン

    18行目辺りにある【<h2>{$qm->m['plg_search_menu']['hdr']}</h2>】⇒【<h2>サイト内検索</h2>】と変更する。

    ※変更になったバージョンははっきり分かりませんのでファイルを開いて確認してください。

Google検索機能の設置

• http://の後のドメインを（）の中に記述する

  #gsearch(blog.yunahana.com)

  　　　このようになる　↓

  WWW を検索 blog.yunahana.com 内を検索