*pukiwikiのkeitai.skin用CSS作成 [#qffd0bb1]
標準の携帯用skinでは、表現レベルがちょっと乏しい感じなので、CSSでもうちょっとリッチにします。
ちなみに、この記事は以下の記事の続きとなります。
-
***CSS読み込み設定 [#i63aa17d]
まず、「keitai.skin.php」に、CSSを読み込む設定を追加します。
95行目を以下のとおりに変更します。
◆変更前
95 < ?><html><head><title><?php
◆変更後
95 < ?><html><head>
96 < <link rel="stylesheet" type="text/css" media="screen" href="skin/keitai.css.php" />
97 < <title><?php
これで、「''keitai.css.php''」と言う名前のスタイルシートが有効になります。
***CSSの作成 [#y3e8db39]
とりあえず、pukiwiki.css.phpをベースに、いらないところを削って側を作成。
これで携帯で表示迫ると、「''pre''」タグが入ってくると、ページが無駄に横に広がってしまい、イケてないことが判明。
そこで、pre要素のところを以下のように変更
pre {
width:260px; ← E71だと、これでちょうど画面に収まる
border-top:#DDDDEE 1px solid;
border-bottom:#888899 1px solid;
border-left:#DDDDEE 1px solid;
border-right:#888899 1px solid;
padding:.5em;
margin-left:1em;
margin-right:2em;
white-space:pre;
color:black;
background-color:#F0F8FF;
overflow:auto; ← これで、入りきらない部分がスクロールされる
}
コメントがついていない部分は、「pukiwiki.css.php」からまんまコピーしてます。
参考までに、「keitai.css.php」を添付します。
詳細は添付ファイルを参照のこと
