ARRANGE FOR SMARTPHONE
ここで配布しているテンプレ、もしくはナノユーザーテンプレで配布しているテンプレで、スマートフォン対応でないものをある程度簡単にスマートフォン対応に出来る方法を書いておきます。
ちょっと面倒くさいので、少しCSSに詳しいか、これからちゃんと調べられ、かつ確認機種がある人向けです。


☆スマートフォン以外のPC振り分け独自タグ(以下PC専用独自タグと表記)がある場合1(ナノの<pc_only>〜</pc_only>、monospaceの##p##〜##p##など)

1.
headで
<style type="text/css" media="screen">〜</style>
で囲まれている部分を見つけます。

2.
 それをPC専用独自タグで囲みます

【PC専用独自タグ】
<style type="text/css" media="screen">〜</style>
【PC専用独自タグ(閉じるタグ)】

3.
 終わり。見栄えはPCそのまま小さくしたようにはならないかもですけど、横スクロールの面倒さはなくなると思います。

※上手く行かなかったら以下の方法を試してみてください。



☆スマートフォン以外のPC振り分け独自タグ(以下PC専用独自タグと表記)がある場合2


1.
headのCSS部分で

width: 600px;

こんな感じにpxで幅指定をしている所が幾つかありますので全て見つけます。


2.
 それを、PC専用独自タグで囲みます。
【PC専用独自タグ】 width: 600px;【PC専用独自タグ(閉じるタグ)】
こんな感じで。全部囲みます。

3.
 多分出来上がり。

PC専用独自タグをたくさん書きたくない方はクラスセレクタも追加して幅指定をまとめて囲ってください。(よくわからない方は上の方法で!)

例)
【PC専用独自タグ】
.all{
width: 600px;}
.header {
width:590px;}
.content {
width:600px;}
【PC専用独自タグ(閉じるタグ)】


こんな感じで。
幅指定以外の指定があるときはそちらは残しておいてください。

例)
【PC専用独自タグ】
.all{
width: 600px;}
.header {
width:590px;}
.content {
width:600px;}
【PC専用独自タグ(閉じるタグ)】

.all{
background-color:#123456;
font-family:serif;}

こんな感じで。

メニューのリンクがdisplay:block;になっている場合も囲んだほうが見栄えがいいかも知れません。確認しながらやってみてください。

失敗した時のためにバックアップは忘れずに!



☆PC専用独自タグがないサーバーの場合
→CSSファイルが作成できることが条件となります。
ちなみに私は試してないので保証はできません。参考までに。

1.HEADに以下を書き込みます。
<meta name="viewport" content="width=320;initial-scale=1.0;maximum-scale=1.0;user-scalable=0;" />

2.同じくHEAD内に以下の文字列を書き込みます。
<link media="only screen and (max-device-width:480px)" href="css/smart.css" type="text/css" rel="stylesheet" />
<link media="screen and (min-device-width:481px)" href="css/pc.css" type="text/css" rel="stylesheet" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->

(URLはそれぞれのCSSファイルのURLに変えてください。ここではhrefのダブルクオーテーションの中です。)

3.CSSを3種類作ります。一つ目はスマートフォン用にsmart.cssを、2つ目はパソコン用にpc.cssを、3つ目はパソコンのIE用にie.cssを。
うちのテンプレを分割するだけならie.cssはpc.cssと同じで大丈夫です。
CSSファイルの作り方は
とりあえずテンプレのheadを全コピー

styleタグ(<style〜>、</style>)、コメントアウト(<!--、-->)などスタイルシート以外のものを抜く

携帯指定<style type="text/css" media="handheld">〜</style>のところにあった指定を抜く
(保存してpc.cssできあがり。ie.cssはコピペで)

smart.cssは残ったものから更に幅に関連するもの( width: 600px;など)を抜く
(別のファイルに保存してsmart.cssできあがり)


4.headに携帯指定のCSSを書く。(先ほど消した<style type="text/css" media="handheld">〜</style>をstyleタグごとコピペでOK。他に設定したいスタイルがあればそれも組み込む)

5.多分振り分けられてるはず……。
ただし、bodyの方で振り分けしていたものは振り分けできません。もし専用の独自タグがある場合はそれぞれお使いください。

参考必見!携帯サイトをお手軽にiPhoneやスマートフォンに対応させる方法(pcサイト)

わかりにくい説明ですが、一応!ということで書かせていただきました。
私の持てる知識全てなので質問は受け付けられません。

人気急上昇中のBL小説
BL小説 BLove
- ナノ -