トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

pukiwikiのkeitai.skin用CSS作成

Last-modified: 2013-08-24 (土) 02:14:21 (2159d)
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で改行とかスクロールとか