pukiwikiのkeitai.skin用CSS作成
Last-modified: 2013-08-24 (土) 02:14:21 (3496d)
Top / pukiwikiのkeitai.skin用CSS作成
pukiwikiのkeitai.skin用CSS作成 †
標準の携帯用skinでは、表現レベルがちょっと乏しい感じなので、CSSでもうちょっとリッチにします。
ちなみに、この記事は以下の記事の続きとなります。
CSS読み込み設定 †
まず、「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の作成 †
とりあえず、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」を添付します。
詳細は添付ファイルを参照のこと
参考サイト †
pukiwikiのskinについて
CSSでpreで改行とかスクロールとか
