まず、一つのHTMLファイルでスマフォ・タブレット・パソコンの表示をするレスポンシブデザインでの各デバイス毎のスタイルを変更する方法について最初に説明します。

※注意※

レスポンシブデザインでも色々な方法がありますが、今回の方法は僕が公開しているテンプレートについての方法です。
他のテンプレートなどには応用できないので注意してください。

スタイルシートの前半部分は、全体のおおまかな設定とスマフォでの設定になっています。
そして後半部分に/*/////タブレット/////*/
@media all and (min-width: 627px){と書かれた箇所以降がタブレットとパソコンの設定になっています。タブレットとパソコンと言う所重要です！

さらに後半部分に/*/////パソコン/////*/
@media all and (min-width: 900px){と書かれた箇所以降がパソコンのみの設定になっています。
パソコンだけのスタイルを当てたいときはここを変更します。

さて、今回はタブレットとパソコン両方で共通の設定を行っていきます。

スタイルシートの/*/////タブレット/////*/
@media all and (min-width: 627px){の、下のほうにある

/*ブログタイトル*/
h1.blogtitle{color:#fff;
font-size:70%;
font-weight:bold;
position:absolute;
top:3%;/*位置　上からどれぐらいか　文字数などによって適正な位置が変わるので適宜変更してください*/
right:5%;/*位置　左からどれぐらいか*/
}のtopとかrightという箇所の数値を変更します。
topとかbottomとかrightとかleftとか色々試してみて、しっくり来る位置を探してみてください。

top:1em; left:1em;　で左上に移動させてみました。

ブログタイトル下のテキストの位置の調整方法は、ブログタイトルの設定箇所の下に#description{〜という箇所が設定項目になるので、ブログタイトルと同様に調整してください。

/*/////パソコン/////*/
@media all and (min-width: 900px){以降にパソコン用に位置を指定する記述を行ってください。
設定に関する記述はないので、新たに記述してくださいね。

最後に、スマートフォンでの設定なんですが、位置の調整だけでなく色々とキレイに表示される方法を探ってみて次回の記事にしてみたいと思います。

レスポンシブデザイン対応のテンプレート公開しています。
ご利用いただいた方々からはスマフォやタブレットですごく見やすくなったって言ってもらっています(*´艸｀*)
ご興味のある方はゼヒ！

• 04/14:　レスポンシブデザインテンプレート公開します。よろしかったらどうぞ♪