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を紹介したいと思…
-
-
【2014年】買ってよかったものまとめ
2014年はブログを始めた年でもあったのですが、なんだかんだであっという間に過ぎました。当ブログでも紹介した商品もありますが、2014年買ってよかったものを7つ紹介したいと…
-
-
【報告】沖縄の2大地方紙『沖縄タイムス』のWebサイトに寄稿を始めました。
この度、OKINOTEは沖縄タイムスのWebサイト「沖縄タイムス+プラス」で記事を書くことになりました。今回は、さっそく寄稿した記事含め、担当するページや寄稿に至ったまでの経緯を紹介したいと思います。…
-
-
写真多用ブロガーにおすすめ!『するぷろ』の真骨頂は画像リサイズにあり
するぷろを1週間して使用してみて思ったこと ハイサイ!今月モブログデビューをしたショウ(@OKI_NOTE)です。 モブログという言葉に馴染みのない…
-
-
SEO的な観点から過去記事の修正はNG?
このブログの運営を始めて半年以上経過し記事も250以上になりました。 検索流入が9割を占める当ブログ。 月間1…
-
-
ブログデザイン更新。固定ヘッダー&ドロワーメニューとスライダーを追加!
Stinger3に、話題のWordpressテーマ「ハミングバード」のようなスライダーを追加。固定ヘッダーとドロワーメニューも導入しました。どんなデザインになったのか。使ったツールの紹介をします。…
-
-
ロリポップからエックスサーバーに移転した理由
サーバーを移転しました。 ロリポップの契約がちょうど半年を迎えたので、これを機にサーバーをエックスサーバーに移転することにしました。 …
-
-
ブログ記事作成が捗る!5万PV達成した僕が使っている無料ツール7つ
2014年1月からOKINOTEを始めてそろそろ半年になります。 おかげさまで、多くの方々に見てもらえるブログに順調に成長してきました。  …
-
-
オフラインでもブログスタイルを反映!MarsEditのプレビュー画面設定方法
MarsEditはオフライン時スタイルが適用されない? ハイサイ!ショウ(@OKI_NOTE)です。 最近MarsEditでブロ…
-
-
記事タイトル悩んでる?惹きつけるタイトルは雑誌の見出しから学べ!
そのタイトル、自己満じゃありませんか? ハイサイ!タイトルセンス初級レベルのショウ(@OKI_NOTE)です。 記事を書いたときに、タイトルで悩むことってよくありま…