- 追加された行はこの色です。
- 削除された行はこの色です。
*pukiwikiのkeitai.skin用CSS作成 [#qffd0bb1]
標準の携帯用skinでは、表現レベルがちょっと乏しい感じなので、CSSでもうちょっとリッチにします。
ちなみに、この記事は以下の記事の続きとなります。
-
-[[pukiwkiの携帯用skinを設定する]]
***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」を添付します。
詳細は添付ファイルを参照のこと
***参考サイト [#h79a06b2]
pukiwikiのskinについて
-http://f27.aaa.livedoor.jp/~tphss/index.php?PukiWiki%20%A5%B9%A5%AD%A5%F3%A4%CE%BA%EE%A4%EA%CA%FD
CSSでpreで改行とかスクロールとか
-http://www.nilab.info/zurazure2/000235.html
-http://blog.goo.ne.jp/mid_knight/e/52dabd28da22e10018d51b057efb532b
-http://jimsie.blog57.fc2.com/blog-entry-28.html
-http://htmlcss.weblogs.jp/blog/cat676982/index.html
-http://bowz.info/409
-http://sho.tdiary.net/20050922.html#p02