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

<< | コメント(0) | トラックバック(0) このエントリーを含むはてなブックマーク >>

殺風景にリンクが並んでいるだけだったサイトトップをちょっと賑やかにしてみた。

まだフィルタとソートがテキストメニューのままなので直そうかなーと思うけど、このまま放置されそうなので先に記事にしておく。

 

出来あがったものがコチラになります。

tyoro.*

 


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

nomal.png

 

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

 half.png

 

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

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

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

 

 

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

Isotope

 

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

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

 

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

簡単だね!

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

Introduction · Isotope Docs

Layout modes · Isotope Demo

 

MTへの取り込み

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

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

 

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

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

 blog_box.png

この部分ね。

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

 


	
		
			
		
	

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

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

 

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

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


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

Movable Type 5 ドキュメント

 

ウィジェットセット

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

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


7790e.png

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

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

トラックバック(0)

トラックバックURL: http://exe.tyo.ro/mt/mt-tb.cgi/1300

コメントする

2014年10月

      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

月別 アーカイブ

2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年