HAIK(Quick Homepage Maker)で簡単ホームページ作成
これを知ると編集が便利
編集ツール
eyecatch画像・高さ・文字色・表示位置の変更
eyecatchというのは、ページのタイトルが書いてあって、最初に大きく表れる、このページのペンキ画像のような表示のことです。
ここの画像は、HAIKでは、「テーマ編集」から指定できますが、この場合、高さの指定ができず、文字色は白と黒からしか選べません。
ページによってこの画像を変えたり、サブキャッチを変えたり、背景表示の高さを変えたり、文字の色・位置を変えたりというようなことが #eyecatch を使うと色々できるようになります。
パソコンと携帯とで、表示の高さを変えるようなことも可能です。これには詳細な使い方のマニュアルがあるので、そちらを見てください。
このホームページの星の背景は、次の様に記述しています。これを例えば「フッタ」の中に入れると、全ページに適用されます。
#eyecatch(icon_source/star.gif,color=lightskyblue,repeat){{
!Quick Homepage Makerで簡単ホームページ作成
}}
このように、小さい画像を何回も繰り返して表示する、背景画のリピートということもできています。
画像を指定しないと、「テーマ編集」の所で指定した画像が使われるようです。
編集画面の「パーツ>アイキャッチ」が、簡易入力です。
使用例を示すため、このページだけ、このアイキャッチ画像を変えて、サブタイトルも入れてみました。それには、下のような記述をページのどこかに入れます。
同様の記述が「フッタ」の中にもあると、そちらが優先されてしまって反映されないので、こちらには「force」オプションを追加して、このページの指定の方を優先させます。
#eyecatch(icon_source/paint.jpg,color=#fff,force){{
!Quick Homepage Makerで簡単ホームページ作成
これを知ると編集が便利
}}
(上のソースコードは、ホームページで表示するために、全角のスペースを入れているので、そのままコピーしてもうまくは行きません。このホームページのｿｰｽｺｰﾄﾞを使う場合は、全角スペースを半角スペースに全部置換してから使ってください。)
ページによってスキンを変える
ページごとに使用するスキンを変更することが出来ます。HAIKには、標準でinclude.inc.phpというプラグインが組み込まれていました。下のような記述を、ページのどこかでします。
#include_skin(org_toochan)
skin/hokukenstyle の下にある org_toochan というスキンを適用します。これで、『以前のTopページ』のように、本体とは違うスキンを適用できます。
独自スタイルの適用
#style2プラグインを使うことで、cssに定義したスタイルを適用する記述ができます。HAIKには、標準でこのプラグインが入っています。
下のように書くと、<div class="***"><p>で囲まれた出力になるようです
この中では、HAIKのタグ(おまじない)も使うことが出来るので、使い方次第で、面白いことが色々できそうです。
枠の挿入
#style2(class=bluebox){{
ここに表示したい内容を書く
}}
別に下のような bluebox というクラスを指定しておくことで、このような枠を表示しています。
cssを使えば、お誂えの枠を使わなくても、思い通りの枠が自由自在に作れます。
.bluebox{
border:solid 1px deepskyblue;
/* background-color:transparent;*/
max-width:80%;
text-align:left;
padding: 0px 10px 0px 10px;
margin: 0 auto;
background: #FFFFEE;
}
cssの挿入については、別のページを見てください。
マーカーの部分を消してしまって、background-colorの指定を生かすと、背景色を自由に設定できます。
HAIKでは、枠はやはり、#bs_box を使う方が正当なのでしょうね。HAIKの新機能をよく調べもせずに、QHM時代からの少ない知識の中で行き当たりばったりにやっているので、こんな方法をついつい考えてもしまうのですが、本当は、HAIKに標準で新たに備わった機能の方を先に、まずはよく研究しておくべきなのかもしれません。
でも、#bs_box の横幅調整は、どうもよく分からないところがありますし、 class の指定もできるように書いてはあるのですが、少なくとも、ここで指定しているような自在な枠の指定まではできないみたいです。
枠は、使うデザインを決めたらさほど種類を使うわけではないので、ここでやったような方法で、自分好みの枠を設定して使いまわすのも一つの方法です。
画像の回り込み
別にこのプラグインを使わなくても、画像を回り込ませることはできるのでしょうが、スタイルを使っても、画像を簡単に回り込ませることができるようにもなります。
回り込ませた画像をクリックすると、大きな画像がページで開きます。
#style2(class=right){{
&otherwin(https://www.neko01.com/pc/haik/data/photo/sample/yakei-m.jpg){&ref2(https://www.neko01.com/pc/haik/data/photo/sample/yakei-ss.jpg,nolink,世界貿易センタービルから見た東京タワー );};
}}
と指定しているだけです。
cssはこんな感じです。
.right{
float:right;
}
.left{
float:left;
}
もっとも、画像の回り込みについては、rakutenプラグインを使う方が、簡単で高機能です。
ブロックの幅指定なし、中央寄せ
幅指定をせずに、<div>ブロックを使って、中央寄せすることが出来ます。
上の例では、要素全体が上の幅広の写真の幅で中央に寄せられ、下のカラーサンプルを示す幅のない写真は、要素全体の枠の内で左寄せで表示されています。
文字を長々と入れてしまうと、全体幅になってしまうので、写真など幅の決まっているものを全体中央に寄せて、縦に並べた要素は、寄せられた枠の中で左右寄せにするような使い方です。
#style2(class=center){{
&attachref(https://www.neko01.com/pc/haik/image/hokuken/toolbox.png, nolink , 編集メニュー);
&attachref(https://www.neko01.com/pc/haik/image/hokuken/color.png,nolink , 編集メニュー色);
}}
cssは、下の通りです。
.center{
display: table;
margin:0 auto;
}
ちなみに、一昔前のQHMの編集画面は、このような表示でした。
段組みにも使えるらしい
この#style2プラグインは、段組みにも使えるのだそうです。私はやったことがないので、検索して、やり方を調べてください。
YouTubeの動画を読み込む
HAIKでのYouTube表示はちょっと面倒くさい
HAIKになってプラグインが使えなくなったので、YouTubeの動画をホームページ内に読み込むのは、ちょっと面倒くさくなりました。
YouTubeの埋め込みたい動画の下にある、「共有>埋め込む」から、「プレーヤーのコントロール バーを表示する」にチェックを入れて、ソースコードをコピーします。
それを、#htmlを使って、ページの中に埋め込みます。
#html{{
<iframe width="530" height="315" src="https://www.youtube.com/embed/a8P4BY38Aow" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
}}
これでは、560px×315pxの大表示になってしまうので、この幅と高さの数字を、比率を保って、小さくします。うまく比率を指定しないと、この数値は無視されてしまうようです。
align="right" などを追加すると、左右寄せはできるものの、文字の回り込みはできませんでした。
HAIKでのYouTube表示も、文字の回り込みを考えないのならここまでなので、さほど大した労力ではありません。
回り込みをさせようとすると、<iframe> を、さらに <div> で囲んでも、うまくいきません。仕方がないので、表示を小さくしたYouTube動画だけを表示するhtmlファイルを別に作って、サーバーにアップロードし、それをもう一度<iframe> を使って読み込みました。
#html{{
<iframe align="right" width="270" height="158" scrolling=no frameborder=0 src="https://www.neko01.com/pc/haik/docu/hamehameha.html">
</iframe>
}}
iphoneでは、全画面表示になる
ここまでやっても、androidなら携帯でもうまく画面内で再生してくれるのに、なぜかiphoneの時だけ全画面表示に切り替わってしまいます。
これを解消するには、YouTube動画だけを表示するhtmlファイル作成時、YouTube読み込み設定で、ファイル名の後に、?playsinline=1 をそのまま続けて書いて、ファイル名と一緒に、" "でくくってやればいいのでした。
しかしここまでして、『みなみのしまのハメハメハ大王』を表示させたいかな。
#u2bプラグインを使う(HAIKでは使えない)
QHMなら、このように書くだけでした。プラグインは無料版でもインストール済みです。
ただ、YouTubeの仕様変更のためか、令和元年7月現在、HAIKでは使えません。
#u2b(a8P4BY38Aow)
括弧内は、=以降のYouTubeのIDです
http://www.youtube.com/watch?v= a8P4BY38Aow
が元のURLです。
たとえば右のリンクなら、
#u2b(a8P4BY38Aow,small,align=right)
と指定しています。
パラメーターの指定は、プラグインの解説を見てください。パラメーターはコンマ（,）で区切ります。
簡易投票機能
HAIK、Open Quick Homepage Makerに組み込みのプラグインは、voteです。有料版には、vote2が既に組み込まれています。
無料版をご使用の方も、vote2を組み込むことをお勧めします。
このホームページのお役立ち度は？ 投票 標準のvote使用
この機能の使い方は、本家のPukiWiki 1.4のプラグインマニュアルを見てください。下のような投票ができます。
#vote(非常に役立つ[0],ほどほど役立つ[0],まあまあそれなり[0],それほどでも[0],あるだけ無駄[0])
HAIKで、上のようなカラフルな表示にするためには、少々改造が必要です。
このホームページのお役立ち度は？ 投票 vote2使用
上の標準で組み込まれているものは、何回でも連続投票ができてしまいます。このvote2を使ったものは、連続投票時の表示の仕方はちょっと不細工ですが、連続投票はできません。
vote2.inc.phpを/pluginにアップロードしましょう。
上のようなものの他、インライン型を使って、このようなこともできます。
| このHPのお役立ち度 | HAIKの情報公開度 | ||
|---|---|---|---|
| 非常に役立つ | 2675 | もう十分 | 22 |
| ほどほど役立つ | 781 | よく公開している | 8 |
| まあまあそれなり | 477 | まあまあこんなもの | 5 |
| それほどでも | 667 | 不十分 | 8 |
| あるだけ無駄 | 418 | 出し惜しみするな | 2 |
適当な項目をクリックして投票してください。
令和元年8月HAIKについては、数字を初期化しました。
ソースはこうやっています。
|LEFT:120|RIGHT:50|LEFT:120|RIGHT:50|c
|>|CENTER:~このHPのお役立ち度|>|CENTER:~HAIKの情報公開度|
|&vote2(非常に役立つ,this=1r,nonumber);|&vote2([0],nolabel);|&vote2(もう十分,this=1r,nonumber);|&vote2([0],nolabel);|
|&vote2(ほどほど役立つ ,this=1r,nonumber);|&vote2([0],nolabel);|&vote2(よく公開している,this=1r,nonumber);| 0 |
|&vote2(まあまあそれなり,this=1r,nonumber);|&vote2([0],nolabel);|&vote2(まあまあこんなもの,this=1r,nonumber);| 0 |
|&vote2(それほどでも,this=1r,nonumber);|&vote2([0],nolabel);|&vote2(不十分,this=1r,nonumber);|&vote2([0],nolabel);|
|&vote2(あるだけ無駄,this=1r,nonumber);|&vote2([0],nolabel);|&vote2(出し惜しみするな,this=1r,nonumber);|&vote2([0],nolabel);|
こうなってくると、ちょっと訳が分からないですね。
| Open-QHMの情報公開度(保存ﾃﾞｰﾀ) | |
|---|---|
| もう十分 | 683 |
| よく公開している | 430 |
| まあまあこんなもの | 438 |
| 不十分 | 563 |
| 出し惜しみするな | 395 |
簡単コメント機能
#coment2を使う
編集メニュの「コメント」を押します。
#comment2
が挿入されます。
簡単ですね。以前のものに比べて認証コード付きになっているので、使い物になりそうです。
- こんなコメント欄です。 -- Toochan 2007-07-28 (土) 19:51:28
- ああああ -- あああ 2008-04-09 (水) 22:53:03
- 認証コード付きになったので、役に立ちそうですね。 -- Toochan 2009-03-13 (金) 19:48:04
- どうだ -- で 2009-06-15 (月) 20:53:00
- aaaa -- aaa 2009-06-30 (火) 13:46:30
- bbbbbbbbb -- bbbb 2009-06-30 (火) 14:03:05
- ほんまかいな -- 富樫 2009-09-23 (水) 22:29:34
- 便利そう -- やまやま 2010-10-09 (土) 19:43:57
- 使えますか？ -- ｐです 2013-01-01 (火) 12:46:12
#pcomentを使う
こちらの方が高機能です。が、認証コードに対応していないので、coment2の方が使いやすいかもしれません。QHM Ver4では、無料版にも組み込まれています。
使い方は、本家のPukiWiki 1.4のプラグインマニュアルを見てください。下のようなコメント欄になります。
#pcomment(,,below ,reply)
最新の10件を表示しています。 コメントページを参照
簡易掲示板
#articleを使う場合
この機能の使い方も、本家のPukiWiki 1.4のプラグインマニュアルを見てください。
#article([掲示板名])
QHMの簡易掲示板機能というのはこれだったようです。でも、知らない間に編集画面から、挿入ボタンが消えてしまっていました。たぶん使い物にならなかったのでしょう
以前は、編集画面で「BBS」のアイコンを押しました。
私はこれで掲示板を作ろうという気にはどうもなれません。
#bbsを使う場合
Pukiwikiで２ちゃんねるっぽい掲示板を動かすプラグインです。
記事の削除が、管理画面からできず、スパム対策が全くないので、荒らしやスパムがあると全く実用にはなりません。掲示板の体裁としてはとりあえず使えそうでしたが、ここの詳細な設置解説は削除しました。
改造版YY-BOARDを使おう
色々使える掲示板を探してみましたが、スパム対策がきちんとできながら、なおかつ使いやすく、デザインがシンプルな掲示板というのは本当に無いですね。
シェアウエアーも含めて、もっといいものがフリーであるとうれしいのですが。
今回上のbbsでは話にならないので、改造版YY-BOARDに掲示板を変更しました。
これはKENT-WEBで配布されているCGIに、issoさんがスパム対策を施したものです。
これ、結構良さそうです。
メールフォーム、商品注文フォーム、自動返信メールの設置
北摂情報学研究所では、フォームズを推奨しているようですね。これのタグをHTMLを使って貼り付けます。
ＳＳＬ通信で保護されたフォーム、注文フォーム、自動返信メールは、有料のサービスになります。
Flashを表示
以下のように、FlashファイルがあるURLを指定することで、簡単にFlashを表示できます。
#flash(https://www.neko01.com/pc/haik/data/clock_bar/clock_bar.swf , 500x100 , bgcolor="#99ccff")
| |
プラグインの使い方の説明を引用します。
Usage:
書式
#flash(flashムービーファイル,幅x高さ[,オプション=["]値["]]...)
引数,オプション : 意味 : デフォルト
ファイル名 :必須
幅x高さ :必須
quality = :品質 : high
bgcolor ＝ :背景色 : なし
classid = :クラスID :D27CDB6E-AE6D-11cf-96B8-444553540000
version = :バージョン :6,0,0,0
align = :アライン :center
flashvars= :FlashVars Flashに引数として渡すもの "変数名=値"( "" で囲います): なし
style = :個別スタイル : なし