レスポンシブWEBデザインテンプレートの解説

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


レスポンシブ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>

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