スマホにてPukiwikiのテーブルを横スクロールさせる方法

よう俺だ。
ちょっと困ったというか、情報が集約されてないのでここにメモがてら残しておく。
誰かの役にたってくれると嬉しい。
今回は、みんな大好きPukiwikiの横にでかいテーブルを横スクロールにして見やすくする方法だ。

Pukiwikiでテーブル横スクロールする方法

inスマホ、だ。
今回は180wikiさんのスキンを使っていると想定して書く。
俺が実際そうだったからだ。
180wikiさんはこちらだ。
Top - 180style wiki

結果から書くぞ。

css

file : skin/180wiki-sp.css

.scroll{
    overflow: auto;　　　　/*tableをスクロールさせる*/
    white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}
.scroll td{
    white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}
.scroll tr{
    white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}

.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
     height: 5px;
}
.scroll tbody::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
     background: #F1F1F1;
}
.scroll tbody::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
     background: #BCBCBC;
}

色や名前は自由にしてくれ。 ここではクラス名として「scroll」を使っている。

php

file : lib/convert_html.php

class Table extends Element
{
    var $type;
    var $types;
    var $col; // number of column

    function Table($out)

こんなクラスがあるので、このクラスの下の方。

     $string = $this->wrap($string, 'table', ' class="style_table" cellspacing="1" border="0"');

        return $this->wrap($string, 'div', ' class="ie5"');

ここを下のように変える。

     $string = $this->wrap($string, 'table', ' class="style_table" cellspacing="1" border="0"');

        return $this->wrap($string, 'div', ' class="ie5 scroll"');

そう。「scroll」を足しただけだ。
この名前は先程のcssのクラスと同じにしてくれよ。

以上だ。
これでスマホ版のテーブルは画面サイズをはみ出しても横スクロールでうまく表示されるようになる。

おまけ

テーブルがはみ出さないようになると、今度はコメントがはみ出すことがある。
それによりスマホ画面で左右に動く余地があって気持ち悪い。
これを直そう。

css

file : skin/180wiki-sp.css

#commentSize{
    width: 95%;
}

場所も名前もなんでもいいんだが、とりあえずサイズを95%にするidを用意する。

php

file : plugin/pcomment.inc.php

     $radio   = $params['reply'] ?
            '<input type="radio" name="reply" value="0" tabindex="0" checked="checked" />' : '';
        $comment = '<input type="text" name="msg" size="' . PLUGIN_PCOMMENT_SIZE_MSG . ' " />';

        $s_page   = htmlsc($page);

こんな場所があるので、ここを以下のように変える。
足すのは、先程決めたid名で頼む。

     $radio   = $params['reply'] ?
            '<input type="radio" name="reply" value="0" tabindex="0" checked="checked" />' : '';
        $comment = '<input type="text" name="msg" size="' . PLUGIN_PCOMMENT_SIZE_MSG . ' " id= "commentSize" />';

        $s_page   = htmlsc($page);

以上だ。
参考にしてみてくれ。