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

普段からこのブログを読んでくださっている方はお気づきかと思いますが、ブログのデザインが変わりました!

専門用語を使いますと、ブログのテンプレートの設定を変更したのです。

ということで、今日はその新しいテンプレートの紹介をしたいと思います。
これから「FC2ブログ」を始めてみたいという人や、自分のブログのテンプレートを変更したいと思っている人にとっても参考になるのかな? と思ったので、少し詳しく書いてみますね。

劇的ビフォーアフター

と、その前に以前のテンプレートと現在のテンプレートを比較してみましょう。
自分のパソコンからの見え方をスクショしました。

＜ビフォー＞

●パソコン画面


●スマホ画面


＜アフター＞

●パソコン画面


●スマホ画面



なんということでしょう。。。!!（笑

これで何がどう変わったか機能的な面は全然分からないとは思いますが、、、
視覚的には大きく変わったということが分かると思います!

テンプレート変更にいきついた理由

元々、パソコン用のテンプレートは「star_night」という名前の公式テンプレートを使用していました。
また、スマホ用のテンプレートとしては「sp02_chic」という共有テンプレートを使用していました。

●「star_night」について
パソコン用テンプレートである「star_night」は、ブログ上部で星座も描けるというなんともロマンチックなデザイン!

ウルトラマンをメインに扱うブログとしてはもってこいのテンプレートということで、ブログ開設から9年間ずーっと使用していました。

しかし、時代の流れとともに「Internet Explorer」以外のブラウザが使用されるようになったり、スマホでブログを見る人が増えてきたりなど、様々な変化がありました。

が、このテンプレートの最終更新日は2007年6月5日。
そんな時代の変化についていっていないのです!

画像のサイズが大きすぎる形で表示されてしまったり、様々不具合があったと思います。
ただでさえ白文字という趣味が悪い一部の人にとっては読みづらい形式だというのに……。
ということで、一部の人からはかなり見づらいブログであったと思っています。
申し訳ないです。

●「sp02_chic」について
スマホ用テンプレートである「sp02_chic」はシンプルだということで選びました。

結構満足できたテンプレートだったのですが、若干のチープさは否めないというのと、下部に表示される広告が厄介でした。

ということで、新しいテンプレートを探してみようということになりました。

そこで出会ったのが、「レスポンシブデザイン」という言葉でした。

レスポンシブデザインとは

すみません。
専門用語です。。。

この言葉を簡単に説明すると、パソコンやスマホ、タブレットのどれから見ても、ページのレイアウやデザインが綺麗に調整されて見やすい!
ということです。

今の時代、パソコンからブログを読む人もいれば、スマホからブログを読む人もいます。
両方使っている人もいることでしょう。
なので、パソコン画面とスマホ画面で表示されるものが大きく変わってしまうというのは、あまり印象が良くありません。

ということで、新しいテンプレートはこのレスポンシブデザインに対応しているものから選ぶことにしました。

テンプレート選びでこだわった点

「レスポンシブデザイン」に対応しているテンプレートから、新しいテンプレートを探していったわけですが、ここで考慮した点はこちら。

・もちろんレスポンシブルデザイン
・記事の一部のみ表示されるようなトップページで、スッキリしたデザイン
・背景色白
・文字色黒
・文字を四角で囲むことができる
・カラム（サイドバー）は右か左の片方のみ

そして、これらを考慮した結果、「Little-thing」というテンプレートを使うことにしました。
現在のテンプレートですね。

ブログ上部や、画像がない記事のサムネイルに「オリオン座」の写真が使われていますが、これは自分でカスタマイズ設定したものです。
初期設定は違う画像なんですよ～～。

「オリオン座」の写真は、フリー素材から持ってきたのですが、何故「オリオン座」にしたのか分かりますか?



ピンと来た方も多いと思いますが、「M78星雲」がある場所だからです!

設定では銀河系から300万光年離れた所に存在することになっているのですが、実際のM78星雲は地球から1600光年離れたオリオン座にある反射星雲に位置するんですね～～。

というわけで、ウルトラマンへの愛を込めて、「オリオン座」のフリー写真を使わせていただきました!

個人的にとても理想に近い形になったのかな～～、と思っています。
いかがでしょうか。
なにかご要望等ありましたら、是非コメントお願いしますね。

サポートも優秀

ちなみに、このテンプレートはサポートも優秀です。

こちらを作成したのは「vanillaice (Akira)」さんという方なのですが、この方が「The other way round」というとても親切なサポートブログを書かれています。

トップページ - The other way round

Alternativeテンプレートのメンテナンス作業中です

vanillaice000.blog.fc2.com

「vanillaice (Akira)」さんは、レスポンシブデザインに対応した多くのテンプレートを手掛けており、ブログからはその熱い思いなども伝わってきて非常に好印象です。
レスポンシブデザインに対応したブログテンプレートを探している方は、是非「vanillaice (Akira)」さんのテンプレートから探してみてはいかがでしょうか?

自分も何か質問があったら聞きに行きたいと思います!

おわりに

最初にも書きましたが、これから「FC2ブログ」を始めてみたいと思っている方や、既に始めていてテンプレートを変更したいと思っている方の参考になれば幸いです。

特に「レスポンシブデザイン」に関してはまだまだ知識がない人が多い印象があります。
せっかくパソコンからは見やすいのにスマホから見た途端見にくくなったり……。
より多くの人にブログを見てもらいたかったら必須な項目だと思いますので、知らなかった人は是非名前だけでも覚えて帰ってもらいたいな、、、と笑

ということで、今回の記事は以上です。
それでは、また!