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

おすすめの記事

rsyslogを利用したログファイル作成と、logrotateを利用したログのローテーション

rsyslogを利用したログファイル作成と、logrotateを利用したロ…

初心者でも安全なLAMP環境を構築する方法を解説

初心者でも安全なLAMP環境を構築する方法を解説

サーバリソースをリアルタイムに監視するdstatのインストールと使い方

サーバリソースをリアルタイムに監視するdstatのインストールと…

lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポンシブイメージの基本

lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポン…

Apacheのmod_expiresでファイルタイプごとにキャッシュをコントロールする方法

Apacheのmod_expiresでファイルタイプごとにキャッシュをコント…

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスターの使い方

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスター…

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

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

Windows 10でネットワークが不安定になった際の対策まとめ

Windows 10でネットワークが不安定になった際の対策まとめ


コメントを残す

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

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