CSS タグを含むエントリ

タグ「CSS」を含むエントリ

プリント用のCSS

Date: 2008/07/28 Category: Technology Tags: CSS Comments: 0

会社の人が連載：WEB DESIGN WORKSHOP「正しいウェブデザイン」｜gihyo.jp … 技術評論社を「キレイに印刷したい！」と泣き喚いていて，このままじゃ近所迷惑だしなーと思って書いた CSS です．

#sub,
#secondary,
.utility,
#headerBanner01,
#headerBanner02,
#footer,
#comment,
#trackback,
.primaryBanner,
#backNumber01,
#authorProfile,
.sectionInfo01
{ display:none; }

#main #primary { width: 985px; }
#header { height: 80px; }

AutoPagerize で全ページをまとめてから印刷するとさらにベネです．

Before

Uploaded with plasq’s Skitch!

After

Uploaded with plasq’s Skitch!

印刷に必要な紙も減りますし，弊社もエコをアピールですね！

TumblrのテーマをTwitter風にしてみた

Date: 2008/05/17 Category: Technology Web Tags: CSS Tumblr Twitter Comments: 6

マークアップの練習をしたいなーと思って，手頃な課題として Tumblr のテーマいじりをしてみた．

tumblr29

Twitter の HTML 構造をじっくり眺めて，それに合わせて Tumblr の HTML を組み立てて，少しずつ CSS を書いていこうと当初は思ったんだけど，Tumblr の custom HTML が面白いってことに気が付いて段々と逸れていった．結局，Twitter の CSS を丸ごと当てて，必要なものをちょいと足したくらいだ．

Sidebar of tumblr29

サイドバーの「Stats」の部分，Twitter では followings とか Updates がある部分に，Tumblr のポスト種類別の内訳を表示させたいと思って，その副産物が先日作った TumblrPostChart でした．

当初の目的は果たされてなかったりするけれど，改めて Tumblr の API を眺めたりする中で気付いたこともいくつかあったし，楽しく作業できたのでよしとしよう．

(追記) テーマのソースを公開します

lomoさんから「公開してほしい！」とのありがたいお言葉をいただいたので，テーマのソースを以下に公開します．

~~Tumblr theme like a Twitter (txt)~~

gist: 4089 — GitHubにおきました！

~~(ファイル置き場に Dropbox を使ってみる．ローカルファイルを編集したら Web 上のファイルも勝手に更新してくれて便利だね)~~

自由に使っていただいて結構です．テーマ適用の際の注意点は以下の通り．

API のエンドポイントを自分のユーザ名に合わせて書き換える．[USERNAME] や june29 で検索をかけて次々に直してください
サイドバーのプロフィールを自分のものに置き換える
~~favicon の URL を書き換える．そのまま使うと「裸」のアイコンになっちゃう~~ (Tumblr の Favicon を使うように修正)
ページ上部の検索ボックスは飾りです．何も機能しません
画像はボクのサーバから読んでいるので，ボクのサーバが落ちていると表示できません．必要であれば，他の場所に設置して URL も書き換える
ボクが確認していないブラウザで JavaScript が正しく動作しなかったらゴメンなさい
すべてのポストに「by Tombloo」が付きます．必要に応じて直してください
(2008/05/19 追記) 上部のナビゲーションバーの Dashboard へのリンクがスペルミスで死んでいた…＞＜

Tumblr Big PhotosをuserContent.cssで (V3用に追記あり)

Date: 2007/09/25 Category: Technology Tags: CSS Tumblr Comments: 0

Tumblrのダッシュボードでサムネイル化されている写真を大きく表示してくれるTumblr Big Photosの効果をユーザスタイルシートで実現してみた．ムリヤリHTMLを書き換える感じの動作がなくなるので，こっちの方がいいかもしれないね．

プロファイルディレクトリ内のuserContent.cssに以下の記述を追加する．この手の設定ファイルを触るときにはMR Tech Local Installがあると便利！一生懸命ディレクトリを掘り下げていかなくても，メニューから開けるようになるので，プロファイルディレクトリを開くのに苦労している人は試してみてください．

/*
 * Tumblr Big Photos
 *
 */

@-moz-document url-prefix(http://www.tumblr.com/dashboard) {
        ol#posts li.dim div.post_container {
                opacity: 1 !important;
        }
        ol#posts li.dim {
                background-color: #EEE !important;
        }

        a[id*=big_photo] {
                display : inline !important;
        }

        a[id*=small_photo] {
                display : none !important;
        }
}

追記

tumblr V3.0 になって，上記のCSSじゃ意味がなくなりました．V3.0用は次のようになります．

@-moz-document url-prefix(http://www.tumblr.com/dashboard), url-prefix(http://www.tumblr.com/show) {
    div[id^=big_photo_] {
      display : inline !important;
    }

    a[id^=small_photo_] {
      display : none !important;
    }
}

del.icio.usの未bundledタグをハイライトするuserContent.css

Date: 2006/11/01 Category: Technology Tags: CSS del.icio.us Comments: 0

del.icio.usのタグを束ねる機能「bundle」はとても便利です．ボクはタグを探しやすくするためにややムリをしながら「タグは英単語で！」としています．タグを日本語でつけてしまうと目視で探すのがとても困難になりますよね．さらに，「a」で始まるタグはbundle「A」にまとめ，他のアルファベットについても同じように管理するとさらに探しやすくなります．多くのdel.icio.usユーザの方々がbundleを上手に使っているのを見て，ボクも真似しています．

june29’s bookmarks on del.icio.us

しかしbundleは手動で設定するため，新しいタグが現れるたびにbundleの設定を更新しなければなりません．そしてタグが増えてくると，bundleに含まれていないタグを目で探すのが非常に困難になります．これはdel.icio.usのCSSが良くないからでしょう．そこでFirefoxのuserContent.cssを編集しました．

[css]
/*
* del.icio.usのbundles編集ページでbundleに含まれないタグをハイライト
*/
@-moz-document url-prefix(”https://secure.del.icio.us/settings/USERNAME/tags/bundle”) {
a[class="tag"], a[class="tag one"], a[class="tag ten"]{
background: #0ff;
}
}
[/css]

userContent.cssに上記の記述(USERNAMEは適宜変更)を加えることで，bundleに含まれていないタグをハイライトすることができます．これでもう，タグの海で溺れることはなくなりました．以下にスクリーンショットを載せます．

(この例では「2006」「bookmarklet」「development」がハイライトされています)

del.icio.usがもっと便利で，もっとオシャレなツールでありますように！

準二級.jp