PukiWikiで表組みデザイン


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



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

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

おすすめの記事

SNSのカウントをキャッシュするWordPressのプラグインを作成しました

SNSのカウントをキャッシュするWordPressのプラグインを作成し…

初めてでも理解できるようになる「Google Chrome機能拡張の開発」

初めてでも理解できるようになる「Google Chrome機能拡張の開発」

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

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

メールのエラーコードと、メールサーバのmaillog解析方法まとめ

メールのエラーコードと、メールサーバのmaillog解析方法まとめ

Apacheのmod_rewriteモジュールの使い方を徹底的に解説

Apacheのmod_rewriteモジュールの使い方を徹底的に解説

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

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

WordPressに「トップへ戻る」ボタンを設置して、フックの仕組みについて学ぼう

WordPressに「トップへ戻る」ボタンを設置して、フックの仕組み…

FuckAdBlockを利用して自由自在にAdblock対策をする方法

FuckAdBlockを利用して自由自在にAdblock対策をする方法


コメントを残す

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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください