テーブル編

haikはレスポンシブルデザイン対応となったため、テーブルの仕様に変更がありました。主にマニュアルに記述していないことについて調査します。
大きく変更になったのは、テーブルの横幅の指定です。QHMでは幅をピクセル指定できましたが、同様な記述をすると横幅の割合いの指定と解釈するようです。ピクセルのサイズにはなりません。

T01 列の幅を指定する

haikではピクセル指定で列の幅は指定できません。以下のおまじないを書くと画面全体に広がるテーブルとなります。このようなテーブルでは少し間延びしてしまうので、段組(cols)を使用して、中央または左右に寄せた方がいい感じになります。

段組を使用しない例

【おまじない】
|LEFT:150|CENTER:300|RIGHT:100|c
|~A|~B|~C|
|幅150 左寄せ|幅300 中央寄せ|幅100 右寄せ|
ABC
幅150 左寄せ幅300 中央寄せ幅100 右寄せ

段組を使用した例

段組でテーブルを中央に寄せる。(左に3余白、中央に6、右に3余白)

【おまじない】
#cols(6+3){{
|LEFT:150|CENTER:300|RIGHT:100|c
|~A|~B|~C|
|幅150 左寄せ|幅300 中央寄せ|幅100 右寄せ|
}}
ABC
幅150 左寄せ幅300 中央寄せ幅100 右寄せ

T02 テーブルの枠線を消す

【手順】

  1. テーブルの全部の線を消すときは、以下のおまじないを記述します。
    【おまじない】これは通常のテーブルの書き方
    |STYLE:class=table table-bordered|
    |~ラーメン|こてこての豚骨ラーメン|700円|人気No.1|
    |~カレー|激辛です。覚悟してね|600円|人気No.2|
    |~うどん|どん兵衛に似た味ですが、ちょっと...|500円|人気No.3|
  2. テーブルの枠線を消すために、以下のスクリプトをそのページ内に記述します。サイト全部のテーブルで枠線を消すときは、フッター内に記述します。
    テーブルの内側の枠だけ消したい場合は、 .table-bordered {border: none;} は不要です。
    #beforescript{{
    <style type="text/css">
    <!--
    /* テーブルの外枠を消す */
    .table-bordered {
        border: none;
    }
    /* テーブル内の枠を消す */
    .table-bordered>thead>tr>th, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td {
        border: none;
    }
    -->
    </style>
    }}

【結果】

ラーメンこてこての豚骨ラーメン700円人気No.1
カレー激辛です。覚悟してね600円人気No.2
うどんどん兵衛に似た味ですが、ちょっと...500円人気No.3

【解説】

  • テーブル作成時におまじないの先頭には  |STYLE:class=table table-bordered| が入りますが、このクラスのプロパティを強制的に枠なしに設定します。

T03 スマホのとき横スクロールするテーブルを作る

以下のおまじないを記述します。テーブルの先頭に STYLE:responsive を入れます。これで、横に大きななテーブルをスマホで見たとき、テーブルの横幅が確保されたままになりますので、横スクロールして見やすくなります。

【おまじない】
|STYLE:responsive|
|~ラーメン|こてこての豚骨ラーメン|700円|人気No.1|
|~カレー|激辛です。覚悟してね|600円|人気No.2|
|~うどん|どん兵衛に似た味ですが、ちょっと...|500円|人気No.3|
ラーメンこてこての豚骨ラーメン700円人気No.1
カレー激辛です。
覚悟してね
600円人気No.2
うどんどん兵衛に似た味ですが、
ちょっと...
500円人気No.3

【解説】

  •  STYLE:responsive と同時に枠線を消すクラスを指定してもクラスの指定は無視されるようです。レスポンシブ対応にして同時に枠線を消すことはできませんでした。

以下はSTYLE:responsiveを指定していないときの例。スマホで見ると、横にスクロールしません。

ラーメンこてこての豚骨ラーメン700円人気No.1
カレー激辛です。
覚悟してね
600円人気No.2
うどんどん兵衛に似た味ですが、
ちょっと...
500円人気No.3

T04 テーブル内の縦の文字位置を変更する。

テーブル内の横の文字位置は :LEFT :CENTER :RIGHT で指定できますが、縦の文字位置を変更するおまじないはありません。そこで、CSSを変更することで縦の文字位置を変更します。
【手順】
1.以下のスクリプトをページ内にコピペします。(中央に表示したいとき)これだけです。

#beforescript{{
<style type="text/css">
<!--
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
   vertical-align: middle;
}
-->
</style>
}}
ラーメンこてこての豚骨ラーメン700円人気No.1
カレー激辛です。
覚悟してね
600円人気No.2
うどんどん兵衛に似た味ですが、
ちょっと...
500円人気No.3

【解説】
vertical-align: には、以下が指定できます。
top
middle
bottom

【確認環境】
haik 6.0.3
haikテーマ: haik_seed

テーブルヘッダーだけ色を変更する

(未稿)

ご意見箱

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

  • これも旧版からhaikに移行したとき、枠が間延びしてしまって困っていました。解決できました。 -- うみほし 2016-02-05 (金) 13:35:12
  • 問題解決してうれしいです。
    もし、何かご希望があれば、検討できるかもしれません。
    よろしくお願いします。 -- tomzo 2016-02-06 (土) 00:03:58
  • お言葉に甘えて、ロゴ画像についての相談です。
    設定からロゴ画像をアップロードしてみたのですが、表示サイズが小さいように思えたので、もう少し大きくしたいと思いました。設定ではロゴ画像の大きさを変更する項目がないので、何か手段はありますか。
    ソースはいじりたくないので、スクリプトなどで方法はないでしょうか。 -- うみほし 2016-02-07 (日) 20:45:32
  • うみほしさん
    ロゴ画像は 高さ50pxが基本になっています。画像を大きくするとナビの高さも大きくする必要があります。少し不格好かもしれませんが、CSSで対応可能です。
    以下のCSSで試してみてください。高さを80pxにした場合

    .navbar-brand img {
    height: 80px;
    }
    .navbar-default {
    height: 80px;
    }
    -- tomzo 2016-02-11 (木) 11:26:49

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

選択肢 投票
とても役に立った 3  
少しだけ 0  
あんまり 0