Stinger3から乗り換えずにStinger5のメリットを取り入れよう

: 2015/11/02 : 4 ブログ

レスポンシブデザインの魅力

 

ブログデザインの骨格でもあるテーマ。このブログは開設当初からStinger3を使用していますが、Stinger5がリリースされたことで乗り換えようか迷っています。

Stinger5の特徴の1つはレスポンシブデザイン。

 

レスポンシブデザインとは、Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。

——e-Words

 

通常は、それぞれのデバイスに最適化するよう複数のHTMLファイルやCSSファイルを用意します。最近ではタブレットやスマートフォンの機種が増えてきたので、それぞれのデバイスに合わせてファイルを容易するのは大変。そこで登場するのがレスポンシブデザイン。ファイル1つに画面サイズ別に記述することで、管理がとても簡単になるのです。

Stinger3の場合、CSSは2つあり、モバイルとパソコンで分かれていますが、Stinger5だとCSS1つでまとめられています。

 

スポンサーリンク

 

Stinger3にレスポンシブデザインを取り入れてみよう

 

レスポンシブデザインはCSSに条件を記載するだけで簡単に採用することができます。振り分けにはMedia Queriesというものが使われています。

構造についてはこちらの記事が参考になります。

 

Stinger5カスタマイズ!どこがどのデバイスに対応?「style.css」徹底分析!Stinger5カスタマイズ!どこがどのデバイスに対応?「style.css」徹底分析!

最新版のStinger5はどのデバイスから見ても見た目が自動で最適化される…

 

記述はシンプル。以下のコードにMax widthやMin widthの大きさを指定すると、その記述下の領域のスタイルが適用されます。

 

@media only screen and (max-width: ◯◯◯ px)
@media only screen and (min-width: ◯◯◯ px)

 

 

このブログの場合、記事下の人気記事の表示をスマートフォンのサイズ別で調整しています。

例えばiPhone4sや5の場合、人気記事は2つ並びになっています。

 

Stinger3 レスポンシブデザイン  iPhoneの表示

 

こちらはiPhone6での表示。記事が3つ並ぶように調整しました。

 

Stinger3 レスポンシブデザイン  iPhoneの表示

 

そしてこちらがiPhone6 Plus。記事数3つは変わりませんが、余白ができないよう記事のサムネイルの大きさを大きくしました。

 

 

Stinger3 レスポンシブデザイン  iPhoneの表示

 

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つの道の駅で味わえる「おいしいもの」を食べに行こう (外部リンク)

  

[随時更新]Amazonのほしい物リストを公開中!

スポンサーリンク

ad


シェア感謝です! \(^o^)/

本日の「ブログ」カテゴリ人気記事!
この記事似てるかも?
iplaywalk

音声で客観的に分析!読み上げアプリを使って自分のブログ記事を聴いてみたよ

※ワケあっていつもと雰囲気を変えています。   ウェウェウェーイ!諸行無常、盛者必衰の理をあらわすショウ(@OKI_NOTE)です。   前回、記事タイトル…

記事を読む

ブログエディタ『MarsEdit』の導入&初期設定方法.jpeg

30日の無料期間あり!ブログエディタ『MarsEdit』の導入&初期設定方法

  多くのブロガーが愛用している記事作成ツール「MarsEdit (マーズ・エディット)」。ブロガー必読のこちらの本にも利用のすすめが書かれていました。   必ず…

記事を読む

2014年人気記事ランキングトップ20.jpg

ブログ開始1年経過。1年間で最も読まれた記事ランキングTOP20!

  ハイサイ!ショウ(@OKI_NOTE)です。 ブログの運営を開始してはや1年が過ぎました。 今回は、この1年間で書いた記事の中で閲覧数が高い記事のTOP20を紹介したいと思…

記事を読む

Google AdSense アドセンス お知らせ

Google Adsenseが広告表示回数100万回の目標達成を祝ってくれたよ

  おや?アドセンスの様子が…   先日、いつものようにGoogle Adscense (グーグル・アドセンス)で本日の見積もり収益額を見ようと開いたらこんなポップが表示…

記事を読む

OKINOTE ロリポップ Xサーバー Wordpress

ロリポップからエックスサーバーに移転した理由

    サーバーを移転しました。   ロリポップの契約がちょうど半年を迎えたので、これを機にサーバーをエックスサーバーに移転することにしました。 …

記事を読む

okinote_10k

OKINOTE ロゴ デザインしました。

サイトのイメージをロゴに表現してみました。   『OKINOTE』 このブログのタイトルにもなっているOKINOTE(オキノート)。 僕が沖縄出身であること、ノートみたい…

記事を読む

Mac ソフトツール appstorehelper

5秒でリンク作成できるアプリ紹介ツール『AppStoreHelper』が捗る!

    ブロガーの間では有名なアプリリンク作成ツールAppStoreHelper。   AppStoreHelperは、AppleのApp Store 、…

記事を読む

広告 OKINOTE サムネイル

LINE自作スタンプクリエイター向け。2,000円から広告販売始めました。

    今月で半年を迎えるこのブログ。   おかげさまでアクセス数が順調に伸びており、7万PVを突破しました。   …

記事を読む

ブログエディタ『MarsEdit』の導入&初期設定方法.jpeg

オフラインでもブログスタイルを反映!MarsEditのプレビュー画面設定方法

  MarsEditはオフライン時スタイルが適用されない?   ハイサイ!ショウ(@OKI_NOTE)です。   最近MarsEditでブロ…

記事を読む

2014年買ってよかったものまとめ BOSEスピーカー

【2014年】買ってよかったものまとめ

  2014年はブログを始めた年でもあったのですが、なんだかんだであっという間に過ぎました。当ブログでも紹介した商品もありますが、2014年買ってよかったものを7つ紹介したいと…

記事を読む

ad

沖縄観光先読みカレンダーPRO
海外観光客の動きがわかる?「沖縄観光先読みカレンダーPRO」2017年版

外国人観光客の動向を先読みする目的で千部限定1部500円で販売している…

桑っちーグランプリ&スイーツフェア
浦添特産といえば島桑。地元が集う『第5回桑っちーグランプリ&スイーツフェア』

浦添市で毎年開催している島桑イベント。そもそもなぜ桑なのかというと、浦…

沖縄大百科事典
「ン」で始まる言葉も⁉︎ 沖縄を詳細に記した最初で最後の『沖縄大百科事典』とは?

沖縄タイムス社が創刊35周年を記念し1983年に発行した百科事典。上中…

那覇大綱挽
世界最大級の全長200㍍! 第46回『那覇大綱挽まつり』2016の熱気を感じてきた!

今年で46回目となる「那覇大綱挽(ひき)まつり」。全長200メートル、…

meetuplogo2_resize
沖縄ブロガーミートアップvol.2開催します!

10月16日に沖縄ブロガーミートアップvol.2を開催することになりま…

オーシャンドリーム号
ピースボートの世界一周客船「オーシャンドリーム号」の船内見学に行ってきた

オーシャンドリーム号といえば「ピースボート」の船舶旅行に使用される船で…

Vanilla-Mountain
遊び心あふれたジャンクなスイーツ!NY発のフリークシェイクが沖縄の北谷に上陸

インスタグラムで話題になっているフリークシェイクを知っていますか? な…

  • LINE スタンプ記事一覧へ ニューヨークの記事一覧へ 沖縄関連の記事へ starbucksの記事へ EOS70Dの記事へ