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^)/
-
-
ブログ開始1年経過。1年間で最も読まれた記事ランキングTOP20!
ハイサイ!ショウ(@OKI_NOTE)です。 ブログの運営を開始してはや1年が過ぎました。 今回は、この1年間で書いた記事の中で閲覧数が高い記事のTOP20を紹介したいと思…
-
-
ブログ連続更新100日突破して思うこと。生い立ちから振り返ってみる。
OKINOTEを始めてから早100日。 毎日更新を目標にして気づけば100日目になりました。 100日連続更…
-
-
ブログ初心者の執筆効率化に最適!ユーザー辞書よりDASHを導入しよう!
ハイサイ!ショウ(@OKI_NOTE)です。 ブログ効率化を図るために、以下の記事を読んで導入したMacアプリ「DASH」が便利すぎて感動しました!(いまさら) &nb…
-
-
ロリポップからエックスサーバーに移転した理由
サーバーを移転しました。 ロリポップの契約がちょうど半年を迎えたので、これを機にサーバーをエックスサーバーに移転することにしました。 …
-
-
記事タイトル悩んでる?惹きつけるタイトルは雑誌の見出しから学べ!
そのタイトル、自己満じゃありませんか? ハイサイ!タイトルセンス初級レベルのショウ(@OKI_NOTE)です。 記事を書いたときに、タイトルで悩むことってよくありま…
-
-
OKINOTE ロゴ デザインしました。
サイトのイメージをロゴに表現してみました。 『OKINOTE』 このブログのタイトルにもなっているOKINOTE(オキノート)。 僕が沖縄出身であること、ノートみたい…
-
-
ブログはじめました。
きっかけはひとつの記事。 ーインターネット文化における「1%ルール」とは? / GIGAZINE photo credit: ingrid eu…
-
-
ブログデザイン更新。固定ヘッダー&ドロワーメニューとスライダーを追加!
Stinger3に、話題のWordpressテーマ「ハミングバード」のようなスライダーを追加。固定ヘッダーとドロワーメニューも導入しました。どんなデザインになったのか。使ったツールの紹介をします。…
-
-
【報告】沖縄の2大地方紙『沖縄タイムス』のWebサイトに寄稿を始めました。
この度、OKINOTEは沖縄タイムスのWebサイト「沖縄タイムス+プラス」で記事を書くことになりました。今回は、さっそく寄稿した記事含め、担当するページや寄稿に至ったまでの経緯を紹介したいと思います。…
-
-
LINE自作スタンプクリエイター向け。2,000円から広告販売始めました。
今月で半年を迎えるこのブログ。 おかげさまでアクセス数が順調に伸びており、7万PVを突破しました。 …