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)です。   前回、記事タイトル…

記事を読む

okinote_10k

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

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

記事を読む

2014-0309 copy

月間160万PVのプロプロガー”立花岳志”氏の7つ道具

  立花岳志さんといえば、「No Second Life」というサイトの管理人で月間160万PVを突破するプロプロガーです。 アップル系ガジェットやネット関連、書評、ライフハック…

記事を読む

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

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

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

記事を読む

ブログ SEO アクセス

SEO的な観点から過去記事の修正はNG?

    このブログの運営を始めて半年以上経過し記事も250以上になりました。   検索流入が9割を占める当ブログ。   月間1…

記事を読む

Google AdSense アドセンス お知らせ

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

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

記事を読む

Mac ソフトツール appstorehelper

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

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

記事を読む

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

過去記事を一括修正!文字列を置換で画像差し替えも可能なプラグイン

  ハイサイ!ショウ(@OKI_NOTE)です。 ブログを書いていると、たまーに過去に投稿した内容を見返したりするのですが、内容を修正したい記事がけっこうあります。1記事程度の修…

記事を読む

iPhoneアプリ「するぷろ」

写真多用ブロガーにおすすめ!『するぷろ』の真骨頂は画像リサイズにあり

  するぷろを1週間して使用してみて思ったこと   ハイサイ!今月モブログデビューをしたショウ(@OKI_NOTE)です。 モブログという言葉に馴染みのない…

記事を読む

ブログ ツール

ブログ記事作成が捗る!5万PV達成した僕が使っている無料ツール7つ

  2014年1月からOKINOTEを始めてそろそろ半年になります。 おかげさまで、多くの方々に見てもらえるブログに順調に成長してきました。    …

記事を読む

ad

糸満の電照菊
秋夜彩る電照菊。南部有数の糸満市小波蔵はドライブコースに最適

  涼しくなってきたこの時期。いかとお過ごしで…

「美らイチゴ糸満農園」
予約不要でいちご狩り。南部に「美らイチゴ糸満農園」がオープン!

2017年2月15日に開園した新いちご狩りスポットに行ってきました。予…

ルネッサンスリゾートオキナワのイルミネーション
プールに浮かぶ青イルカ。ホテル『ルネッサンスリゾート』のイルミネーション

大きく光る「R」のロゴ。ホテルのビーチエリアに約8万球の明かりが灯りま…

中国式庭園・福州園のライトアップ
日本百名月に認定。那覇市『福州園』の夜間特別ライトアップ

異国情緒あふれる那覇市『福州園』。ライトアップイベントは、2016年度…

2017-0327.4.jpg
海も見渡せる沖縄最北端の花カーニバル『東村つつじ祭り』に行ってきた。

那覇から片道2時間半。沖縄最北端の花カーニバル『東村つつじ祭り』に行っ…

ケータリングサービスinOIST
上間弁当てんぷらの新サービスがお洒落すぎて紹介せずにはいられない

弁当や惣菜でおなじみの「上間弁当てんぷら」が新ケータリングサービス"C…

名護城公園ビジターセンターSubaco(すばこ)
こんなところに!沖縄建築賞受賞の穴場カフェ『名護城公園ビジターセンター』

2015年7月にオープンした新施設「名護城公園ビジターセンター Sub…

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