2013年6月3日月曜日

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

2013年3月14日木曜日

虫眼鏡　jQueryのプラグイン『Zoomy』

画像の一部を拡大するスクリプトはたくさんありますが、そのなかでもよさそうな jQueryのプラグイン、『Zoomy』を紹介します。

Zoomy
デモページ

Zoomyの設置は比較的簡単です。

使用する画像ファイル

ページに配置するもとの画像（50%）、拡大時に使用する画像（100%）、
の2枚の画像が必要です。

外部ファイルの設置（blogger テンプレート > HTML編集）

「jquery.js」とZoomy用のJS, CSSファイルを外部ファイルとして </head>タグの前に記述します。

HTML（blogger 投稿ページ）

2枚の画像を下記のように配置します。

displayImg.jpg　もとの画像
zoomImg.jpg　拡大用の画像

<script src="http://dl.dropbox.com/u/1277583/zoomy.min.js" type="text/javascript"></script>

<a class="zoom" href="displayImg.jpg"><img src="zoomImg.jpg" /></a>

a要素に指定したclass名は任意の名前に変更可能です。

JavaScript （画像の記述の下に記述します）

<script type="text/javascript">
$(function(){
    $('.zoom').zoomy('mouseover',
        {
            clickable: true,
            attr: 'rel'  
        }
    );               
}(jQuery));
</script>

Zoomyのオプション

Zoomyのオプションでは、拡大領域のサイズの変更、形状、枠などが簡単に変更できます。下記の「Options for Zoomy」で、それらを試すことができます。（※現在は掲載されてないようです）

Zoomyの多彩なオプション

Zoomyには、角丸、グラデーション、RGBaの3つの異なるCSS3のスタイルが用意されています。これらは非対応ブラウザでも同じに見えるように、使用を止めることも可能です。

sample

Internet Explorer

2013年6月3日月曜日