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をインストール

おすすめの記事

ads.txtの設置方法を通して学ぶインターネット広告の問題点

ads.txtの設置方法を通して学ぶインターネット広告の問題点

パソコン用メガネなんていらない!無料でできる5つの疲れ目対策

パソコン用メガネなんていらない!無料でできる5つの疲れ目対策

fluentdとNorikraでDoS攻撃を遮断し、メールで通知する方法

fluentdとNorikraでDoS攻撃を遮断し、メールで通知する方法

使うであろう文字だけの、HTML・XHTMLエンティティシート

使うであろう文字だけの、HTML・XHTMLエンティティシート

「このアプリがシャットダウンを妨げています」と表示されるがアプリがわからない場合の対処法

「このアプリがシャットダウンを妨げています」と表示されるが…

PukiWikiで5段階評価を付けるプラグインを作成しました

PukiWikiで5段階評価を付けるプラグインを作成しました

公式ドキュメントよりも詳しいTinyMCEの使い方(基本編)

公式ドキュメントよりも詳しいTinyMCEの使い方(基本編)

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ


コメントを残す

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

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