Stinger3から乗り換えずにStinger5のメリットを取り入れよう
レスポンシブデザインの魅力
ブログデザインの骨格でもあるテーマ。このブログは開設当初からStinger3を使用していますが、Stinger5がリリースされたことで乗り換えようか迷っています。
Stinger5の特徴の1つはレスポンシブデザイン。
レスポンシブデザインとは、Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。
——e-Words
通常は、それぞれのデバイスに最適化するよう複数のHTMLファイルやCSSファイルを用意します。最近ではタブレットやスマートフォンの機種が増えてきたので、それぞれのデバイスに合わせてファイルを容易するのは大変。そこで登場するのがレスポンシブデザイン。ファイル1つに画面サイズ別に記述することで、管理がとても簡単になるのです。
Stinger3の場合、CSSは2つあり、モバイルとパソコンで分かれていますが、Stinger5だとCSS1つでまとめられています。
スポンサーリンク
Stinger3にレスポンシブデザインを取り入れてみよう
レスポンシブデザインはCSSに条件を記載するだけで簡単に採用することができます。振り分けにはMedia Queriesというものが使われています。
構造についてはこちらの記事が参考になります。
記述はシンプル。以下のコードにMax widthやMin widthの大きさを指定すると、その記述下の領域のスタイルが適用されます。
@media only screen and (max-width: ◯◯◯ px) @media only screen and (min-width: ◯◯◯ px)
このブログの場合、記事下の人気記事の表示をスマートフォンのサイズ別で調整しています。
例えばiPhone4sや5の場合、人気記事は2つ並びになっています。
こちらはiPhone6での表示。記事が3つ並ぶように調整しました。
そしてこちらがiPhone6 Plus。記事数3つは変わりませんが、余白ができないよう記事のサムネイルの大きさを大きくしました。
smart.cssの表記で、通常のデザインの他以下の2つのコードで調整しています。
@media only screen and (min-width:367px) and (max-width:410px) @media only screen and (min-width:411px) and (max-width:415px)
iPhone5のDevice Widthは320px、iPhone6は375px、iPhone6 Plusは414pxなので、それぞれ表示がわかれるようにしました。
レイアウトのずれで気になったところは今のところここぐらいなので、今後も主要デバイスに合わせて色々と調整していきたいと思います。もしブログで特定のスマホユーザーが多ければ、そちらを優先してデザインレイアウトを考えていくことをおすすめします。

合わせてこちらもどうぞ:
OKINOTEからお知らせ
沖縄の役立つリンクまとめ始めました。
沖縄ファミリーマート初寄稿記事 !沖縄の道の駅を取材しました。
地元ンチュがおすすめ!許田、糸満、ぎのざ・・7つの道の駅で味わえる「おいしいもの」を食べに行こう (外部リンク)
スポンサーリンク
ad
シェア感謝です! \(^o^)/
まだデータがありません。
-
-
過去記事を一括修正!文字列を置換で画像差し替えも可能なプラグイン
ハイサイ!ショウ(@OKI_NOTE)です。 ブログを書いていると、たまーに過去に投稿した内容を見返したりするのですが、内容を修正したい記事がけっこうあります。1記事程度の修…
-
-
OKINOTE ロゴ デザインしました。
サイトのイメージをロゴに表現してみました。 『OKINOTE』 このブログのタイトルにもなっているOKINOTE(オキノート)。 僕が沖縄出身であること、ノートみたい…
-
-
ブログ開始1年経過。1年間で最も読まれた記事ランキングTOP20!
ハイサイ!ショウ(@OKI_NOTE)です。 ブログの運営を開始してはや1年が過ぎました。 今回は、この1年間で書いた記事の中で閲覧数が高い記事のTOP20を紹介したいと思…
-
-
5秒でリンク作成できるアプリ紹介ツール『AppStoreHelper』が捗る!
ブロガーの間では有名なアプリリンク作成ツールAppStoreHelper。 AppStoreHelperは、AppleのApp Store 、…
-
-
ロリポップからエックスサーバーに移転した理由
サーバーを移転しました。 ロリポップの契約がちょうど半年を迎えたので、これを機にサーバーをエックスサーバーに移転することにしました。 …
-
-
【2014年】買ってよかったものまとめ
2014年はブログを始めた年でもあったのですが、なんだかんだであっという間に過ぎました。当ブログでも紹介した商品もありますが、2014年買ってよかったものを7つ紹介したいと…
-
-
音声で客観的に分析!読み上げアプリを使って自分のブログ記事を聴いてみたよ
※ワケあっていつもと雰囲気を変えています。 ウェウェウェーイ!諸行無常、盛者必衰の理をあらわすショウ(@OKI_NOTE)です。 前回、記事タイトル…
-
-
ブログ連続更新100日突破して思うこと。生い立ちから振り返ってみる。
OKINOTEを始めてから早100日。 毎日更新を目標にして気づけば100日目になりました。 100日連続更…
-
-
ブロガーに朗報!ゲッティイメージズが提供する高品質画像が非商用で埋込み可能に
写真・動画の著作権使用権利などのサービスを行っているGetty Images(ゲッティイメージズ)。 3月6日に非商用目的に限り、写真の埋め込みツール…
-
-
ブログデザイン更新。固定ヘッダー&ドロワーメニューとスライダーを追加!
Stinger3に、話題のWordpressテーマ「ハミングバード」のようなスライダーを追加。固定ヘッダーとドロワーメニューも導入しました。どんなデザインになったのか。使ったツールの紹介をします。…