Authentication




Cancel OK
B!コメントする  2012-12-11 17:39:00 by old

iGoogleの代わりのもの3

bootstrapのグリッドを使ってお気軽にやってたらちょっと引っかかった。
順序良く並べてくれるんだけどRSSは内容によって文字数がわかります。
そのため順序良く並べていくとこのように隙間が出来てします。



ここでいうとHome222とHome2 111の間が開いてしまっている。
実際のiGoogleではこういったスペースはなく、フレキシブルに間隔を保っているのでとても見栄えが悪い。
そこで横1列に4つほどRSSをいれていたが、これを縦にすることにした。

従来

<div class="tab-pane active" id="menu1">
<div class="row-fluid">
<div class="span3 rssnavi">
Hom 111
</div>
<!-- RSS Divider -->

<div class="span3 rss
navi">
Home 222
</div>
<!-- RSS Divider -->

<div class="span3 rssnavi">
Home 333
</div>
<!-- RSS Divider -->

<div class="span3 rss
navi">
Home 444<br />Home 444<br />Home 444<br />Home 444<br />Home 444<br />
</div>
<!-- RSS Divider -->
</div>
</div>


改良後

<div class="tab-pane active" id="menu1">
<div class="row-fluid">

<div class="span3 rssnavi">
<!-- 1段目 -->
<div class="row-fluid">
<div class="span12 rss
navi">Home 444<br />Home 444<br />Home 444 Home 444 Home 444 Home 444 Home 444 Home 444<br />Home 444<br />Home 444<br /></div>
</div>
<br />
<!-- 2段目 -->
<div class="row-fluid">
<div class="span12 rssnavi">Home 444<br />Home 444<br />Home 444 Home 444 Home 444 Home 444 Home 444 Home 444<br />Home 444<br />Home 444<br /></div>
</div>
<br />
<!-- 3段目 -->
<div class="row-fluid">
<div class="span12 rss
navi">Home 444<br />Home 444<br />Home 444 Home 444 Home 444 Home 444 Home 444 Home 444<br />Home 444<br />Home 444<br /></div>
</div>
</div>
<!-- RSS Divider -->

<div class="span3 rssnavi">
Home 222
</div>
<!-- RSS Divider -->

<div class="span3 rss
navi">
Home 333
</div>
<!-- RSS Divider -->

<div class="span3 rssnavi">
Home 444<br />Home 444<br />Home 444<br />Home 444<br />Home 444<br />
</div>
<!-- RSS Divider -->
</div>
</div>


こうすることで1つのrowに縦に詰めていれることで、縦の隙間を無くすことが出来た。
これに適当にRSSを突っ込んだのがこれ。



個人で使うならもうこれでいいかもしれない。
RSSのアドレスがソースに直書きなのでこれをどうにかしたいのと、RSSの取得をとりあえずfile
get_contentsでやっているので、最後まで取得しないと全体が更新されないので、これをCURLとかにして並列的にやれればと思ってます。

意外とやってて楽しくなってきた。


Google  

  • コメント
  • コメントはまだありません