変更 チェンジ

当ブログのテンプレートをレスポンシブWebデザイン対応に変えました。

FC2ブログで書いていたので、いままでパソコンで見る画面とスマホで見る専用ページは別々のテンプレートで作成されていて、まったく違うデザインでした。

レスポンシブデザインとは、Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。

レスポンシブデザインとは|レスポンシブWebデザイン|RWD|responsive design - 意味 / 定義 / 解説 / 説明 : IT用語辞典


レスポンシブWebデザインでは、パソコンで見るブログテンプレートのデザインのままスマホでも閲覧できるように記事幅が可変されるようになります。

変更前→変更後の違い


(スマホで見る当ブログはこのように変わりました)
FC2ブログspモード(スマホ画面) → レスポンシブデザイン(スマホ側)


(いままでパソコンで見ていた画面はこんな感じ 2015年5月~2016年10月)
旧テンプレート(2015年5月~2016年10月)

(現在[2016年10月20日時点]はこのように見えるはずです)
新テンプレート(2016年10月~)

なぜレスポンシブWebデザインに対応させたのか


やはりFC2ブログでレスポンシブWebデザインに対応させている人は少ないので目立つ!?

10週年を迎えて今後もブログは趣味として長いこと続けていけそうな感じになってきましたので、一段と進化させてみたかったのもあります。

複数のファイルを用意する場合に比べ、デザインや機能の自由度は下がるが、すべての機器に同じ内容を表示でき、更新作業の簡略化や更新漏れの防止が期待できる。検索エンジンやアクセス解析に内容が重複した複数の異なるURLが出現することも避けられる。

レスポンシブデザインとは|レスポンシブWebデザイン|RWD|responsive design - 意味 / 定義 / 解説 / 説明 : IT用語辞典


FC2ブログではスマホで見るサイトのURLには末尾に『?sp』が付きます。
これはブログで記事を作成するとネット上ではパソコン用の記事とスマホ用の記事の2つのURLが存在しているようなものです。

いままで自分のブログ記事をGoogle検索してみると検索結果に『?sp』が付いているスマホ側のサイトが上位に登場することが非常に多いのが気に入りませんでした。

これをパソコンで調べた人がクリックしても、細く長いスマホ画面が出現してしまいます。

レスポンシブデザインならパソコン側とスマホ側というURLの違いがなくなりますので悩まされることもなくなりそうです(^^)
※今までの記事も修正されていくのかは不明

アクセス数をいままでパソコンとスマホの両側を集計していましたが、これからはシンプルかつ正確な数値がわかるようになります。
※管理人である自分のメリット

この新しいテンプレートは相互リンクしているあんこもちさん(貯金生活はじめました 家計簿と身近なお金の話)と同じものを基本カラーや記事の幅など少しだけカスタマイズしました。

年初にあったfoy2015後の飲み会でブログ運営やブログテンプレートについて話していた時にご教授させていただいたものです。

スポンサーリンク

関連コンテンツ