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

おすすめの記事

GMO系列のホスティングサービスでGmailへメールが送信できない不具合が発生中

GMO系列のホスティングサービスでGmailへメールが送信できない…

Web Fontの使い方とGoogle Fontsのオススメフォント 10選

Web Fontの使い方とGoogle Fontsのオススメフォント 10選

自前の国別IPv6、IPv4アドレス割当リストを作成しよう

自前の国別IPv6、IPv4アドレス割当リストを作成しよう

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

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

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

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

ページ編集の手間を劇的に減らす、Custom Field Templateでカスタムフィールドを作る方法

ページ編集の手間を劇的に減らす、Custom Field Templateでカス…

Google Fontsの日本語フォント「Noto Fonts」の使い方

Google Fontsの日本語フォント「Noto Fonts」の使い方

WordPressの新・旧ループからカスタムクエリ・アーカイブまで徹底解説

WordPressの新・旧ループからカスタムクエリ・アーカイブまで徹…


コメントを残す

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

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