FC2ブログのテンプレートをレスポンスデザインにしてみました。

FC2ブログでもレスポンシブデザインのテンプレートがありました。 レスポンシブデザインを取り入れると、canonicalの設定を入れなくてもよくなったりするので、結構おすすめです。 レスポンシブデザインとはどんなものか記載してみます。

レスポンシブデザインについて

先ずは、レスポンシブデザインについて記載します。

レスポンシブデザインって何？

例えば、このサイトをPCの最大サイズで表示した場合、左側に最新記事や、カテゴリが表示されます。 そして、ブラウザの幅を小さくしていくと、最新記事や、カテゴリが一番下に表示されるようになります。

レスポンシブデザインとは、画面サイズによってレイアウトが変わるデザインです。

レスポンシブデザインのメリットは？

一つのHTMLで、PC用のレイアウトとスマホやタブレットのレイアウトを実現できることになります。 例えば、

• 何かテンプレートを修正する際、PCだけ対応して、スマホの対応を忘れるといったことがなくなる。

• 同じ内容の記事が、PC用とスマホ用との二つできるのを防ぐことができる。

  同じ内容の記事が複数ある場合は、canonicalを設定しておく必要があります。※Googleの検索を気にしなければ不要ですが。

• スマホやタブレットを横にした際、大きいほうのレイアウトで見せたいなどの制御もできる。

• Googleからモバイルフレンドリーな画面と認識される。

  適切なリダイレクトやalternateを入れなくても、Googleからモバイルに適したページと認識され、評価が悪くならない。

• スマホのレイアウトも考慮するので、シンプルなデザインとなる。そのため、わかりやすレイアウトになりやすい。

レスポンシブデザインのデメリットは？

• CSSを使いこなす必要があるので、ハードルが上がります。場合によっては、JavaScriptも併用することになります。 ただ、自分でテンプレートを作るならということです。用意されているものを使用する場合は特に適用するだけなので気にする必要はないです。

• FC2ブログのアルバム機能がPC表示固定となってしまいます。何が問題かというと、スマホでアルバム表示しようとすると、綺麗に表示されない（小さく表示されることになります）です。 そして、Googleからモバイルフレンドリーではないと言われてしまいます。（アルバムのURLだけがスマホに向いていないと判定されるだけなので、サイト全体には影響ないです。）

CSSを使ってレスポンシブデザインができるようになると、例えば、このサイトでは大きなときは、上部にメニューバーを表示して、小さいときは非表示にする、といったようなこともできます。 また、PCとスマホだけではなく、PCとタブレットとスマホと言ったような細かく1つのHTMLでデザインを分けることも可能です。

FC2ブログでは、少し欠点もありますが、大きな欠点ではないかと思うで、気になる方は一度検討してみてはいかがでしょうか。