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^)/
-
-
LINE自作スタンプクリエイター向け。2,000円から広告販売始めました。
今月で半年を迎えるこのブログ。 おかげさまでアクセス数が順調に伸びており、7万PVを突破しました。 …
-
-
月間160万PVのプロプロガー”立花岳志”氏の7つ道具
立花岳志さんといえば、「No Second Life」というサイトの管理人で月間160万PVを突破するプロプロガーです。 アップル系ガジェットやネット関連、書評、ライフハック…
-
-
記事タイトル悩んでる?惹きつけるタイトルは雑誌の見出しから学べ!
そのタイトル、自己満じゃありませんか? ハイサイ!タイトルセンス初級レベルのショウ(@OKI_NOTE)です。 記事を書いたときに、タイトルで悩むことってよくありま…
-
-
30日の無料期間あり!ブログエディタ『MarsEdit』の導入&初期設定方法
多くのブロガーが愛用している記事作成ツール「MarsEdit (マーズ・エディット)」。ブロガー必読のこちらの本にも利用のすすめが書かれていました。 必ず…
-
-
ブログはじめました。
きっかけはひとつの記事。 ーインターネット文化における「1%ルール」とは? / GIGAZINE photo credit: ingrid eu…
-
-
5秒でリンク作成できるアプリ紹介ツール『AppStoreHelper』が捗る!
ブロガーの間では有名なアプリリンク作成ツールAppStoreHelper。 AppStoreHelperは、AppleのApp Store 、…
-
-
OKINOTE ロゴ デザインしました。
サイトのイメージをロゴに表現してみました。 『OKINOTE』 このブログのタイトルにもなっているOKINOTE(オキノート)。 僕が沖縄出身であること、ノートみたい…
-
-
ブロガーに朗報!ゲッティイメージズが提供する高品質画像が非商用で埋込み可能に
写真・動画の著作権使用権利などのサービスを行っているGetty Images(ゲッティイメージズ)。 3月6日に非商用目的に限り、写真の埋め込みツール…
-
-
過去記事を一括修正!文字列を置換で画像差し替えも可能なプラグイン
ハイサイ!ショウ(@OKI_NOTE)です。 ブログを書いていると、たまーに過去に投稿した内容を見返したりするのですが、内容を修正したい記事がけっこうあります。1記事程度の修…
-
-
オフラインでもブログスタイルを反映!MarsEditのプレビュー画面設定方法
MarsEditはオフライン時スタイルが適用されない? ハイサイ!ショウ(@OKI_NOTE)です。 最近MarsEditでブロ…