トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

pukiwikiのkeitai.skin用CSS作成 のバックアップ(No.1)

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」を添付します。

詳細は添付ファイルを参照のこと