↑トップへ

スポンサーリンク
スポンサーリンク
2015年07月08日

Seesaaブログをレスポンシブ化するために参考になる記事と方法まとめ


こんばんは。
おかげさまで、ようやくこのブログもレスポンシブデザインにすることができました!
スマホで見ていただくか、PCの方はブラウザのウィンドウの幅を小さくしてみていただくとわかるかと思います。

とにかくひたすら先人様の知恵をお借りして取り組んだら何とかできました。
ここでは、SeesaaブログのPC表示をレスポンシブデザインに変えたい方のために、私が特に参考にさせていただいたサイト、ブログ記事をまとめます。


スマホから閲覧した訪問者をPCサイトにとばす方法


こちらを参考にしました。
シーサーブログユーザーはスマートフォンでもPCサイトを表示させよう | 使える無料ソフト&無料サービス

そもそもこちらの記事を拝見して今回のレスポンシブ化を決めたので、こちらの記事がなければいまだに私のブログは広告がべたべたでした…。
まあスマホで見た時のオーバーレイ広告だけはどうしても消せなかったんですけどね。


具体的なHTMLとCSSの記述


こちらの記事が見やすく、わかりやすいです。
初心者も分かる!レスポンシブ・デザインの作り方

平易な言葉で説明してくださっているのに加え、サンプルデモがあるのも非常に助けになりました。
まずはお使いのSeesaaブログのHTMLとCSSをコピーし、こちらの記事を参考に少しずつ手を加えていくといいでしょう。
私はAptanaStudioを使って作業しましたが、色分けとかできればこれでなくても大丈夫だと思います。
Windows搭載のテキストエディタとかだとちょっと混乱しちゃいそうです。


また、こちらの記事も理解の助けになりました。
レスポンシブデザインサイトの作り方。たった2つのことを覚えておけば簡単に作れますよ!

こちらに書かれている通り、メディアクエリとビューポートの記述をすればレスポンシブデザインは作れます。
あとはなんかズレたりしたのを直すだけ。
ビューポートは1行くらいのコピペで終了するので、実際メディアクエリさえ理解できればレスポンシブデザインはもう作れたも同然じゃないでしょうか。


ウィンドウ幅に合わせた画像サイズの設定方法


画像を投稿している場合、こちらを設定していないと画像が表示させたい幅からはみ出てしまいます。
こちらの記事を参考に修正しました。
ウインドウ幅に合わせて画像サイズを変化させる方法 [ホームページ作成] All About

画像を2枚用意して分けるのは大変なので、私は{width:100}で設定をしています。


あとは地道な変更を加えていく


ここまでできれば、後はズレを修正していけばOKです。
私の場合はPC表示で背景画像を使用しているテンプレートを使っていたので、まずそれを非表示にし、代わりに白の背景色を設定しました。
そのあと記事の下に入り込むサイドバーの各タイトルを中央揃えにしたりですかね。
私のようなHTML・CSSの初心者の方は、何かおかしいところがあったらページのソースを表示して該当部分を見つけ、修正していく作業が必要になると思います。


レスポンシブデザインの確認方法


さて、実際にスマホでどのように表示されるのかを確認しながら作業を進めたいところですよね。
私はSeesaaブログのプレビュー機能を使っていました。
Aptana Studioで変更を加えたCSSをSeesaaブログのCSS編集画面にコピペし、保存をしないでプレビューをします。
そしてブラウザのウィンドウ幅を狭めれば大体どんな感じになっているか確認することができます。
問題なさそうであれば保存しましょう。
保存した後は実際にスマホで見るか下記のようなサイトを利用することで確認ができます。
Demonstrating Responsive Design
右上の小窓にURLを入力すればブラウザ上でいくつかのサイズの確認ができます。


おわりに


いかがでしたか?
こんな感じで、私のブログは晴れてレスポンシブデザインを手に入れることができました。
写真 2015-07-08 0 07 38.png


ちなみにレスポンシブ対応前(PC表示にとばす設定のみしていた)はスマホで閲覧するとこんな感じでした。
写真 2015-07-07 18 56 54.png

地味に左サイドバーを無理やり右サイドに移動させたりもしています。笑
スマホで閲覧したときに、ブログ記事の下にメニューが来るようにです。

これからSeesaaブログでレスポンシブデザインをしたい方は、ぜひこれらの記事を参考に頑張ってみてください!
スポンサーリンク

スポンサーリンク
にほんブログ村 小遣いブログ SOHO・在宅ワークへ
posted by あらいぐま at 01:36 | Comment(0) | TrackBack(0) | Seesaaカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。