Nekoの早わかり一口編集情報

HAIK(Quick Homepage Maker)のオリジナル情報を手に入れよう

　何をするにしても、オリジナル情報は大切です。
　私は、オリジナルをないがしろにして、もっと安易にこのページにすがろうとする人を相手にする気はないので、自分で調べればすぐに分かる情報をここでもう一度解説する気はありません。
　オリジナル情報を見ても、疑問に思いやすい点、分かりにくい点などについてこのホームページで解説していこうと思います。
　まずは情報源一覧を、きちんと見ておいてくださいね。

　では、「Neko」の一口編集情報です。

HP作成ソフトは出来の悪いワープロのようなもの

　HP作成ソフトは出来の悪いワープロのようなものです。ワープロだったら、操作がすぐに画面に反映されて、ワープロの中でデータがどのように保存されているのかといったことを、ユーザーは全く意識しなくても済みます。
　ところがHAIKやQHMだったら、例えば、

というように書いてあったら、「2番目の見出しが表示される」というように、作成者に、保存するときのデータ構造を意識させるような作りになっています。
　ですからHAIKも含めて、この制御用のタグ(QHMでいうところの「おまじない」)を覚えていくことが、ホームページ作りには欠かせないということになります。
　そして、HP作成ソフトの使い易さは、結局、この制御用のタグを、いかに簡単に、お手軽に入力させるかにかかっています。
　その点、HAIKは、他のHTMLを知らないと使いこなせないHP作成ソフトとは違って、専用の簡単なタグを覚えるだけで、一通りの見栄えのするホームページが出来てしまうというお手軽さがあります。
　同じことを、HTMLを扱うという立場から、別ページにももうちょと詳しく書いています。
　

編集画面の簡易入力ボタン

　HAIKの編集画面には、下に簡易入力ボタンがあります。

　これの上にカーソルを置くと、そのボタンがどの機能を実現するためのものかの表示が出てきます。（上の画面ではなく、編集画面でやってみてくださいね。）それを確認した上で、これらのボタンをすべて確かめてみましょう。よく使う機能がここに要領よくまとめられているので、このボタンの使い方を覚えると入力がずいぶん楽になります。
　HAIKになって、編集ボタンの数はとても少なくなりましたが、それぞれのボタンの機能は逆に増えているので、今までQHMの編集ボタンでできたようなことは、HAIKの編集ボタンでもたいていできます。複雑なことでも、「パーツ」から選べる要素がかなり多くなりました。
　また、入力画面にない場合でも、タグ（おまじない）を直接入力すれば使える機能もたくさんあります。（QHM時代のもので、使えなくなったタグもいくらかあります。）
　どのようなタグがあるかは、マニュアルの他、例えば「qhm　おまじない　文字サイズ」ぐらいでネットを検索して、他のホームページを当たってみるのもお手軽です。

複合文字装飾

　文字装飾をしたい場合は、まず「装飾」ボタンです。

「太字（b）・斜線（i）・下線（u）・文字色・背景色・文字サイズ」を全部指定してみました。
　例えば、太字・下線・背景色だけを指定した場合は、

のようになっています。
　マーカーをしても、白黒印刷をすると、区別が全く分からなくなるので、私はアンダーラインと併用して使うことが多いです。

　このような入力になるので、b･u･iは省略できるようです。
　QHMの時代には、編集画面一番右、マーカーより右側にあるdecoのボタンを押して必要項目を指定しました。

たとえば、マーカーなら

　HAIKにはQHM時代のような、マーカーのボタンはありません。
　しかし、「装飾」で、「太字・下線・背景色：yellow」を入力すると、ご覧の様に下線付き、太字マーカーになります。

QHM時代のタグもそのまま使える

　上の &deco を使った指定の他、同じことをするのに、下のような単機能のタグもあります。

文字サイズの変更

　　「数値」のところにピクセル単位の数字だけ入れます
　　「縮小したい文字列」の所に文字列を入れます
　QHMでは、編集ボタンの「AA」というのがこのタグの簡易入力でした。

半角指定の囲みとの併用はうまく動作しませんでした。

この囲みはstyleを使ったものです。

アンダーライン

　QHMの編集メニューの下に出てくる赤の太波線アンダーラインは、HAIKではなくなりました。
　通常のアンダーラインを付けるには、上の複合文字装飾の方法で、アンダーラインだけを指定する他、単独でアンダーラインだけを指定する方法もあります。

の様に「&underline(　　);」を使います。
「合計　5,200円」のように、半角のコンマが入るとうまく働かないのでそういう場合は、下のUnicodeコードの使い方を応用して

の様にします。

マークの表示

　チェックマークは

とします。
　QHMでは、編集ボタンの が簡易入力でした。

Newマーク

　&new を使うと、ページへのリンクで、標準では１日以内の場合に New! を、5日以内の場合には New を、追加して表示できます。
　6日以上たつと、New は付加されなくなります。

のように指定します。
　ファイル名のリンクの後ろに、表示期間だけNew が表示されるのが普通ですが、 nolink を指定すると、Newだけが黒っぽい色で表示され、期間を過ぎると何も表示されなくなります。

の様に表示したい場合は、ちょっとマニアックに

とします。
　使い方の説明は、PukiWiki/プラグイン/1.4

特殊な文字の入力

「˜」（チルダ）を使う

　OpenQHMの制御に使われるような文字を画面上に出したい場合、たとえば

の様に書いてしまうと、制御記号（タグ）と解釈されてしまうのでうまくいきません。そういう場合は

というように、制御記号と認識される字の前に「˜」（チルダ）を入れます。

必要に応じてUnicodeコードを使おう

　同じことをするのに、

というように、最初の一文字だけをUnicodeコードにしてしまえば、制御記号とは解釈されません。
　整形ルールの数値参照文字の入力を参考にしてくださいね。
　どの数値になるかは、コード表を検索して調べましょう。

　単に、Quick Homepage Makerの制御に使われる記号（亀田さんが言うところの「おまじない」）、をきちんと画面に表示するだけなら、「~」（チルダ）を使う方がはるかに簡単です。
　ですが、この便利な方法も今実験してみると、「˜// 」「˜<」「˜#」はうまくいきましたが、「&」は、どうもうまくいきません。
　たとえば、「˜&check;」と書くと、

のような表示になってしまいます。
　このような場合は上のUnicodeコードを使って書くしかないようですね。
　またこの、Unicodeコードを使って書く方法は、キーボードから直接入力できない文字やJIS第3水準・第4水準の文字などの表示にも使用できます。

半角スペースを挿入する枠を使っても

#html{{
}}

のようにそのまま書いても、半角スペースを使って表示する枠では、書いたままの形で出力できるようです。
　しかし、逆に言うと、これは半角スペースを使った枠内では、Open-QHMのタグはタグとしては一切解釈されないということですから、表記の統一性を考えれば、半角スペースを使った枠は使いにくいでしょう。

classを指定した枠の入力

　半角スペースを使った枠の中では、Quick Homepage Makerのタグがそのまま表示されてしまい、タグとして機能しないので、自然とclassを指定したタグをよく使うことになります。これの簡易入力ボタンが、「パーツ」の中にある「枠」です。

別ページの特定部分への移動

　ホームページ内別ページのある特定部分に移動するには、たとえば他ページの「Google Adsenceの導入」に移動するような場合は、

とします。
　これは、「早わかり操作法/アフィリエイトリンクの貼り方」のページの、「#cc9b14ce」というIDの位置にリンクするということです。
　ページのタイトルを入力した際、下の[#cc9b14ce]

の様なものが勝手についてきて、私は何が加えられているのか訳が分からず、消していたのですが、これがこのページのこの位置に飛んでくるときのID(アンカー)になっていたのですねえ。かしこい！

他人のホームページの特定部分に飛んでいくリンク

　これを応用すると、他の人が作ったホームページの特定部分にもきちんと飛んでいくリンクを指定することができます。
　たとえば私のホームページなら、それをブラウザで開いて、ブラウザの「表示」プルダウンメニューから「ソース（の表示）」を選択します。
　これでそのページのソースが表示されますから、飛ばせたい記事のあたりを探して、下のようなIDが有ればそれを指定すればよいわけです。

　Quick Homepage Makerなら、見出しごとにアンカーが自動挿入されますし、他のものでも、ページ内にそこに飛んでいくリンクが貼ってある場合は、必ずそこにIDがあるはずです。

自分でIDを設定する

　Quick Homepage Makerの場合、IDは見出しごとに自動挿入されるので、自分で設定する必要はほとんど無いはずです。
　それでも、自分で設定したい場合は、リンクを参考にしてください。

　ただし、IDは一つのページに、同じものを2カ所は設置できません。必ず、名前を変えてください。

リンクを別ページで開く

　Quick Homepage Makerでは、自分のホームページへのリンクは、普通同じウインドーで開きます。これを、別ページとして開くには、

改行

強制的な改行

　入力画面で改行すれば、ホームページの改行に反映するようになっています。
　しかし、編集画面で何行も改行を入れた場合には、表示されるときに、所定の改行数に縮められてしまうので、表示に反映されません。
　このようなときに強制的に改行させるには、簡易編集ボタンの改行マークを押して、

を明示的に入れます。



　２回入れると、このように間隔をあけることができます。
　また次の「表の中での改行」のような場合も、「&br;」で改行を指示してやる必要があります。

表の中での改行

　たとえば

画像の回り込み解除

　画像などの回り込みは、普通画像が終わればそこから元の位置に文章が戻るので特別な指定は必要ありません。
　しかし、リンク記事の様に、表示したい画像が文字部分より高く、次にすぐタイトルや枠が続く場合には、何も指定をしないと、次の部分に、画像がはみ出して表示されてしまいます。
　このような時には、回り込みを解除するとこのような不都合はなくなります。
　回り込みを解除したいところでしたいところで、

と、明示的に指定します。
　この記号は、ブロック要素なので、必ず行頭で指定してください。

前・後ページへのリンク

　このページの上下に張ってある前・後ページへのリンクは、次のように書いています。

　全部のページに内容を変えて貼って行くのは、結構面倒くさいです。でも、このあたりは、自動化を考えるよりも、手動の方が手っ取り早いでしょう。
　パンくずリストについては、別項で説明しました。

表の改行幅を広くする　(QHM)

　QHMの標準の設定では、Internet Explorerで表示すると、表中の改行幅が1.0emになり、フォントの大きさも本文の他の部分の設定通りにはならないようです。(Opelaは、表だけこのように表示が変わるということはありません。）
　ちょっとした記述ならこれでもよいでしょうが、長い記述を表中に入れようとすると、これではちょっと行と行との間が詰まりすぎて感じられます。（あなたの標準のQHMで作った表と、すぐ上の表とを見比べてみてくださいね。）
　この改行幅とフォントの大きさを変えるには、main.css(以前はlayout.css)の下の記述部分に

の２文を加えます。「1.3em」の数字を変えることで、改行幅を自由に調節できます。
　私の経験上、表の中は、普通の文中よりちょっと改行幅を少なめにしておいた方が見やすいように思います。
　Quick Homepage Makerは、本文の改行幅が1.5emで初期設定されています。

　なお、layout.cssの変更方法は、「ﾃﾞｻﾞｲﾝ変更(QHM)」を参考にしてください。
　(上のソースコードは、ホームページで表示するために、全角のスペースを入れているので、そのままコピーしてもうまくは行きません。このホームページのｿｰｽｺｰﾄﾞを使う場合は、全角スペースを半角スペースに全部置換してから使ってください。)

再認証で内容が保存されなかった場合（とっても古いQHM）

　長いこと編集していていざ保存しようとすると、時間切れで再認証を要求されることがあります。それで再認証されて元の編集画面の保存ができていればいいのですが、そのページに行ってみても編集前の内容のまんま。本当に脱力感に襲われます。(新しいQuick Homepage Makerでは、このような認証を行っても、きちんと保存できるようにやっとなりました。)

　これって、プログラムの不具合というか、うまくできていない点なのでしょうが、こういうときはあわてず騒がず、再認証後、ブラウザの戻る（←）ボタンを押して、最後に編集したページを出して、右クリックの後、「全部選択」→「コピー」して、内容をパソコン内に保存しておきます。（慣れないうちは、この内容をエディタを開いて、ファイルにも保存しておきましょう。）それからもう一度認証してから、編集していたページを開き、編集画面から、「右クリック→すべてクリア」で、そこに表示されている内容を全て消してから、右クリックで「貼り付け」を押すと、パソコン内に保存されていたページが編集ページに貼り付けられます。それを保存して、「やれやれ、データが消えなくてよかった」ということになります。
　編集中のデータを消すのは、慣れないうちは間違いが起こることも多いでしょうから、エディタを使ってでも、必ず消す前に別ファイルに保存するようにしておく方が、安全でしょう。

〔パソコンのコピーという用語〕
　ワープロなどと同じですが、パソコンの「コピー」という用語は、パソコンになじみのない人には誤解を招きやすい言葉です。
　コピーしたい内容を選択して、この「コピー」を選んでも、画面上は何も変わりません。この「コピー」という用語は、実は範囲指定した内容を、パソコンの中に一時コピーしておくという意味なのです。それをした後で今度は「貼り付け」というのを押すと、記憶していた内容がカーソル位置に貼り付けられます。
　ですから内容を移動するときには、「切り取り」して「貼り付け」、同じ内容をコピーするときには、「コピー」して「貼り付け」と二段階の操作が必要です。
　昔のワープロ専用機などでは一つの操作でできたものが、Windowsの世の中になって、なじみのない人にはわかりにくくなりました。

« 情報源一覧 | Top | 編集ツール »