PukiWikiで表組みデザイン


投稿日:2011年8月7日
  • 0
  • 0



テーブルレイアウトの限界

PukiWikiでは可能な限り簡単に誰でも編集できるようにしたいので、独自のプラグインや、独自の成形ルールなどは指定したくないのですが、どうしてもデフォルトの機能だけでは実現できることは限られてます。

だからこそプラグインが用意されてるのかもしれませんが、デザインをしようと思うと致命的にできないことが多いです。

今回問題があったのは、「アクアリウムWikiの淡水魚辞典」のページなんですが要素が多いだけに複雑な記述を極力抑え、かつ見やすいページを目指しました。

テーブルをfloatのleftで回りこませ、自動で段組みにしたかったのですが、要素に違いがあり、どうしても高さがばらばらになります。
そうすると回り込みがうまく動作しません。
DIV要素をDIVで囲んだり、テーブルでテーブルを囲めれば高さを揃える方法があるのですが、PukiWikiのデフォルトの記述では実現できません。

何時間か粘ったのですが、どうしてもできないのでテーブルを回りこませるページでだけ動作するプラグインを自作しようかと本気で悩んでるところいいものがありました。

style.inc.php」です。

#style([Options]){{
Contents
}}

と記述すればCSSを簡単に追加できる優れもの。

親切にこれだけのオプションも用意されてます。

Options

style=CSSスタイル 又は
CSSスタイル

を追加、囲みます。style=float:right;width:100%; のように指定します。
class=CSSクラス名

を追加、囲みます。実際の css スタイルは外部 css ファイルで設定します。
addstyle=CSSスタイル
一番先頭の HTML タグにCSSスタイルを追加します(旧式書式では動作しません)。
addclass=CSSスタイル
一番先頭の HTML タグにCSSクラス名を追加します(旧式書式では動作しません)。
putstyle=CSSスタイル
一番先頭の HTML タグのCSSスタイルを置換(なければ追加)します(旧式書式では動作しません)。
putclass=CSSクラス名
一番先頭の HTML タグのCSSクラス名を置換(なければ追加)します(旧式書式では動作しません)。
end
閉じタグの出力を明示的に指定する際に使用します。

ちなみに設定はプラグインをダウンロードしたら自分のプラグインフォルダに入れて

「<strong>pukiwiki.ini.php</strong>」にある
-define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 1); // 1 = Disabled
+define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled

ここを修正するだけの簡単設計。

このプラグインを導入させていただいて、「ziten」というスタイルで囲み、その中のテーブルだけ高さを指定するという邪道なデザインを実現しました。

もしどなたかプラグインを導入しないで高さの異なるテーブルの回り込みができたよという人がいたらやり方を教えて下さいw


現在のページを共有する



現在のページに関連する記事

PukiWikiで表をソートしたい PukiWikiで表をソートしたい
PukiWikiで表組みデザイン 5段階評価プラグインを通して学ぶPukiWikiのプラグインを作成する方法
PukiWikiで表組みデザイン PukiWikiをビジュアルエディタ(TinyMCE)で編集できるプラグインを作成
PukiWikiで円や単位のある表をソートしたい PukiWikiで円や単位のある表をソートしたい
PukiWikiで表組みデザイン PukiWikiにプラグインを使って、お問い合せフォームを設置
PukiWikiで表組みデザイン これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方
サーバへPukiWikiをインストール サーバへPukiWikiをインストール

おすすめの記事

ユーザーの環境変数を設定するbashの設定ファイルと、カスタムプロンプトについて

ユーザーの環境変数を設定するbashの設定ファイルと、カスタム…

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャッシュの仕組み

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャ…

NexusFontが重い場合はWindows Font Cache Serviceを無効にしよう

NexusFontが重い場合はWindows Font Cache Serviceを無効にしよう

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

最新のXAMPPをインストールし、安全・高速に運用する方法

最新のXAMPPをインストールし、安全・高速に運用する方法

ImageMagickをWindowsのXAMPPに導入する方法

ImageMagickをWindowsのXAMPPに導入する方法

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決まり!

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決…

Adblock対策プラグイン「End of Adblock Cycle」を作成しました

Adblock対策プラグイン「End of Adblock Cycle」を作成しました


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。