テンプレートをレスポンシブ化!ツールで出来栄えを確認しよう!

目安時間:約 4分
  • このエントリーをはてなブックマークに追加
  • 人気ブログランキング

Kaetenのテンプレートをレスポンシブ化してみた。

 

せっかく購入したKaetenのテンプレートですが、
レスポンシブ化されていないので、レスポンシブ化してみました。

 Tablet iphone

今回の記事では、レスポンシブ化する時にお世話になったツールを
紹介します。 

 

レスポンシブ化してみた。

私は、Kaetenのテンプレートが気に入ってます。
デザインが洗練されていて、まず第一印象の見栄えがいい。

 

しかし、ちょっと前に購入したテンプレートなので
レスポンシブ対応ではなかったんですね。

 

そのため、今回は、CSSやらHTMLやらの勉強のため
自分でFC2のテンプレートをレスポンシブ化してみました。

Mac iphone

この画像は、レスポンシブ化が完了した後に埋め込み画像にしたものです。

いい感じで、iPhoneのレスポンシブ化ができてますね。

 

 

確認を一つ一つ。面倒なのでツールで一気に見てみた。

レスポンシブ化の作業で一番たいへんだったことは、
レスポンシブの仕組みを理解するところでしたが、

 

作業中の確認作業もなかなかたいへん!!

パソコンとiPhoneとにらめっこしながらやってましたが、
面倒になったのでツールで一気に確認するようにしてみました。

 

ツールを使うといっぺんに確認ができるので便利ですね。 

 

いろいろあったけど、使いやすかったツールを2つ。

ツールはいろいろあったけど、私が使ってみてよかったと思ったものは2つ。

サイズごととかデバイスごとに見れるので便利でした。

 パソコン場合は、自分の作業中に見れるので、
少なくともiPhoneがあれば充分ですね。 

 

Responsive Web Design Testing Tool

http://mattkersley.com/responsive/

特徴

  • 幅または、デバイスタイプを指定できる。
  • 対応サイズははiPhoneやiPadのサイズ
 
実際の画面はこんな↓感じです。
スマホサイズになるとグローバルメニューあたりが変わってますね。

 Responsive Design Testing

 

もう1つは、

The Responsinator

http://www.responsinator.com/

特徴

  • iPhoneやiPadにサイトが埋め込まれて表示される。
  • 各デバイスの縦・横の出来栄えを確認できる。
 
これは、iPhoneの縦の場合の出来栄えを見たものです。↓

Responsinator blogmailmag blog fc2 com

パソコンで作業しながら、各デバイスのサイズの
出来栄えを一気に見れるので便利でした。 

 

 

あとがき

 

以上、今回は、レスポンシブ化する時に重宝する
レスポンシブデザインの確認ツールを紹介しました。

 

レスポンシブ化をやってみた私の感想ですが、

何と言っても始めは、レスポンシブ化の仕組みを理解することが

必要なので、時間を要しますが、

 

その後は、調整と確認の繰り返しなので、
ツールで確認しながら、やっていくと効率的で
作業がはかどりますね。

 

気に入ったテンプレートがあったけど、

 

「レスポンシブ対応ではなかった。」

と言う場合に自分でやってみようと思ったら、
今回紹介したツールを使ってみるといいでしょう。


なかなかいいですよ。 

Iphone6 spacegrey landscapeMacbookair13 front 

 

今回は以上です。

ありがとうございました。

 

  • このエントリーをはてなブックマークに追加
  • 人気ブログランキング

この記事に関連する記事一覧

コメントフォーム

名前

メールアドレス

URL

コメント

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

今、おすすめ!
あなたの経験・知識が商品になる!!
Eban Pagan
著者:エベン・ペーガン

「あなたの知識・経験・情熱をデジタル商品にしてオンラインで売り出す方法」
このサイトから14人 の方に購入いただいてます。

感想・レビューはこちら!
サイト管理人プロフィール
goma

管理人:ごま

全く知識なし・技術なし・四十路のサラリーマン。英語圏を旅したいがために旅費を稼ぐためインターネットビジネスの世界に飛び込んだ。副業でブログアフィリエイトを開始

詳しいプロフィールはこちら

副業術カテゴリ
ごまのサイト
アーカイブ

ページの先頭へ