2015年06月23日

小人さんテンプレートのスマートフォン対応(1)

小説HTMLの小人さんにて用意している本文テンプレートのうち、一部ページにスマートフォン対応のためのCSSを作成しました。
画面の横幅が480ピクセル以下の画面でスマートフォン用CSSが適用されます。

スタイルシート配布
タイプB、タイプC、タイプI用スタイルシート
 → タイプB適用例
 → タイプC適用例
 → タイプI適用例

タイプE用スタイルシート
 → タイプE適用例

適用例
1.上記のスタイルシートファイルを小説と同じフォルダに保存して下さい。
2,小説のファイルをメモ帳等のテキストエディタで開き、</head>直前に、下記のコードを追加して下さい。

タイプB、タイプC、タイプIの場合:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="smart_sm2_sm3_ct2.css" rel="stylesheet" type="text/css" style="color:red">


タイプEの場合:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="smart_ct1.css" rel="stylesheet" type="text/css" style="color:red">


!!注意!!
配布しているテンプレートのうち一部に文字コードの記述のないものがありました(現在は修正済)。
文字コードの記述がないとスマートフォンで文字化けすることが多いので、タグすぐ下に

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

がない場合は追加して下さい。(赤字部分は実際の文字コードに合わせてEUC-JPUTF-8に変更して下さい)

これ以外のタイプに対応するスタイルシートも順次公開予定です。

posted by 文月夕 at 10:25| Comment(2) | TrackBack(0) | web技 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
小説HTMLの小人さんには何時もお世話になってます。

2月に入ってから幾度かサイトにアクセスしようとしたのですが全て500Internal Server Errorと出て入れません。其方様でも確認して戴けないでしょうか。
よろしくお願い致します。
Posted by ○○人目の小人 at 2017年02月10日 21:47
>○○人目の小人 様

ご指摘ありがとうございました。修正いたしました。
Posted by 管理人 at 2017年02月12日 15:29
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/421153093

この記事へのトラックバック

PR

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。