サイトトップを可変グリッドレイアウト化してみたサイトトップを可変グリッドレイアウト化してみた

普通に開くとこんな感じで、横長に配置されるけど、

ブラウザのウィンドウサイズを狭めると、こういう詰んだ感じになる。

ただこれだけだと、サイズにあわせてるだけにみえるんだけど、

幅を狭めたり、フィルタメニューやソートで項目を操作すると滑らかにボックスが移動していく。

このヌルヌル動く感じが良いですなぁ。

Facebookで以下のライブラリを教えてもらって適用しただけなんだけど、私用なら無料で、商用でも$25とおやすく使えていい感じ。

Isotope

自分のサイトへの適用はclassを付与した領域と箱を用意して、以下のようなコードを実行するだけ。

$('#isotope-container').isotope({
	  itemSelector : '.isotope-item'
});

これに並び換えのルールや、ソートの項目などをoptionで追加していける。

簡単だね！

詳しくは本家の解説を読んだり、デモのコードを読もう。

Introduction · Isotope Docs

Layout modes · Isotope Demo

MTへの取り込み

ただ適用するだけでは面白くない。

という事で、元々うちのサイトはサブドメインのblogも含めて1つのMTOSで管理しているので、そちらから色々できるようにしてみる。

基本的にテンプレートにするだけなら、デザインにコピペしていくだけでいいのであまり書く事はないのだが、

せっかくなので blog の最新記事が自動で最新3件ほど読まれるようにしてみる。

この部分ね。

(リンクの色なんとかした方がいいな...

	
		
			

			
<$mt:EntryBlogName$> - blog
                	

                
        			
<$mt:EntryTitle$>
        	
        	        
		
		
	

以上のようなコードで実現しています。

include_blogs="2"となっている部分を使いたいblogのIDにするといい。

もし、配下のblog全てを同じデザインのボックスとして表示したいのであれば、

このblogのID指定を排除した上で、『<mt:Blogs include_blogs="children">』なんかで囲ってやると良いかな。

最後に再構築トリガー回りの設定を、マルチブログに設定してやって完了。

Movable Type 5 ドキュメント

ウィジェットセット

MTに取り込むだけでは簡単で面白くがないので、ウィジェットセットにしてみた。

増減させる事がそうそうあるかは分からないけど、コンテンツをもっとふやしていきたいよね。

D&Dで項目を追加したり外したりできていい感じ。

360のゲーマーカードとかPS3のトロフィーカードとかの項目も実装してみたけど、あまりゲームしない事に気付いたのでさくっと排除した。