滋賀咲くテンプレート

この広告は365日以上更新がないブログに表示されます。

※サイズ指定無しで画像を挿入した場合の例


レスポンシブWEBデザインテンプレートについての解説です。
基本的な設定になりますが、カスタマイズ前に理解しておいた方が良い点を書いておきます。

◆メディアクエリの指定について

表示させるディスプレイサイズでスタイルシートの指定を変えます。
基本は大きいサイズから小さいサイズに指定していくのですが、逆に小さいサイズから大きいサイズへ指定いく方法もあります。

滋賀咲くブログのテンプレートは大きいサイズから指定しています。


ブレークポイントの指定については、以下でスタイルシートに記載しています。

@media (min-width:1501px)
@media (max-width:1500px)
@media (max-width: 1280px)
@media (max-width: 1024px)
@media (max-width:768px)
@media (max-width:480px)

1024px、768px、480pxのブレークポイントでも良いとは思いますが、大きいワイドモニター用に1500pxのブレークポイントを追加しています。

滋賀咲くブログではスタイルシートが一つしかテンプレートに無いので、スタイルシートへの記述が多くなります。
レンタルサーバーなどを借りて、自分でサーバーを用意できる方ならサイズごとにスタイルシートを分ける方法や、JavaScriptでデバイスごとにスタイルを変える方法もあります。

個人的にはJavaScriptは必要最小限にし、スタイルシートでの設定が良いように思います。（滋賀咲くブログではスタイルシートで設定することになりますが・・・）



◆画像に関しては、ボックスのサイズに合わせて伸縮するようにmax-widthの記述を入れています。

トップページ　サムネイル用（枠いっぱいに表示）
#properties_list{
max-width: 100%;
}

記事内画像用（画像の左右にマージン有り）
.main img {
max-width: 90%;
margin:0px 20px 20px 20px;
}

記事内に挿入する画像には、左右寄せ対策にleftとrightに20pxのマージンを指定しています。



◆記事内画像について

ブログ記事に画像を挿入する場合は、元画像のサイズで表示サイズが異なります。
画像サイズを指定しないで挿入した場合は、

挿入画像が990px以上→記事横幅いっぱいに縮小されて表示（左右のマージン有り）
挿入画像が990px以下→オリジナルサイズで表示

画像サイズを指定して挿入した場合は、指定サイズで表示されます。

スマホやタブレットで表示させた場合は、画像サイズに関係無く画面サイズより大きな画像は、画面いっぱいに表示されます。
画面サイズより小さい画像は、そのままのサイズで表示されます。

・500px幅画像をオリジナルサイズで挿入した場合



・サイズ指定（300px）で挿入した場合（右寄せ指定）

画像を寄せる指定をした場合は、スマホやタブレットで表示させると回り込みテキストの表示バランスに注意してください。画像サイズは変わらないのでテキストの改行が多くなる場合があります。




◆数字を電話番号と認識しない設定

スマートフォンなどで数字を表示させた際に、勝手に電話番号として認識されて発信が可能になるのを無効にしています。

<meta name="format-detection" content="telephone=no">

この記述をHTMLテンプレートに記載しています。電話番号へのリンクが必要な場合は

<address>連絡先：<a href="tel:0748xxxxxxx">0748-xxx-xxxx<a><address>

とすれば良いと思います。

ヘッダーの画像をオリジナルなものに変更するだけで、見た目の印象は大きく変わります。

パソコン用画像は下記サイズのものをご用意いただければ、そのままのサイズで表示されます。
スマートフォン用画像は下記サイズの比率で表示されます。（スタイルシートに詳しい方はソースを見ていただければ判るかと思います。）



【ヘッダー画像のサイズ】
パソコン用：横1000ピクセル×縦338ピクセル
スマートフォン用：横320ピクセル×縦108ピクセル

【パソコン用スタイルシート変更箇所（青文字の箇所をアップした画像パスに変更）】
/*ヘッダータイトル部分ここから*/
#banner{
background:url("//img01.shiga-saku.net/usr/t/o/r/torisetsu/2014sp001.jpg");
padding:0px 0px 0px 0px;
width:1000px;
height:338px;
}
/*ヘッダータイトル部分ここまで*/

【スマートフォン用スタイルシート変更箇所（青文字の箇所をアップした画像パスに変更）】
/*ヘッダータイトル部分ここから*/
header.global {
position: relative;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background:#ECECEA url(http://www.shiga-saku.net/_img/s_original_2014_001/2014sp001.jpg) no-repeat 0 0;
-webkit-background-size: 320px 108px;
background-size: 320px 108px;
height:108px;
border-top:1px dotted #000000;
border-bottom:1px dotted #000000;
}
/*ヘッダータイトル部分ここまで*/


スマートフォン用画像は「320px 108px」に縮小されて表示されるので縦横同比率（640px216pxや960px324pxなど）の画像の場合は、元画像と同じように表示されます。
テンプレートで使用している画像は、パソコン用・スマートフォン用のどちらも同じ「1066px 360px」の画像を使っています。

スマートフォン用画像のサイズは「iPhone」の表示サイズを基準にしています。Androidの高解精細ディスプレイ端末では画像の横幅が少し足りなくなるので「backgroundのカラー」で画像の足りない部分を表示させています。
この方法のメリットは画像サイズに関係なくヘッダー部分を「1枚の画像」の様に見せることができる点です。デメリットは実際には画像の横幅が足りないので画像のカラーと背景カラーが合わないと画像が切れた感じになります。テンプレートで使用しているような画像ではなくて、パターン画像のリピートで表示させる場合は大丈夫です。

オリジナルヘッダー画像でブログのイメージを変えちゃいましょう♪