Dwの可変グリッドレイアウトを使ってブログを構築した際に気をつけた事など|すしぱくの楽しければいいのです。ブラウザサイズごと最適化して表示させるレスポンシブウェブデザイン(以下RWD)にリニューアルしました。「どうやって作ったのか教えてほしい」など、数人からリプライをもらいまして、使用したDreamWeaverCS6の可変グリッドレイアウトについて、気をつけた点などを備忘録ついでに書いてみましたよ。流行りに乗り構築したので不安もありましたが、PV数+広告収入は上昇しており個人的には「導入してよかったぁ」っと満足してます。Spiceヒロさんが解説している"レイアウト7選"を読んでおきましょう。レスポンシブウェブデザインについての基本的な知識や、その他のツールで構築する場合の手法などが書かれております。こちらを踏まえて、今回の制作です。【スマートフォン:1カラム】このように異なる3つのブラウザサイズごと表示を変えています。確認方法ですが、ブラウザサイズを小さくすれば自動的に変更されます。一回一回変更するのは面倒な方は、ブックマークレットなどで簡単に確認する事もできますので導入してみてください。利用して確認しています。('A')Dw可変グリッドレイアウトを使うDwCS6から実装された可変グリッドレイアウトを利用すれば、うちのようなRWDのサイトが簡単に作れちゃいます。気なる部分だけ説明してきます。可変グリッドレイアウトを新規作成する際に表示される初期画面ですね。どこの説明サイトもここの設定についての詳細がほとんどないのですが、デフォルトを利用した場合、あとあと面倒な事になるので必ず変更しておきましょう。各ブラウザサイズごとに2~24までの数値を入力する事ができます。初期設定のグリッド数は意外と少なく、スマホ程度であれば問題はないかもしれませんが、デスクトップなど細かく設定したい場合、(例えば、カラムの中に左右小さいボックスで分割するなど)グリッド数が少ないと設定するのが意外としんどいです。できれば、最大数24で制作するのがいいかもしれないです。次にグリッドごとに列のスキマを決めるガーターですが、デフォルトは25%となっています。対して25%の列幅です。グリッドの幅から25%分のスキマが表示されていますね。こちらは、50%の列幅にした場合です。グリッド幅の半分がスキマとして表示されています。こちらは、100%の列幅にした場合です。グリッド幅と同じサイズのスキマが表示されていますね。グリッド数が多くなるとこのスキマ部分が見えなくなるので、10~25%あたりが丁度いい感じです。可変グリッドはレイアウトを決める時だけ上記設定で、デスクトップ・タブレット・スマートフォンと3つのブラウザに対しての初期設定は完了しました。動画を参考に操作をすると、グリッドの領域を引き伸ばしたり、マージンをドラッグして確保したりできるので、まるで当時のホームページビルダーを使っている感覚で操作する事ができます。(これがビジュアルエイドっと呼ばれるアレですね。)常にこの表示モードで作業できればいいのですけど、めっさ重いです。メモリ16GB、SSD、i7)このあたりは今後改善してくれると助かるのですが、作業用PC2台とも重くてコード書くのにラグが発生してしまう為、ビジュアルエイド機能をOFFに切り替えてデザインをしなくてはならない状態です。wなので、可変グリッドレイアウトを使う時はレイアウトする最初の時だけ利用するのがオススメです。フレームワークを作る感覚で行うといいかもですね。CSSの継承範囲が異なります。可変グリッドレイアウトの構築において、マジで面倒なのはブラウザサイズごとにCSSを書かなくてはならない点です。Connection詳しい継承範囲などは、こちらに記載されているのでぜひとも確認していただきたいのですが、デザインをしていく上でCSSの継承範囲が全く異なっております。デスクトップ用のCSSを書いた後、モバイル用にも適用したい場合は再度モバイル用のCSSに書かなくてはならない、(共通の場合はもう一つ共通用のCSSを作るといいけど)わけですね。画像の縮小・拡大についてDWの可変グリッドレイアウトを利用すると、特に指定しなくても画像が自動的に縮小・拡大されます。ある程度デスクトップサイズで作っておけば、タブレット・スマートフォンに対応した画像サイズに変更して表示してくれます。ブログで利用する場合は注意が必要です。利用して記事を書いており、エントリ部分に画像はUPされるのですが、うまく縮小・拡大してくれません。autoと記入したら自動的に縮小・拡大されました。100%で可変グリッド対応します。アドセンス部分についてGoogleアドセンスが、レスポンシブに対応しておりません。広告がこのようにはみ出します。この領域については現在対応策はなく、あまりにも大きすぎる広告の場合デザインがアレになるので注意が必要っぽいです。AdSenseの広告を表示する方法JS側で広告表示を合わせる方法なども公開されておりますが、アドセンスの利用規約的にNGなので注意してください。Google先生はレスポンシブ推奨だけに、早いところお願いしたいですね。今回のリニューアルは賞味3日くらいでできました(MT)。比べアクセス数も伸びており広告クリック率も上昇しております。(全体10%以上は向上しているかと思われ)特に難しいコーディングをする必要もなく視覚的に操作する事ができるので、CSSが得意ではないWebデザイナーさんでも簡単に作り上げられるのではないでしょうか。単体はこの値段になりますね。ワードキャンプ東京2012に行ってきたよ。ことで、ひとまず36ヶ月分を購入してしまったすしぱくです。Adobe...1年間コツコツ続けたハウツーサイト、立ち上げて大手から案件をいただくまでのお話Web制作に役立つネタ「誰でもできることをただ続けるだけ」がモットーのすしぱくです。<楽しければいいのです。最終日!取得・申請できるか調べてみたWeb制作に役立つネタ日本のインターネッツ黎明期に、風俗サイトかのような装飾を施した実在する病院「愛生会」のWebサイトが閉鎖して1年。太陽にほえろのBGMが流れていた頃からブックマークし続け、ピカピカ招き猫の「ウェルコ...増刷が決定した「Web制作の最新常識」の評判ってどうなの?レビューを読んでから、レビューしてみたWeb制作に役立つネタ裁断機を購入したので、献本してもらった書籍を自炊したところ「こいつ失礼すぎるだろ、オイッ」と吐き捨てられたすしぱくです。読まずにレビューする人よりはマシだろとか思...自分のサイトがペナルティ!?突然の検索流入ゼロも!セーフブラウジングやフィルタリングのお話。サーバー周り(バックエンド)をお願いしている技術者さんから、こんな連絡がありました。(‘A&rsqu...ロリポップの一連の改ざんトラブルで大変なことになった僕の記録Web制作に役立つネタぱくたそサーバー(Pleskなど)のヘルプデスクをお願いしているエンジニアの方と『サーバーを借りる際、「サポートだけにはしっかり費用が払える」を目安にしたいですよねー。』などと、安さ爆発のロリポップ...必見!ぱくたそを支える高速検索システム”flexbleSearch"が新しくなります。Web制作に役立つネタご存知の方も多いと思いますが「無料写真素材ぱくたそ」の検索フォーム(flexiblesearch)は、高速で検索結果が表示されます。リリースを真剣に考えてみた。Type(MT)のメージャーアップデート「6」を発表しましたね。前バージョンである「MT5」から約4年(2009年11月)ぶりのリリースです。...iSoopleに待望の共有機能キターーッ!他人がまとめたRSS講読リストを読めるぞ、晒せ!Web制作に役立つネタiGoogle終了に伴い、そぷさんの作ったiSoopleに共有機能が追加されましたよ。RSSの登録って地味に面倒です。>>2010年11月頃から本格的に活動を始めWeb制作関連から飲食レビュー、マーケティング、気になる情報(ニュース)まで幅広い分野に手を出し記事を書いています。誤字脱字の指摘はもちろん、ご意見ご感想などもお待ちしております。こんな企画をして欲しいとかネタのタレコミなども大好物です。当サイトは全てのページでリンクフリーです。記事の全文転載を許可しておりません。引用の場合、掲載許可の必要はありませんが、必ず引用元のリンクを貼ってください。質素と贅沢を同時に味わえる汁なしチキンラーメン卵のせが絶品だった。そのスクリーンショットを公開したらサヨウナラ。名前:すしぱく横浜県在住の自称Web屋です。日々楽しい事を模索しながらポジティブに生きてます。