Top > デザイン変更(HAIK)

HAIKのデザイン

標準添付のスキンで結構使える

 HAIKになって、有料版は、毎年バカ高い年会費を納め続けなければならなくなったので、HAIKを使い続けるには、無料版を使うしかなくなりました。
 しかし、無料版に標準添付されるhaik_seedというスキンは、シンプルで結構嫌みのないデザインなので、このままで使っても、割合納得のできるHPが出来上がるのではないでしょうか。
 ただ、基本パーツの部分で、従来のQHMより使いにくくなった部分もありますので、できれば最低限の改造はした方が良いかもしれません。
 例えば、HAIKの表は、見出し部分の色の違いがなく、どのような内容の量であっても、幅が表示幅の100%になってしまいます。
 それと、右のメニューの見出しが、**も***も、字下げがないので、とっても見にくかったりもします。
 このような所をちょっと改造すれば、ずいぶんと使い勝手が変わってくるでしょう。

HAIKの作りはやはり先進的だ

 これまで20年近くホームページを作ってきて、「ホームぺージとはこんなデザインだ」という古い先入観があったことに今更ながら気がつきました。
 初め、KANSOやHAIKのデザインを、自分の古いホームページ像に合うように、改造しかけていたのですが、やってみると、KANSOやHAIKの今のデザインをそのまま活かす方がよほど魅力的であることが分かりました。
 以前のTopページのデザインと、今のこのホームページのデザインとでは、ほぼ同じ作りなのに、やはりこちらの方がよほど新しく感じます。
 この20年の間に、ホームページのデザインもとても進化していて、HAIKもそれに合わせて確実に進化してきたのだなということが、よく分かります。

デザインの変更  -main.cssの編集-(HAIK用)

main.cssは、何と8,000行近くある

 QHMのスタイルシートは、main.css・color.css・layout.css・main_print.css・plugin.cssなどたくさんあったのですが、HAIKでは、それらがほぼmain.cssに集約されています。
 ところがこのmain.cssは、配布時圧縮されている上に、7,900行近い長さがあって、何が何やらさっぱりわかりません。これを改造していかなければならないので、HAIKの改造は、QHMどころではなく、大変です。

まずは読みやすいファイルに書き換える。

 HAIKのmain.cssファイルは、改行やスペースを全部省略して圧縮してあるので、このままではとても読めたものではありません。
 ネットに、この圧縮したHTMLを、読みやすやすくしてくれるツールがいくらでもあるので、それでまず読めるmain.cssに書き換えます。

「HTML 圧縮 読みやすく」ぐらいで検索を掛けると、それらしいのが色々と見つかります。

参考になる賢い先人のホームページ

 一歩先を行く haikユーザのためのTipsに、HAIKのcssを改造する上での、基本的な考え方が詳細に説明されています。
 元のスタイルシートはなるべく変更せず、追加部分のスタイルだけを上書きするスタイルを別に設定するほうが、HAIKのバージョンアップの際に何かとトラブルがないと思いますので、私も、#beforescriptのプラグインを使うことにします。
 調整の段階では、すべての変更部分をフッターにこれで書いて、ある程度改造内容が煮詰まってきたら、新たに追加用のスタイルを別ファイルにして、保存しておく方針です。
 #beforescriptプラグインは、無料版のHAIKにも標準添付されています。

HAIKのテーマカラー

 HAIKは6種類のテーマカラーの中から好きな色を選べるようになっています。
 このどれを選ぶかによって、css(スタイルシート)も別の場所で指定する様になっています。
 したがって、HAIKのcssは、同じ要素に対するスタイル指定が、6種類ずつ定義されています。実際に自分が使うテーマカラーは1種類に限定されますから、どれを基本に使うかを決めたら、その色に関係する部分だけを書き換えます。
 当サイトは、haik_seedのテーマカラーの中から茶を選択しました。サンプルのCSSソース内に .haik-palette-brown が出てきたら、自分で選択しているテーマカラーに置き換えてください。
 書き換える時には、エディタの一括置換が便利です。

テーマカラークラス名
水色.haik-palette-cyan
.haik-palette-blue
.haik-palette-red
オレンジ.haik-palette-orange
茶色.haik-palette-brown
.haik-palette-green

#beforescriptの使い方

 以下のCSSをヘッダかフッター内に書き込みます。これで全ページに適用されます。
 メニューに入れてもほぼ同じですが、その場合、子ページを作ってそこに別メニューを適用していると、当然のことながら、メインメニューに書いた記述は反映されません。
 特定のページだけに適用したい場合は、そのページの編集画面に以下のスクリプトを書き込みます。

#beforescript{{
 <style type="text/css">
 <!--
 
  (ここにCSSを記述)

 -->
 </style>
}}

(上のソースコードは、ホームページで表示するために、全角のスペースを入れているので、そのままコピーしてもうまくは行きません。このホームページのソースコードを使う場合は、全角スペースを半角スペースに全部置換してから使ってください。)

独自追加cssを作る

 ある程度cssの内容が定まったら、追加部分のスタイルだけを記述した別のcssファイルを作ってアップロードした方がいいでしょう。
 #beforescriptを使った記述は、各ページのヘッダの部分に長々と記述されるので、ページのソースが汚くなってしまうからです。
 別ファイルを作るには、上の「(ここにCSSを記述)」の部分に書いたソースコード(上下の記述は不要)の上に、

@charset “UTF-8”;

という1行を付け加えて、エディタで文字コードをUTF-8に変換してから保存するだけです。
 それでフッタ内には、例えば、

#beforescript{{
<link rel="stylesheet" href="skin/hokukenstyle/haik_seed/nekohaik-haik_seed.css" />
<style type="text/css">
}}

の様に記述します。
 HAIKを置いたフォルダからの相対指定で、ここでは haik_seed の中の nekohaik-haik_seed.css を読みだしています。
 フォルダ指定の最初に / を入れると、「ルート相対パス」での指定になります。つまり、ドメインのトップからの相対アドレス指定になるため、私の様にHAIKをドメインのトップに設置しない場合には、/ を入れないHAIKの設置場所からの相対パスでの指定とは、ファイルがある位置の指定が変わってくるので、注意が必要です。

追加cssを簡単に手に入れる裏技

 別に裏技というほど大層なものではありませんが、他人が使っている追加cssが分かれば、それをそのままもらってくることができます。
 例えば、このホームページなら、ブラウザの右クリックから、「ページのソースを表示」を選び、500行目ほどにある、 nekohaik-haik_seed.css を読み込んで、文字コードを UTF-8 にして、保存するだけです。
 ブラウザの表示で、文字化けが起こる場合は、文字コードの指定をしてやれば、表示の文字化けは直ります。
 #beforescriptを使って、ヘッダー部分に読み込んだものは、前後に痕跡が残らず、大変に見つけにくいです。
 このホームページで、大体の位置をつかんでおくと、他の人のものでも、大分見つけやすくなるのではないでしょうか。

主な問題点

アイテム特徴備考
目次幅が常に100%
上下に常に点線のボーダーが入る
左寄せ
サイドメニューの見出し**、***のレベルの違いはフォントの大きさの差だけ
全部のレベルが字下げなしに表示される
見出しの色が変わらない
幅が常に100%
右の訪問者数の表でも
字下げ横に他と見分けやすいための線が入る
vote見やすくするための色が表示されない
フッター行間が太くなりすぎる

画面が真っ白 頭も真っ白

 #beforescriptや#eyecatchを使ってHAIKの改造をしていると、画面が真っ白になって、それ以降HAIKが何も受け付けなくなってしまうことがあります。
 こうなると、頭は真っ白。改造個所を元に戻しても、果てはHAIKをもう一度インストールし直しても、なかなか状況がよくはなりません。万事休す。
 もちろん、ブラウザやHAIKのキャッシュを削除しておくなどの措置は、しての上です。
 しかし、こうなってしまう原因は、やはり直前の作業にあります。何をしたかをよく思い出してみましょう。
 テーマのあたりをいじった場合には、テーマを入れたフォルダの名前を一時変えて、指定されたテーマフォルダがない状態にしてみる。(この場合、別のテーマが全くないと起動しないかもしれないので、そのような時は、改造していないhaik_seedを別名のフォルダにもう一つ入れておきます)
 プラグインを使って改造した場合には、そのプラグインの名前を変更して、一時プラグインを読み込めない状態にしてみる。
 このような対応をすることで、とりあえずHAIKを起動させます。
 何とかHAIKが起動してしまえば、後は、テーマをもう一度設定し直すなど、問題個所を改善する作業ができます。
 なんでかは分からないのですが、画面が真っ白になった時には、直前の修正箇所を、正常に動いていた時の状態に戻すぐらいのことでは、症状が改善しません。そのような時は、あわてず騒がず、上のような荒療治で、何とかしましょう。