pukiwikiのkeitai.skin用CSS作成 の変更点
Top / pukiwikiのkeitai.skin用CSS作成
- 追加された行はこの色です。
- 削除された行はこの色です。
- pukiwikiのkeitai.skin用CSS作成 へ行く。
- pukiwikiのkeitai.skin用CSS作成 の差分を削除
*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