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^)/

本日の「ブログ」カテゴリ人気記事!
この記事似てるかも?
新しいサイトデザイン

ブログデザイン更新。固定ヘッダー&ドロワーメニューとスライダーを追加!

Stinger3に、話題のWordpressテーマ「ハミングバード」のようなスライダーを追加。固定ヘッダーとドロワーメニューも導入しました。どんなデザインになったのか。使ったツールの紹介をします。…

記事を読む

広告 OKINOTE サムネイル

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

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

記事を読む

iPhoneアプリ「するぷろ」

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

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

記事を読む

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

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

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

記事を読む

ブログ SEO アクセス

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

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

記事を読む

computer

ブログはじめました。

  きっかけはひとつの記事。   ーインターネット文化における「1%ルール」とは? / GIGAZINE photo credit: ingrid eu…

記事を読む

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

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

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

記事を読む

100 Day

ブログ連続更新100日突破して思うこと。生い立ちから振り返ってみる。

    OKINOTEを始めてから早100日。   毎日更新を目標にして気づけば100日目になりました。   100日連続更…

記事を読む

iplaywalk

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

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

記事を読む

タイトルと内容のバランス

記事タイトル悩んでる?惹きつけるタイトルは雑誌の見出しから学べ!

そのタイトル、自己満じゃありませんか?   ハイサイ!タイトルセンス初級レベルのショウ(@OKI_NOTE)です。 記事を書いたときに、タイトルで悩むことってよくありま…

記事を読む

ad

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

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

2016年買ってよかったものまとめ
カメラ機材とおつまみ。2016年買ってよかったものまとめ

振り返りの季節。2016年は、物はそんなに買っていないものの、一眼レフ…

くもじイルミネーション
【画像】都会にも冬の訪れ。那覇パレットくもじのイルミネーション

パレットくもじから国道58号線の久茂地交差点周辺を、約5万の電飾で彩る…

2016-1220.12.jpg
浜比嘉島に行く理由をみーつけた。鍋やBBQもできるおしゃれなホテル「トリップショットヴィラズ・ハマヒガ」

神聖な場所としてのイメージが強い浜比嘉島。今年の8月、ここにプライベー…

かりゆしミリオンファンタジー
【画像】140万球のイルミネーションが無料!恩納村の「かりゆしビーチリゾート・オーシャンスパ」

沖縄の3大イルミネーションの1つ、かりゆしビーチリゾートの「ミリオンフ…

ブルーシール
【画像】ずっと見ていたい。ブルーシール牧港本店のイルミネーション

11月1日に点灯式が開催されイルミネーションで彩られるブルーシール牧港…

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

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

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