月曜日, 6月 03, 2013

Blogger で使えるレスポンシブデザインテンプレート 25 選　｜メモ

Blogger で使えるレスポンシブデザインテンプレート 25 選

今やブログは PC だけでなく、スマートフォンやタブレットでも見られるようになってきています。そこで、最近広がってきたのが「レスポンシブ Web デザイン」と呼ばれる、あらゆるデバイスに対応させるウェブデザインの手法です。ウィンドウの幅が狭まったときに、自動的にサイドバーが省略されたり、画像が縮小されたりするアレですね。

Blogger ブログ用にもいろいろなところでレスポンシブデザインのテンプレートが公開されているので、今回まとめてみることにしました。

「デモ」ボタンでテンプレートが適用されたブログを閲覧できるので、ウィンドウ幅を変更したり、別の端末で開いてみたりして、どんな表示になるのか実際に確認してみるといいと思います。

なお、ご自身のブログへのテンプレートの適用は自己責任で。必ずテンプレートのバックアップを取ってから変更するようにしてください。

参考：

Adsosive

水滴のような形のサムネイルが特徴的なテンプレート。

デモ　ダウンロード

Align

サイドバーが最初に 3 つ。投稿以外にたくさん情報を載せたい人向け。

デモ　ダウンロード

Aware

一番上の画像は、横にスライドしていくサムネイル。2 段目からが投稿。

デモ　ダウンロード

Bresponsive

最初の段はスライド。2 段目からラベルや投稿。

デモ　ダウンロード

Chronicl

ブログタイトルと投稿の間に、ラベルやページへのリンクが配置できる。

デモ　ダウンロード

CopyBlogger v2

幅が狭まると、サイドバーが投稿の後に回ったり画像が縮小されたり。

デモ　ダウンロード

DarkRed

狭めていくとかなり柔軟に変形する。ソーシャルボタンは最後まで残る。

デモ　ダウンロード

Elite Minima

4 段階に変形。ピンク基調でかわいらしい。

デモ　ダウンロード

Exelencia

ウィンドウ幅が変わるとゆっくり配置換え。サムネイルホバーで画像拡大も。

デモ　ダウンロード

ExtraNews

最初にランダムな投稿サムネイルがタイルのように表示される。

デモ　ダウンロード

Helicon

やわらかい色調のテンプレート。幅によっては画像のアスペクト比が無視されるので注意。

デモ　ダウンロード

Incipient

白基調のシンプルなテンプレート。写真のない投稿が多くてもよさそう。

デモ　ダウンロード

JPSTATION

投稿は基本的に抜粋。投稿の配置を訪問者が選べるボタンあり。

デモ　ダウンロード

Labnol

Twitter 的に短い投稿を載せるのがよさそう。

デモ　ダウンロード

Main Photo

その名の通り、写真メインのブログでどうぞ。

デモ　ダウンロード

Max Mag

最上部にあらかじめ広告エリアが用意されているのがいいかも。

デモ　ダウンロード

Minimum Theme

最初にソーシャルボタンがドドーンとあるのが特徴。

デモ　ダウンロード

Pinfinity

ウィンドウ幅に合わせて、写真がモザイク状に流れ込んでくるタイプ。

デモ　ダウンロード

Portfolio

昔の Flickr 風。PC で幅を変えても変化しないが、端末ごとに内容はちゃんと変わる。

デモ　ダウンロード

RBSimple

幅に合わせて表示される広告が変わる。

デモ　ダウンロード

Responsival

シンプルなレスポンシブテンプレート。テキストベースのブログによいかと。

デモ　ダウンロード

Responsive

最初に巨大なスライドショー。

デモ　ダウンロード

Sensational

左側、ラベルの掲示がいい感じ。

デモ　ダウンロード

TheStyle

サムネイルへのマウスホバーで、ハイライト＋ちょっとだけ伸びる。

デモ　ダウンロード

Top Blogging Ideas

狭めると左サイドバーがなくなるタイプ。画像は縮まないので、小さ目が吉。

デモ　ダウンロード

…ということで、25 個一気に紹介しましたが、気になるテンプレートはあったでしょうか。これを機会に、Blogger テンプレートも衣替えしてみるといいかもしれませんね。

http://www.kuribo.info/2013/06/blogger-responsive-templates.html