Posted on May 4, 2008 at 10:35 pm

Tumblrのテーマ「dashboard.」を修正した

dashboard.のCSSを修正

tumblr

Tumblrのテーマは dashboard. を愛用しています。
Tumblrのdashboardをそのまま再現したデザインはお気に入り。

Tumblrのdashboard

dashboard

dashboard.テーマ適用

dashboard.

ただ、Tumblrの仕様変更(?)でデザインが崩れるようになってしまいました。

dashboard.

吹き出し部分のCSSを修正しました。

修正前

CSS:
  1. ol#posts li.post .arrow {
  2. float: left
  3. width: 9px;
  4. height: 18px;
  5. margin: 10px 0 0 0;
  6. background: #b6d5ec;
  7. }

修正後

CSS:
  1. ol#posts li.post .arrow {
  2. float: left;
  3. width: 7px;
  4. height: 14px;
  5. margin: 10px 0 0 0;
  6. background: #b6d5ec;
  7. }

作者の方にも連絡しようにもコメント欄がないからどうしよう…
そんなときのReblogなのかなぁ…

AutoPagerizeに対応

ついでにいろいろ気になっていたことも手直し。
まずはAutoPagerizeへの対応です。

260行目あたりの{block:Posts}の上に以下を追加

CODE:
  1. <div class=“autopagerize_page_element”>

387行目あたりの{/block:Posts}の下に以下を追加

CODE:
  1. <br class=“autopagerize_insert_before” /></div>

396~399行目あたりのナビゲーションのリンクにrel属性(next,prev)を追加

CODE:
  1. {block:PreviousPage}<a href=“{PreviousPage}” rel=“prev” title=“Go to older posts”>&#8592; newer</a>{/block:PreviousPage}
  2. {block:NextPage}<a href=“{NextPage}” rel=“next” title=“Go to older posts”>older &#8594;</a>{/block:NextPage}

IE対応

IEは透過PNGに対応していないため角丸や吹き出しがキレイに表示されません。

dashboard.

Tumblrのdashboardの場合はPOSTしたユーザーによって吹き出しの色を区別する必要があるため透過PNGが使われていますが、テーマで使う場合はその必要がありません。
なので吹き出しの色を着色した画像を作ってそっちを使うようにしました。
吹き出しに使われている画像は5つありました。

これで気持ちよくこのテーマを使い続けることができるようになりました。

Tags: , ,

Related posts

Leave a Reply