レスポンシブ Webデザイン

CherryBlossom80 パソコン用

先日仕事でスマホ用サイトを作っていると書いたのですが、こちらのブログは2011年くらいにデザインをちょこっといじったまま放置しっぱなしでしたので、今更ながら何だかとても気になってしまい、やっとこさ「レスポンシブWebデザイン」に対応させました。

CherryBlossom80 パソコン用
CherryBlossom80 パソコン用

実は今日は風邪をひいてしまい熱が出てしまって、仕事がオセオセだった割に会社をお休みしてしまったのですが、最近はどうも頭が制作モードになってしまっているため、どーしても変更したくなってしまい、布団の中からノートパソコンで、WordPressphpスタイルシートをせっせといじってしまいました。

CherryBlossom80 スマホ用
CherryBlossom80 スマホ用2
CherryBlossom80 スマホ用

パソコン版としてテーマを作っておりましたので、元々のデザインはメインのエントリーとサイドナビが表示される2カラム。
これがスマホなどの小さい画面になると、1カラムになりサイドナビなどはエントリーの下に表示される様にいたしました。
(パソコンでもウィンドウを小さくすると、1カラムになります)

そんなこんなで、グラフィック的なデザインはほとんど変更しておりませんが、マージンやフォントの大きさ、なんとなく気になっていた所などはちょこちょこっと微調整し、とりあえず完成!

今までのスマホ対応は「WPtouch」というプラグインを使い表示しておりましたが、こちら無料のプラグインのため「テーマ」はあまり選べず、パソコン版とイメージが変わってもしまいますし、必要最低限のエントリーのみの表示となるため、それはそれでシンプルで良いのではありますが、今回はレスポンシブデザインにしてみたかったので、パソコン版と同じHTMLとCSSを読み込ませ、今までパソコン版のみの表示だった「人気のエントリー」や「関連するエントリー」「月ごとのアーカイブ」など、スマホで見ても表示出来る様になりました。

欠点は、やはり読み込む物が多いほど重くなります…。が、導線が少なすぎても不便なので、とりあえずこれから随時使いづらい場所など、修正をかけて行きます(^^)/

ただ「single.php」の次のエントリーがどうしても出て来ず…今だ原因不明。困ったヨ。

おまけ
ポメラニアン
お花のおひめさま☆

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Scroll to top