2012/08/15 ナツ様 こんにちは。お早いお返事をいただきありがとうございます。ナツ様からのメッセージは、とても励みになりますので見る度に嬉しく思っております。 それでは、早速ですが『絵の容量が大きくて携帯から中々反映されないという件』についてのご返答を致します。 『タイトル部分の絵をPCのみに表示出来、携帯・スマホからはタイトルの枠も狭く表示出来る方法』ですが、可能です。ナツ様がおっしゃります通り、この場合ですと『振り分け』という方法が必要になるのですが、それについて乏しい知識で申し訳ありませんが、ご説明させていただこうかと思います。 HEAD・HTML詳細 まず、タイトル部分の設定は『HEAD・HTML詳細』で設定を行い『全体レイアウト』で表示しているという形式になっております。なので、今回変更される大まかな部分は『HEAD・HTML詳細』の『HEAD内』と『全体レイアウト』いうことになります。次に、『HEAD内』でもタイトル部分の設定を行なっているタグは『/* 上部タイトル部分 */』です。 /* 上部タイトル部分 */ table.title { width:94%; height:210px; border:solid 1px #333333; text-align:right; margin:8px 0px 8px 0px; padding:4px 4px 4px 4px; background-image:url(http://img.nanos.jp/upload/x/xxuorxx/mtr/0/0/20120618035425.gif); background-repeat: no-repeat; background-position: left top; background-color:#ffffff;} これが、『HEAD内』に表示している『/* 上部タイトル部分 */』です。現在は、PCと携帯同じタイトル部分を表示していることになっているのですが、それぞれPCと携帯とで別のタイトル画面を表示するために、もう一つこれと同じようなtableタグをHEAD内に貼り付けていただくことが必要です。そして、 table.title {←ここの部分の『title』というのを別の名前にしてあげます。例えば『mobile』など。 width:94%; height:210px; ……} つまり、『/* 上部タイトル部分 */』のタグが table.title { width:94%; height:210px; ……}のものとは別に table.mobile {←名前が『title』ではなく、別のものにして下さい。（ここでは区別として『mobile』という表記にさせていただきます） width:94%; height:210px; border:solid 1px #333333; text-align:right; margin:8px 0px 8px 0px; padding:4px 4px 4px 4px; background-image:url(http://img.nanos.jp/upload/x/xxuorxx/mtr/0/0/20120618035425.gif); background-repeat: no-repeat; background-position: left top; background-color:#ffffff;} ここで、ナツ様が仰られた通り『height:210px;』の数値を『height:50px;』くらいにしていただくと携帯で絵を表示しない場合の空白部分の縮小になると思います。（titleのほうのheightを小さくするとPCの方のタイトル部分が小さくなってしまうのでご注意下さい）また、現在では『全体レイアウト』の方で、コンテンツメニューをタイトルの下部に表示させるために改行していますので、その改行を消去していただくことで、『height:50px;』の設定が反映されると思います。もしかすると、ナツ様が『height』をいじってもタイトル画面の高さに変化がなかったのは、その改行によるものかもしれません。 これをすることで、PCでのタイトル画面は『titleという名前のtable』を、携帯でのタイトルの画面は『mobileという名前のtable』を表示するための準備ができたということになります。 全体レイアウト けれども、これだけではまだ『title』という名前のタイトル画面しか表示されていないことになるので、次に『全体レイアウト』でPCと携帯でそれぞれ違うタイトル画面を表示するように設定することになります。ここからは『全体レイアウト』のタグをご説明させていただきたいのですが、タグを表示するにあたって、どうしても<>この半角記号を使用するとそのタグをそのものがこのページで反映してしまいます。そのため、今回は<>この半角記号を＜＞全角記号に変えてご説明させていただいておりますので、ご了承下さい。現在『全体レイアウト』では、PCでも携帯でも同じタイトル画面のtableを設置するような構成になっております。振り分けの方法としてはPC表示したい内容のタグや文字を＜pc＞〜＜/pc＞内に設置し、携帯でのみ表示したい内容のタグや文字を＜nopc＞〜＜/nopc＞内に設置してそれぞれ別のものを表示するという方法になります。 そのため、『全体レイアウト』内の＜table class="title" align="center"＞＜tr＞＜td＞＜!--ここからタイトル部分の設定です--＞〜＜/td＞＜/tr＞＜/table＞＜!--ここまでタイトル部分の設定です--＞タグの前に＜pc＞というタグを入れて頂き、終わりに＜/pc＞というタグを入れて頂くことで、PCのみこのタイトル部分を表示するという設定になります。（ちなみに〜の中はメニュー画面や文字などが書いてある部分です） 次に＜table class="title" align="center"＞＜tr＞＜td＞＜!--ここからタイトル部分の設定です--＞ 〜 ＜/td＞＜/tr＞＜/table＞＜!--ここまでタイトル部分の設定です--＞これと同じものをコピーして、＜/pc＞で括った部分に貼り付けます。PC振り分けと同じようにタグの前に＜nopc＞を入れて頂き、タグの終わりに＜/nopc＞というタグを入れて頂くことで、携帯のみこのタイトル部分を表示するという設定になります。ここで、＜nopc＞ 〜 ＜/nopc＞タグ内の＜table class="title" align="center"＞の『title』を『HEAD内』で設定した『mobile』に変更します。つまり、＜table class="mobile" align="center"＞というタグに変更することになります。 最後に これで、PCではtitle tableのタイトル画面が、携帯ではmobile tableのタイトル画面が表示されたことになります。これで、振り分け作業は終了になります。後は、『HEAD内』の『/* 上部タイトル部分 */』内のタグを色々いじっていただいたりすることで、携帯では携帯で独立したタイトル画面の表示が可能になります。もしも、携帯においても絵を表示させたい場合は、携帯で使用する素材のみ容量を落としてみてはいかがでしょうか？振り分けですと、PCではPCの絵を表示させることが可能ですし、劣化は見られないかと思われます。 長くなってしまい申し分けありません。このような説明で大丈夫でしたでしょうか？ ナツ様のページ拝見させていただきました。とても素敵な設定でしたので、ぜひ今度作品も拝見させていただこうかと思います。HPアドレスもありがとうございます。ぜひ、遊びに行かさせてください。 コピー用タグ（<>が＜＞になっていますのでご注意下さい） 最後に、上の説明では非常にわかりにくいかと思いましたので、それぞれ『HEAD内』と『全体レイアウト』へ貼り付けていただくと良いとおもわれるタグを、書かせて頂きます。『全体レイアウト』のほうは、上記と同様にタグを反映させないために<>（この半角記号）を＜＞（全角記号）に変えさせていただいております。お手数ですが、コピーしてご使用される際は、半角記号にご変更下さい。個人的にOfficeのWordなどにタグを貼り付けて頂き、検索で『＜』（全角記号）を検索された後、『<』（半角記号）に全て置換という作業をしていただくと、お早く変更出来るかと思います。同様に『＞』は『>』に置換して下さい。●HEAD内＝『/* 上部タイトル部分 */』 /* 上部タイトル部分 */ table.title { width:94%; height:210px; border:solid 1px #333333; text-align:right; margin:8px 0px 8px 0px; padding:4px 4px 4px 4px; background-image:url(PCで表示させたい素材のurl); background-repeat: no-repeat; background-position: left top; background-color:#ffffff;} table.mobile { width:94%; height:210px;←ここの数値を小さくすることで携帯での大きさ（高さ）を小さくすることが可能です。その場合は『全体レイアウト』の方のコンテツメニューを下部に表示するための空白を消去して下さい。 border:solid 1px #333333; text-align:right; margin:8px 0px 8px 0px; padding:4px 4px 4px 4px; background-image:url(携帯で表示させたい素材のurlか何も表示させたくない場合は空白に); background-repeat: no-repeat; background-position: left top; background-color:#ffffff;} ●全体レイアウト＝一番最初 〜 ＜!--ここまでタイトル部分の設定です--＞の部分 ＜div align="center"＞＜div class="all"＞＜!--ここからPC用のタイトル部分の設定です--＞＜pc＞＜table class="title" align="center"＞＜tr＞＜td＞＜!--ここからタイトル部分の設定です--＞＜!--ここからページ一番下部『ページの一番上に戻るタグ』に対応してあります。『ページの一番上に戻るタグ』ご利用になる際は消去しないでください--＞＜a name="#top"＞＜font color="#ffffff"＞.＜/font＞＜/a＞＜!--ここまでページ一番下部『ページの一番上に戻るタグ』に対応してあります。『ページの一番上に戻るタグ』ご利用になる際は消去しないでください--＞ ＜nopc＞＜br＞＜/nopc＞ ＜a href="/あなたのID/" border="0"＞＜font size="6"＞＜b＞此処のお名前＜/b＞＜/font＞＜/a＞ ＜pc＞＜br＞＜/pc＞＜b＞＜a href="/あなたのID/page/子ページ番号/"＞序章＜/a＞/＜a href="/あなたのID/novel/小説機能番号"＞倉庫＜/a＞/＜a href="/あなたのID/blog/日記機能番号/"＞徒然＜/a＞/＜a href="/あなたのID/page/子ページ番号/"＞連鎖＜/a＞/＜a href="/あなたのID/form/メールフォーム番号"＞書状＜/a＞＜/b＞＜/td＞＜/tr＞＜/table＞＜/pc＞＜!--ここまでPC用のタイトル部分の設定です--＞＜!--ここから携帯用のタイトル部分の設定です--＞＜nopc＞＜table class="mobile" align="center"＞＜tr＞＜td＞＜!--ここからタイトル部分の設定です--＞＜!--ここからページ一番下部『ページの一番上に戻るタグ』に対応してあります。『ページの一番上に戻るタグ』ご利用になる際は消去しないでください--＞＜a name="#top"＞＜font color="#ffffff"＞.＜/font＞＜/a＞＜!--ここまでページ一番下部『ページの一番上に戻るタグ』に対応してあります。『ページの一番上に戻るタグ』ご利用になる際は消去しないでください--＞ ＜nopc＞＜br＞＜/nopc＞ ＜a href="/あなたのID/" border="0"＞＜font size="6"＞＜b＞此処のお名前＜/b＞＜/font＞＜/a＞ ＜pc＞＜br＞＜/pc＞＜b＞＜a href="/あなたのID/page/子ページ番号/"＞序章＜/a＞/＜a href="/あなたのID/novel/小説機能番号"＞倉庫＜/a＞/＜a href="/あなたのID/blog/日記機能番号/"＞徒然＜/a＞/＜a href="/あなたのID/page/子ページ番号/"＞連鎖＜/a＞/＜a href="/あなたのID/form/メールフォーム番号"＞書状＜/a＞＜/b＞＜/td＞＜/tr＞＜/table＞＜/nopc＞＜!--ここまで携帯用のタイトル部分の設定です--＞＜!--ここまでタイトル部分の設定です--＞ 上記タグをそれぞれ『HEAD内』と『全体レイアウト』の該当部分と差し替えていただくことで反映されるかと思います。 また、スマートフォンに関しましては、申し訳ありませんが＜pc＞タグか＜nopc＞タグどちらが反映されるか判りません。もしかするとスマートフォンではこのタグが反映しない可能性もあります。私がスマートフォンを持っていないので確認することも出来ませんでした。どうかご了承下さい。 非常に長くなってしまい、またわかりにくい説明となってしまい、申し訳ありません。 何かわからないことがあれば、どうぞお気軽にご連絡下さい。 もっとわかりやすくご説明出来るように頑張らせて頂きます。 …2012/08/15 ▲ |