ある環境下というのはタブレットで見た場合で、そのサイトはトップページも記事のページも少しだけ画面からはみ出して左右のスクロールバーが画面下に出るとのことでした。
また「Vaster2」ではない他のテンプレートも試してみたがその現象が起こるものと起こらないものもあるとのこと。
解決方法はいくつか思い当たりましたので今回はレスポンシブwebデザインについて少し考えてみましょう。
また、解決方法も後述いたしますので、同じお悩みをお抱えの方の一助になればと思います。
画面外にサイトがはみ出す原因
相談を頂いた段階では少し情報不足でしたのでいくつか確認をさせてもらったところ、「iPad air2」の横向きでサイトを見ると画面にフィットせず画面下にスクロールバーがでるとご連絡をいただきました。
まずはデベロッパツールを利用して「iPad air2の横向き」にした場合の見え方を確かめてみました。
横向きなので入れ替えて1024×768にしています。
マウスで左右にドラッグしてみると確かに少しだけスライドすることが確認できました。
上の画像でも右にスライドしたことによりタイトルが画面外に出て切れていることが見えると思います。
ふむふむ。この原因は単純明快！
レスポンシブwebデザインについてお勉強が必要です！
理由は「Vaster2」と「iPad air2」の「サイトの横幅」と「画面のポイント数」が関係しています。
「Vaster2」の「サイトの横幅」は1040px
「iPad air2」の「画面のポイント数」は1024ポイント
この微妙な数値の差が画面にフィットしない原因になっています。
ポイントとピクセル
サイトの幅を決めるときはピクセルなのに画面のサイズはポイントなのは
画面サイズには論理的なサイズ（ポイント）と物理的なサイズ（ピクセル）があるからです。
サイトの幅を決める時は論理的なサイズであるポイントを参照してください。
ちなみに「iPad air2」の画面サイズは
ポイント：768×1024 ピクセル：1536×2048
今回はタブレットを横向きの場合ということなのでポイントの1024を横幅として考えます。
画面サイズには論理的なサイズ（ポイント）と物理的なサイズ（ピクセル）があるからです。
サイトの幅を決める時は論理的なサイズであるポイントを参照してください。
ちなみに「iPad air2」の画面サイズは
ポイント：768×1024 ピクセル：1536×2048
今回はタブレットを横向きの場合ということなのでポイントの1024を横幅として考えます。
「Vaster2」のレスポンシブデザインの仕様は「768px以下から」のみに対してだけ対策がされています。
これはモニタ、タブレット、スマートフォンの画面サイズは日進月歩、常に変化していることから多くのモニタサイズに合わせ設定を作ることは不毛だというテンプレート製作者様の設計思想からだと思われます。
そもそもカスタマイズ前提ですと明言して作られているテンプレートなので使用者がその時のモニタ事情に合わせてレスポンシブデザインを設定するべきなのです。
と、いうわけで次はレスポンシブwebデザインについて！
レスポンシブwebデザインとは
偉そうにわかったようなことを述べてしまいましたが、私も割と最近理解したことなので完全に色んなサイトで説明されていることの受け売りですけどね。
(;´∀｀)
レスポンシブwebデザインをスペルに直すと「Responsive Web Design」。
Responsiveの意味は「反応のいい様」「感度のいい様」。
用語の意味は、PCのモニタ、タブレット、スマホと複数の異なる画面サイズのデバイスで１つのサイトを見た場合、柔軟な変化でそれぞれの画面にフィットさせるように対応されたwebデザインのことです。
要は画面の幅に反応してデザインを自動的に調整するサイト設計ですね。
いま見ているこのページでもいいのでブラウザの幅を左右に縮めたり伸ばしたりしてみるとサイトのデザインが幅に合わせて可変するのがわかると思います。
今回相談いただいた内容を解決するには２通りの方法があります。
１、サイトの幅を1024pxにする。
２、1024px以下のレスポンシwebブデザインの設定をする。
この２通りです。
サイトの幅を確認しよう
これは「Vaster2」以外でもレスポンシブwebデザインを意識する場合必要なことなのでやり方を説明いたします。
「Vaster2」なのでBloggerが前提です。
まずは「テーマ」から「HTMLを編集」を選択。
HTMLの編集画面で「ctrl+F」を押して検索画面を出してください。
<body
まずはこれで検索してください。閉じカッコを付けないのはプロパティが続くかもしれないからです。
「Vaster2」は<body>で閉じてあるので付けても付けなくてもOK。
その部分から下の方に行くと「wrapper」という文字列があるはずです。
大抵のテンプレートはこの「wrapper」記述があることが多いです。
全てのテンプレートがそういうわけではないのですが「wrapper」とは「ラッパー」。
Hey!Yo!のラッパーではなく包む方のラップ、包装の意味のラップです。
つまり、サイトを包むものということで、サイトそのものの幅であったり、サイドバーの幅に関する記述には「○○○-wrapper」というclassが与えられてる場合が多くあります。
「Vaster2」の場合は「content-wrapper」というのがサイトの横幅を決めています。
『<body』で検索してみて少し下にスクロールすると、
<!--ヘッダーここまで-->
<!--メイン-->
<div class='content-wrapper'>
「content-wrapper」という記述が見つかりました。<!--メイン-->
<div class='content-wrapper'>
次に
content-wrapper
で検索しましょう。
/* 記事部分とサイドバー */
.content-wrapper{
width: 1040px; /* 記事部分 サイドバーの横幅 */
margin-right: auto;
margin-left: auto;
padding-top:20px;
}
.content-wrapper{
width: 1040px; /* 記事部分 サイドバーの横幅 */
margin-right: auto;
margin-left: auto;
padding-top:20px;
}
ありましたね？
width: 1040px; /* 記事部分 サイドバーの横幅 */
サイトの幅が1040pxに設定されている事がこれで確認できました。
解決策１ サイトの幅を1024pxにしてしまう
HTMLの改変を行いますのでテンプレートのバックアップをしてくださいね。
先ほど検索したところの
/* 記事部分とサイドバー */
.content-wrapper{
width: 1040px; /* 記事部分 サイドバーの横幅 */
margin-right: auto;
margin-left: auto;
padding-top:20px;
}
.content-wrapper{
width: 1040px; /* 記事部分 サイドバーの横幅 */
margin-right: auto;
margin-left: auto;
padding-top:20px;
}
他に2か所ヘッダーに1040pxの部分があるのでそれも合わせて変えます。
/* ヘッダー
--------------------------------------- */
.Header{
width:100%;
background-color: $(header.background.color);
padding-bottom: 30px;
border-top:3px solid $(header.topborder.color);
}
#header-inner{
width:1040px;
margin:0 auto;
padding-top:20px;
}
.Header p{
margin:0;
}
.PageList{
width:100%;
background-color:$(headernavi.background.color);
}
.grobal-navi{
width:1040px;
margin:0 auto;
}
--------------------------------------- */
.Header{
width:100%;
background-color: $(header.background.color);
padding-bottom: 30px;
border-top:3px solid $(header.topborder.color);
}
#header-inner{
width:1040px;
margin:0 auto;
padding-top:20px;
}
.Header p{
margin:0;
}
.PageList{
width:100%;
background-color:$(headernavi.background.color);
}
.grobal-navi{
width:1040px;
margin:0 auto;
}
サイトの幅は1024pxに変わりましたが、これだけではサイトのデザインが崩れることになります。
左側の記事部分と右側のサイドバーで構成されているのですが、それぞれの幅の合計値がサイト全体の幅を上回ってしまってサイドバーが下に押し出されるからです。
まずはメインの記事部分の幅を調べます。
記事ページ
で検索してください。
/* 記事ページ
-------------------------------------------- */
.main-outer{
float:left;
width:710px;
background:$(kizi.background);
padding-left:20px;
box-sizing:border-box;
}
こちらもCSSの記述の中にあります。-------------------------------------------- */
.main-outer{
float:left;
width:710px;
background:$(kizi.background);
padding-left:20px;
box-sizing:border-box;
}
これは内容確認のためだけなので数値を変える必要はひとまずありません。
記事ページの幅は710pxだということがわかりました。
次に、
サイドバー
で検索してください。
/* サイドバー
-------------------------------------- */
.sidebar {
width:330px;
max-width:100%;
float:left;
padding-left:40px;
box-sizing:border-box;
}
-------------------------------------- */
.sidebar {
width:330px;
max-width:100%;
float:left;
padding-left:40px;
box-sizing:border-box;
}
710px + 330px = 1040px
これで合致することも判明しました。
後はどちらかの数値から16px減らしトータル1024pxにすれば表示が崩れることなくサイトの幅に収めることができます。
記事ページを減らすなら694pxに
サイドバーを減らすなら314pxに
それぞれ半分ずつの8px減らしてもいいので、
記事ページを702px、サイドバーを322px
とにかく合計が1024pxになればいいので好みの幅で決定してください。
これで1024幅のタブレットの横向きで見てもサイトと画面はフィットするはずです。
修正後確認してはいるのですが、あらゆる角度で検証した訳ではないので、もしかしたら表示が崩れる可能性があるかもしれません。
もし上記カスタマイズで問題が出る場合、ご連絡いただけると再検証いたしますのでよろしくお願いいたします。
解決策２ レスポンシブwebデザインの設定を増やす
解決策１でももちろんかまわないのですが、どちらかというとこちらの方が、のちのち更に画面サイズ問題が出てきたときに対応し易いのではないかと思います。
解決策２はCSSの記述をコピペしてもらえばいいのでとても簡単です。
また他のテンプレートを使った時にもclass名をそのテンプレートのものに変えてあげればそのまま動作させることも難しくないからです。
レスポンシブデザイン
まずは上記で検索してください。
* レスポンシブデザイン
--------------------------------------------------- */
@media screen and (max-width: 768px){
.content-wrapper{
width:auto;
margin:0 auto;
padding-top:5px;
}
こんな感じになってると思います。--------------------------------------------------- */
@media screen and (max-width: 768px){
.content-wrapper{
width:auto;
margin:0 auto;
padding-top:5px;
}
実際にはCSSの中ならどこでもいいのですがわかりやすいので
* レスポンシブデザイン
--------------------------------------------------- */
の直下に下記を追記しておきましょう。
@media only screen and (max-width:1024px)
{
.content-wrapper{
width:auto;
margin:0 auto;
}
#header-inner{
width:auto;
margin:0 auto;
}
.grobal-navi{width:auto;}
.main-outer{width:694px;}
.sidebar {width:330px;}
}
{
.content-wrapper{
width:auto;
margin:0 auto;
}
#header-inner{
width:auto;
margin:0 auto;
}
.grobal-navi{width:auto;}
.main-outer{width:694px;}
.sidebar {width:330px;}
}
1024ポイントのモニター用で作りましたが、それ以下サイズにも自動的に変化するようにも可能です。
コチラを使用する場合は前述したものは追記する必要はありません。
@media only screen and (min-width:769px) and (max-width:1024px){
.content-wrapper{
width:auto;
margin:0 auto;
}
#header-inner{
width:auto;
margin:0 auto;
}
.grobal-navi{width:auto;}
.main-outer{width:67%;}
.sidebar {width:33%;}
}
.content-wrapper{
width:auto;
margin:0 auto;
}
#header-inner{
width:auto;
margin:0 auto;
}
.grobal-navi{width:auto;}
.main-outer{width:67%;}
.sidebar {width:33%;}
}
メディアクエリの上限と下限を決めて記事ページとサイドバーの幅は％指定に変えます。
これを適用してブラウザの幅を縮めたり広げたりすると変化が確認できるはずです。
まとめ
今のところはタブレットの横幅を基準に1024pxから変化するように設定するといいようですね。
1024はデジタル関係ではよく使われる数値なのでサイト幅をそれで作るのもいいかもしれません。
また、端末を変えた場合の見え方も大事ですが、PCで見ている場合ブラウザのウインドウを狭くしたい時もあると思います。
そういった場合にも対応できるるようにも気を使いたいところです。
デベロッパツールを使えば持っていない画面サイズのデバイスもシミュレートすることができます。サイトを構築する上でとても便利なツールなのでおすすめです。
それではまた次回！
