月曜日, 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