「padding」を含む日記 RSS

はてなキーワード: paddingとは

2019-11-29

CSSグローバルにやるのかローカルにやるのか

この辺、よくわからない...

渋川様は、どちらかというとウェブアプリケーションよりで、ウェブカツ!! 様は、どちらかというとウェブ制作よりだから意見の相違が見られるのかな。以下が、自分にとっての答えっぽいな...

2018-09-07

anond:20180907112858

こんな感じかね。

http://jsfiddle.net/Lhankor_Mhy/jc2wkhes/

<video id="target" type="video/mp4" src="http://etc.dounokouno.com/testmovie/h264/testmovie-480x272.mp4" width="480" height="272" autoplay autobuffer></video>
<div id="_4">4


  
  

2018-07-03

anond:20180703163232

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

<head>
	<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
	<title>


  
  

2017-09-29

TechCrunch JPタイトルから hiwa 氏の翻訳か否かを深層学習推定する

追記 (9月30日 22:00)

最近タイトルを読むだけで hiwa 氏が翻訳したものかどうかがわかるようになってきた。

例えば、「死んだはずのBlackBerryがソフトウェア企業として蘇生、業績も株価も好調」というタイトルは「死んだはずの」という挑発的な言葉遣いは hiwa 氏だろう(そしてそのような文句は元記事にはないだろう)と推測したり(確認してみると元記事タイトルは "BlackBerry, yes BlackBerry, is making a comeback as a software company" であり、「死んだはずの」や「業績も株価好調」といった文言は含まれていない)、「GoogleがAmazonのEcho ShowからYouTubeを突然取り去る、サービス規約への違反だそうだ」というタイトルでは「〜〜〜、〜〜〜」という独特な文の接続や、文末の「だそうだ」という物言いから氏であろうと推測している。

私が推測できるのだからアルゴリズムでも可能ではないだろうか? そう考え、機械学習の中でも特に深層学習を用いて推定可能である検証した。

タスク

タイトル文字列(本文情報は用いない)からその記事翻訳者が hiwa 氏であるか ( = 1) そうでないか ( = 0) を学習予測する二値分類問題

学習データ

TechCrunch Japan記事データ 11,993 件。うち 3,781 件が hiwa 氏が翻訳したものである

手法

入力文は vanillaMeCab [1] を用いて分かち書きを行い、それぞれの単語は「日本語 Wikipedia エンティティベクトル」[2] を用いて 200 次元に埋め込んだ。語彙数は 17,272 だった。

予測モデルは 32 次元の LSTM [3]。dropout 率は 0.5。文の最大長は 120 単語zero-padding を行い、バッチサイズ 32 の Adam [4] で最適化した。

LSTM の実装には keras 公式に用意されたもの [5] を参考にした。

結果

精度 0.85, 再現率 0.80, f値 0.82 とまずまずの精度で予測可能であることがわかった。

ちなみに、 CNN による推定では 精度 0.84, 再現率 0.80, f値 0.82 という同等の結果を得た。

結論

機械学習を用いることで、記事を開く前に hiwa 氏が翻訳したものであるか否かがまずまずの精度で分類できることがわかった。深層学習はすごい。

参考文献

[1] MeCab: Yet Another Part-of-Speech and Morphological Analyzer

[2] Long Short-Term Memory

[3] 日本語 Wikipedia エンティティベクトル

[4] [1412.6980] Adam: A Method for Stochastic Optimization

[5] keras/imdb_lstm.py at master · fchollet/keras · GitHub

2017-07-06

はてブの新ユーザページ用ユーザスタイルシートを書いた

ずっと旧ページ使ってて、どうにも窮屈な感じがしたので。

.wrapper-container-inner {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 20px 0;
    background-image: none;
}

#right-container {
    display: none;
}

#center-container {
    box-sizing: border-box;
    padding: 0 0 0 20px;
    width: calc(100% - 180px);
}

カラムは消した。

あくまで広くしただけ。

幅が広すぎる!って場合最後の width: calc(100% - 180px); にある100%の値を調整すればいい。

にしても、まさかレイアウトでfloat使ってるとは思わなかった。

いろいろ見ててCSSレガシーすぎて大変なんだろうなー、と思った。

2014-06-07

増田広告向けCSS

Stylish」用にちまちまと「要素を検証」してこうした

div.afc,
div#afc_footer,
div.google_afc_blocklink
    {
        background:#e9e9e9;
        font-size:100%;
        padding:0;
        border:solid 1px #e9e9e9;
    }
div.afc div.google_ads_by,
div.afc div.google_afc_blocklink li
    {
        margin:0;padding:0;
    }

自分しか効かないCSSなんだから自分は絶対に広告クリックしないのだから

div.afc,
div#afc_footer,
div.google_afc_blocklink
    {
        display:none;
    }

これでいいや

参考

はてなダイアリー無料版の広告に向くスタイルシート - Imamuraの日記

http://d.hatena.ne.jp/Imamura/20140528/hatenaad

2013-08-15

コピペブログがムカつくので、はてブを快適にするユーザーCSS作った

はてブは便利だ。かれこれ使い続けて8年目になる。

しかし、はてブを使っているとしばしばムカつくことがある。

それは2chコピペしただけのデマまとめサイトホットエントリとして頻繁に表示されてしまうことだ。

リンククリックしなければいいのだが、最近タイトルだけで不快になるレベルのものも多い。

例えばここのところ、冷凍庫に入ったバイトをアップして炎上させる遊びがリア充の間で流行しているが、

ハム速」というサイトはこういったものを毎回取り上げて、嫌でも目に付くタイトル他人個人情報晒している。

なにがホットだよ。見たくねえよ死ね

しかし、はてな運営はいつまで経っても非表示サイト機能を用意してくれないし、

こういったクソサイトを未だにブクマしてホッテントリ入りに貢献するはてなユーザーはあとを絶たない。

これらを弾くユーザースクリプトユーザーCSSを書いてくれた人もいない。

仕方ないので、自分まとめブログなどを除外するユーザーCSSを書いてみたら、恐ろしく快適になった。

とても便利なのでぜひ同志のはてブァーたちに使って欲しいのだが、

どこに公開していいか分からないので、とりあえず増田に投下してみることにした。

対応範囲

CSS ソース

/* はてなブックマークから見たくないサイトを抹消&シンプルな表示で快適にするユーザースタイルシート */
/* V1.16 2016/5/1 22:25更新 政経ワロスまとめニュース♪を追加 */
/* V1.15 2016/3/16 11:25更新 診断メーカーを追加 */
/* V1.14 2015/6/2 17:51更新 やらおん! の独自ドメインを追加 */
/* V1.13 2014/2/13 14:42更新 大艦巨砲主義! を追加 */
/* V1.12 2014/2/13 10:27更新 保守速報JP ドメインを追加 */
/* V1.11 2014/2/10 17:34更新 キムチ速報ネトウヨ速報ネトウヨにゅーす、はぅわ!、あじあにゅーす2ちゃんねる独自ドメインを追加 */
/* V1.10 2014/1/28 19:32更新 使えるニュース-2ch を追加、はてブ仕様変更により新着エントリサムネイルが表示されなくなっていたのを修正 */
/* V1.09 2013/12/09 17:46更新 売国速報(^ω^)を追加 */
/* V1.08 2013/12/08 13:02更新 ば韓国いい加減にしろ速報を追加 */
/* V1.07 2013/8/19 02:11更新 2ちゃん的韓国ニュースを追加 */
/* V1.06 2013/8/16 12:36更新 あじあにゅーす2ちゃんねる笑韓ブログを追加 */
/* V1.05 2013/8/16 09:57更新 検索結果のエントリ詳細をサイト関係なく消した。そこが気に入らなければ「, div.entryinfo」という文字列を削除 */
/* V1.04 2013/8/16 09:46更新 政経chを追加 */
/* V1.03 2013/8/15 20:34更新 秒刊SUNDAYを追加 */
/* V1.02 2013/8/15 16:55更新 U-1速報URL間違いを修正 */
/* V1.01 2013/8/15 15:49更新 やらおん!を入れ忘れるという致命的なミスを犯したので修正 */

/* はてブ全体に適用 */
@-moz-document url-prefix("http://b.hatena.ne.jp/")
{
/* ブロックしたいサイトリンク非表示 */
A[HREF*="j-cast.com"],
A[HREF*="j-cast.com"] ~ cite,
A[HREF*="getnews.jp"],
A[HREF*="getnews.jp"] ~ cite,
A[HREF*="yukawanet.com"],
A[HREF*="yukawanet.com"] ~ cite,
A[HREF*="0taku.livedoor.biz"],
A[HREF*="0taku.livedoor.biz"] ~ cite,
A[HREF*="hamusoku.com"],
A[HREF*="hamusoku.com"] ~ cite,
A[HREF*="alfalfa.com"],
A[HREF*="alfalfa.com"] ~ cite,
A[HREF*="hoshusokuhou.com"],
A[HREF*="hoshusokuhou.com"] ~ cite,
A[HREF*="hosyusokuhou.jp"],
A[HREF*="hosyusokuhou.jp"] ~ cite,
A[HREF*="wara2ch.com"],
A[HREF*="wara2ch.com"] ~ cite,
A[HREF*="fxya.blog129.fc2.com"],
A[HREF*="fxya.blog129.fc2.com"] ~ cite,
A[HREF*="asianews2ch.livedoor.biz"],
A[HREF*="asianews2ch.livedoor.biz"] ~ cite,
A[HREF*="jin115.com"],
A[HREF*="jin115.com"] ~ cite,
A[HREF*="esuteru.com"],
A[HREF*="esuteru.com"] ~ cite,
A[HREF*="yaraon.blog109.fc2.com"],
A[HREF*="yaraon.blog109.fc2.com"] ~ cite,
A[HREF*="yaraon-blog.com"],
A[HREF*="yaraon-blog.com"] ~ cite,
A[HREF*="kanasoku.info"],
A[HREF*="kanasoku.info"] ~ cite,
A[HREF*="u1sokuhou.ldblog.jp"],
A[HREF*="u1sokuhou.ldblog.jp"] ~ cite,
A[HREF*="newskorea"],
A[HREF*="newskorea"] ~ cite,
A[HREF*="news-us.jp"],
A[HREF*="news-us.jp"] ~ cite,
A[HREF*="tokuteishimasuta.com"],
A[HREF*="tokuteishimasuta.com"] ~ cite,
A[HREF*="dqnplus"],
A[HREF*="dqnplus"] ~ cite,
A[HREF*="bakankokunews.blog.fc2.com"],
A[HREF*="bakankokunews.blog.fc2.com"] ~ cite,
A[HREF*="treasonnews.doorblog.jp"],
A[HREF*="treasonnews.doorblog.jp"] ~ cite,
A[HREF*="now2chblog.blog55.fc2.com"],
A[HREF*="now2chblog.blog55.fc2.com"] ~ cite,
A[HREF*="kimsoku.com"],
A[HREF*="kimsoku.com"] ~ cite,
A[HREF*="uyosoku.com"],
A[HREF*="uyosoku.com"] ~ cite,
A[HREF*="netouyonews.net"],
A[HREF*="netouyonews.net"] ~ cite,
A[HREF*="asia-news.jp"],
A[HREF*="asia-news.jp"] ~ cite,
A[HREF*="rakukan"],
A[HREF*="rakukan"] ~ cite,
A[HREF*="nico3q3q"],
A[HREF*="nico3q3q"] ~ cite,
A[HREF*="military38"],
A[HREF*="military38"] ~ cite,
A[HREF*="shindanmaker.com"],
A[HREF*="shindanmaker.com"] ~ cite,
A[HREF*="seikeidouga.blog.jp"],
A[HREF*="seikeidouga.blog.jp"] ~ cite,
/* ブロックしたいサイトファビコン非表示 */
IMG[SRC*="j-cast.com"],
IMG[SRC*="getnews.jp"],
IMG[SRC*="yukawanet.com"],
IMG[SRC*="0taku.livedoor.biz"],
IMG[SRC*="hamusoku.com"],
IMG[SRC*="alfalfa.com"],
IMG[SRC*="hoshusokuhou.com"],
IMG[SRC*="hosyusokuhou.jp"],
IMG[SRC*="wara2ch.com"],
IMG[SRC*="fxya.blog129.fc2.com"],
IMG[SRC*="asianews2ch.livedoor.biz"],
IMG[SRC*="jin115.com"],
IMG[SRC*="esuteru.com"],
IMG[SRC*="yaraon.blog109.fc2.com"],
IMG[SRC*="yaraon-blog.com"],
IMG[SRC*="kanasoku.info"],
IMG[SRC*="u1sokuhou.ldblog.jp"],
IMG[SRC*="newskorea"],
IMG[SRC*="news-us.jp"],
IMG[SRC*="tokuteishimasuta.com"],
IMG[SRC*="dqnplus"],
IMG[SRC*="bakankokunews.blog.fc2.com"],
IMG[SRC*="treasonnews.doorblog.jp"],
IMG[SRC*="now2chblog.blog55.fc2.com"],
IMG[SRC*="kimsoku.com"],
IMG[SRC*="uyosoku.com"],
IMG[SRC*="netouyonews.net"],
IMG[SRC*="asia-news.jp"],
IMG[SRC*="rakukan"],
IMG[SRC*="nico3q3q"],
IMG[SRC*="military38"],
IMG[SRC*="shindanmaker.com"],
IMG[SRC*="seikeidouga.blog.jp"],
/* トップページエントリ詳細、メタ情報タグ一覧、検索結果のエントリ詳細を非表示 */
li.description blockquote, ul.entry-meta li.tag, div.entryinfo {
  display: none !important;
}
}

/* ------------------------------------------- */

/* 新ユーザーページ (インタレスト、マイホットエントリー他) に適用 */
@-moz-document
url-prefix("http://b.hatena.ne.jp/(はてなユーザー名)/interest"),
url-prefix("http://b.hatena.ne.jp/(はてなユーザー名)/favorite"),
url("http://b.hatena.ne.jp/(はてなユーザー名)/")
{
/* エントリ詳細を非表示 */
.entry-summary, .detail {
  display: none !important;
}
/* エントリ詳細をなくした分、サムネイルカラムを小さく */
.entry-feature-image a.capture img {
  max-width: 60px !important;
}
.main-entry-list .entry-block.entry-feature-image {
  min-height: 32px !important;
  padding-left: 80px !important;
}
.entry-feature-image .entry-image-block, .entry-feature-image a.capture {
  width: 60px !important;
  max-height: 50px !important;
}
/* お気に入りユーザーエントリ一覧を非表示に */
.main-entry-list .entry-comment .entry-comment-fold {
  display: none !important;
}
}

使い方

ChromeOperaSafari での使い方

設定内容はいずれも同じで、こんな感じにする。

セクションひとつ
/* はてブ全体に適用 */

/* ブロックしたいサイトリンク非表示 */
A[HREF*="j-cast.com"],
A[HREF*="j-cast.com"] ~ cite,
A[HREF*="getnews.jp"],
A[HREF*="getnews.jp"] ~ cite,
A[HREF*="yukawanet.com"],
A[HREF*="yukawanet.com"] ~ cite,
A[HREF*="0taku.livedoor.biz"],
A[HREF*="0taku.livedoor.biz"] ~ cite,
A[HREF*="hamusoku.com"],
A[HREF*="hamusoku.com"] ~ cite,
A[HREF*="alfalfa.com"],
A[HREF*="alfalfa.com"] ~ cite,
A[HREF*="hoshusokuhou.com"],
A[HREF*="hoshusokuhou.com"] ~ cite,
A[HREF*="hosyusokuhou.jp"],
A[HREF*="hosyusokuhou.jp"] ~ cite,
A[HREF*="wara2ch.com"],
A[HREF*="wara2ch.com"] ~ cite,
A[HREF*="fxya.blog129.fc2.com"],
A[HREF*="fxya.blog129.fc2.com"] ~ cite,
A[HREF*="asianews2ch.livedoor.biz"],
A[HREF*="asianews2ch.livedoor.biz"] ~ cite,
A[HREF*="jin115.com"],
A[HREF*="jin115.com"] ~ cite,
A[HREF*="esuteru.com"],
A[HREF*="esuteru.com"] ~ cite,
A[HREF*="yaraon.blog109.fc2.com"],
A[HREF*="yaraon.blog109.fc2.com"] ~ cite,
A[HREF*="yaraon-blog.com"],
A[HREF*="yaraon-blog.com"] ~ cite,
A[HREF*="kanasoku.info"],
A[HREF*="kanasoku.info"] ~ cite,
A[HREF*="u1sokuhou.ldblog.jp"],
A[HREF*="u1sokuhou.ldblog.jp"] ~ cite,
A[HREF*="newskorea"],
A[HREF*="newskorea"] ~ cite,
A[HREF*="news-us.jp"],
A[HREF*="news-us.jp"] ~ cite,
A[HREF*="tokuteishimasuta.com"],
A[HREF*="tokuteishimasuta.com"] ~ cite,
A[HREF*="dqnplus"],
A[HREF*="dqnplus"] ~ cite,
A[HREF*="bakankokunews.blog.fc2.com"],
A[HREF*="bakankokunews.blog.fc2.com"] ~ cite,
A[HREF*="treasonnews.doorblog.jp"],
A[HREF*="treasonnews.doorblog.jp"] ~ cite,
A[HREF*="now2chblog.blog55.fc2.com"],
A[HREF*="now2chblog.blog55.fc2.com"] ~ cite,
A[HREF*="kimsoku.com"],
A[HREF*="kimsoku.com"] ~ cite,
A[HREF*="uyosoku.com"],
A[HREF*="uyosoku.com"] ~ cite,
A[HREF*="netouyonews.net"],
A[HREF*="netouyonews.net"] ~ cite,
A[HREF*="asia-news.jp"],
A[HREF*="asia-news.jp"] ~ cite,
A[HREF*="rakukan"],
A[HREF*="rakukan"] ~ cite,
A[HREF*="nico3q3q"],
A[HREF*="nico3q3q"] ~ cite,
A[HREF*="military38"],
A[HREF*="military38"] ~ cite,
A[HREF*="shindanmaker.com"],
A[HREF*="shindanmaker.com"] ~ cite,
/* ブロックしたいサイトファビコン非表示 */
IMG[SRC*="j-cast.com"],
IMG[SRC*="getnews.jp"],
IMG[SRC*="yukawanet.com"],
IMG[SRC*="0taku.livedoor.biz"],
IMG[SRC*="hamusoku.com"],
IMG[SRC*="alfalfa.com"],
IMG[SRC*="hoshusokuhou.com"],
IMG[SRC*="hosyusokuhou.jp"],
IMG[SRC*="wara2ch.com"],
IMG[SRC*="fxya.blog129.fc2.com"],
IMG[SRC*="asianews2ch.livedoor.biz"],
IMG[SRC*="jin115.com"],
IMG[SRC*="esuteru.com"],
IMG[SRC*="yaraon.blog109.fc2.com"],
IMG[SRC*="yaraon-blog.com"],
IMG[SRC*="kanasoku.info"],
IMG[SRC*="u1sokuhou.ldblog.jp"],
IMG[SRC*="newskorea"],
IMG[SRC*="news-us.jp"],
IMG[SRC*="tokuteishimasuta.com"],
IMG[SRC*="dqnplus"],
IMG[SRC*="bakankokunews.blog.fc2.com"],
IMG[SRC*="treasonnews.doorblog.jp"],
IMG[SRC*="now2chblog.blog55.fc2.com"],
IMG[SRC*="kimsoku.com"],
IMG[SRC*="uyosoku.com"],
IMG[SRC*="netouyonews.net"],
IMG[SRC*="asia-news.jp"],
IMG[SRC*="rakukan"],
IMG[SRC*="nico3q3q"],
IMG[SRC*="military38"],
IMG[SRC*="shindanmaker.com"],
/* トップページエントリ詳細、メタ情報タグ一覧、検索結果のエントリ詳細を非表示 */
li.description blockquote, ul.entry-meta li.tag, div.entryinfo {
  display: none !important;
}
セクションふたつめ
/* 新ユーザーページ内 (インタレスト、マイホットエントリー他) に適用 */

/* エントリ詳細を非表示 */
.entry-summary, .detail {
  display: none !important;
}
/* エントリ詳細をなくした分、サムネイルカラムを小さく */
.entry-feature-image a.capture img {
  max-width: 60px !important;
}
.main-entry-list .entry-block.entry-feature-image {
  min-height: 32px !important;
  padding-left: 80px !important;
}
.entry-feature-image .entry-image-block, .entry-feature-image a.capture {
  width: 60px !important;
  max-height: 50px !important;
}
/* お気に入りユーザーエントリ一覧を非表示に */
.main-entry-list .entry-comment .entry-comment-fold {
  display: none !important;
}

使い方が分からなければブコメトラックバックで言ってくれたら補足するかも

字数オーバーしていたことに気づいたので http://anond.hatelabo.jp/20140421135649 に続きます

2013-01-09

まりに使いにくいかFirefoxアドオンStylishユーザーCSS

http://anond.hatelabo.jp/20130108203837

まりに使いにくいかFirefoxアドオンStylishユーザーCSS

@-moz-document url-prefix("http://b.hatena.ne.jp/"){

.ad-head-text{display:none!important;}

.ad-unit{display:none!important;}

.thumbnail{display:none!important;}

.entry-data{display:none!important;}

.entry-contents blockquote{display:none!important;}

.shim-elem-for-height{display:none!important;}

.entry-meta{display:none!important;}

.entry-comment{display:none!important;}

.entry-unit{width:100%!important;margin:0!important;}

.entry-vertical-3,.entry-vertical-4{background:none!important;}

.entry-contents{padding:0!important;}

ul.users{height:22px!important;border-top:1px solid!important;}

.users span{font-size:12px!important;font-weight:bold!important;}

}

他のブラウザのは誰か書いてくれるだろう

はてなブックマークユーザースタイルシート

http://b.hatena.ne.jp/entrylist

のページ限定でsafariしか確認してません。

以下をテキストファイルコピペしてhatena.cssとかで保存。

safariだと環境設定の詳細のスタイルシートで選択すればマシになります

ちょっと更新

/*********************************************************************************/

#container #main .box-wrap div ul.entry-vertical-4,

#container #main .box-wrap div ul.entry-vertical-3 {

background: none !important;

}

#container #main .box-wrap div ul.entry-vertical-3 li.entry-unit,

#container #main .box-wrap div ul.entry-vertical-4 li.entry-unit,

#container #main .box-wrap div ul.entry-vertical-3 li.ad-unit,

#container #main .box-wrap div ul.entry-vertical-4 li.ad-unit {

display: block !important;

}

#container #main .box-wrap div ul.entry-vertical-4 li.entry-unit,

#container #main .box-wrap div ul.entry-vertical-4 li.ad-unit,

#container #main .box-wrap div ul.entry-vertical-3 li.entry-unit,

#container #main .box-wrap div ul.entry-vertical-3 li.ad-unit {

width: auto !important;

}

#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents,

#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents {

border: none !important;

}

#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents a.thumbnail,

#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents a.thumbnail {

float: right !important;

padding: 0 0 0 20px !important;

}

#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents a.thumbnail img,

#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents a.thumbnail img {

max-width: 180px !important;

}

#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents h3,

#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents h3 {

clear: none !important;

}

#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents h3,

#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents h3 {

font-size: 20px !important;

}

#container #main .box-wrap div ul.entry-vertical-4 ul.entry-meta,

#container #main .box-wrap div ul.entry-vertical-3 ul.entry-meta {

border: none !important;

border-top: 1px dotted #ECECEC !important;

clear: both !important;

}

#container #main .box-wrap div ul.entry-vertical-4 ul.entry-meta li.tag,

#container #main .box-wrap div ul.entry-vertical-3 ul.entry-meta li.tag {

clear: none !important;

margin: 0 0 0 15px !important;

}

/*********************************************************************************/

http://anond.hatelabo.jp/20130108203837

2011-04-07

はてなブックマークエントリーページ新UIを見やすくするユーザCSS

コメントが3行なのを一行に戻す。

コメントがない行を消す

.nocomment{display:none;}

.bookmark-list span.comment { display: inline; }

.bookmark-list img.profile-image { width:18px; height:18px; }

■参考

http://hatena.g.hatena.ne.jp/hatenabookmark/20110405/1301981564

http://hibari.2ch.net/test/read.cgi/esite/1300432939/23-26

23名無しさんお腹いっぱい。:2011/04/06(水) 11:48:38.71

適当だけど誰かがグリモン作るまでこれで。

/*サイドバー非表示*/

#container .curvebox-body { padding:20px; }

#sidebar { display:none; }

/*アイコン縮小&コメ欄高さ詰め*/

.bookmark-list li { padding-left: 20px; }

.bookmark-list img.profile-image { width:18px; height:18px; }

.bookmark-list span.comment { display: inline; }

/*ブクマ用フォーム非表示*/

#add-bookmark-container { display:none; }

/*人気コメント非表示*/

#scored-bokkmarks { display:none; }

https://gist.github.com/903132 を組み合わせて

ブクマ追加は[B!]アイコンからにするとこれまでに近い表示に。

26 :名無しさんお腹いっぱい。:2011/04/06(水) 11:59:27.60

あ、>>23の一番下たいぽだった。

#scored-bookmarks { display:none; }

2011-04-05

stylishで新UIはてブエントリーページのサイドバーを下に持ってくる

http://b.hatena.ne.jp/entry/hatena.g.hatena.ne.jp/hatenabookmark/20110405/1301981564

https://addons.mozilla.org/ja/firefox/addon/stylish/

見た目だけ変えてみたぞ。

あんまりいいもんじゃないと思うけど、サイドバーがなくなったらどんな感じになるか体験してみるといいんじゃないかな。

まあどんなもんかやってみて。叩き台、印象の変化の確認。

あとおまけでスター順の部分は消しておいた。#scored-bookmarksってあるだろ、そこじゃ。

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://b.hatena.ne.jp/entry/") {

#container .curvebox-body {
  padding-right:20px !important;
}
#main, #sidebar {
  width:100% !important;
  float:none !important;
}
#sidebar {
  margin-left:0 !important;
}

#scored-bookmarks{
  display:none !important;
}

}

じゃあの。

二版

http://b.hatena.ne.jp/entry/lifehack2ch.livedoor.biz/archives/51229298.html

うりゃ!

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://b.hatena.ne.jp/entry/") {

#container .curvebox-body {
  padding-right:20px !important;
}
#main, #sidebar {
  width:100% !important;
  float:none !important;
}
#sidebar {
  margin-left:0 !important;
}

#scored-bookmarks{
  display:none !important;
}


.comment {
  display:inline !important;
}
.bookmark-list .profile-image {
  width:16px!important;
  height:16px!important;
  margin-left:-24px!important;
}
.user-navigator.user-navigator-large {
  width:34px!important;
  height:20px!important;
}
.bookmark-list li {padding-left:32px!important;}


}

2009-02-08

2chまとめブログ2008冬~2009春、新参サイトまとめ

ホットエントリーになりそうなカナ速の2chまとめ、

あれ大手しかのってないから、カナ速にのってない新参を評価してみた

最新版、2008冬~2009春版ね

ここに載ってない新参はよっぽど知られてないからもっと頑張れ


メシウマ速報m9(^Д^)

http://2ch774.blog55.fc2.com/

将来性:★★★ センス:★★ デザイン:★

デザインが良ければいいのに・・・っていつも思う

フォントが全部太字なのと、paddingを使いこなせばかなり良くなるハズ。個人的には背景が透明になってるのは好かない。つまりごちゃごちゃしてて見にくいのがメシウマの最大の欠点

スレチョイスは面白いし、更新も早い。最近だとJASRACの記事のまとめ速さは秀逸だった。

ポスト痛いニュース

おじちゃんなんで働かないの?

http://vipniosewaninattemas.blog90.fc2.com/

将来性:★ センス:★ デザイン:★

VIP系。

横幅が広すぎる。こんなに横にスクロールバーが出るブログも無い。この中の人スクリーンがでかいのだろうか。そこだけ直せばやっと土俵に上がれる。オワタの告知にすら入れないのはそのせいじゃないのか。ひとつずつ、頑張れ

快感速報

http://kaisoku2ch.blog67.fc2.com/

将来性:★ センス:★★★ デザイン:★★

アニメ自作小説系のスレが多いけど、それが直観的にわかるデザインにしたらどうだろうか。

初めてみたとき「半年後にはアルカン速報くらいの中堅ポジションにいそうなセンスはあるな」って感じたけど、管理人にそこまで拡大思考が見られない。

オバニコ

http://obaniko.blog55.fc2.com/

将来性:★ センス:★ デザイン:★

まったくの趣味でやってんのかな?センス全く無いけども、管理人が丁寧なお方で好感。

2ikkei.net日本経済ビジネスニュース

http://2ikkei.net/

将来性:★★★ センス:★★★ デザイン:★★★

独自ドメインRSSが自前だし、新参で一番テクニカル。コンセプトが明確で何気に便利かも。

各記事の>>1を太字じゃなくて普通の字にしたら読みやすくなるんじゃないか。

アクセス元には(なぜか)大手の名前がたくさん。のびしろありまくり

噂のジョニー

http://uwasanojohnny.blog17.fc2.com/

将来性:★★★ センス:★★★ デザイン:★★★

デザインは素晴らしい。

ただ差別化すべき点がまったく見えないので、すでにガチガチに固まってるこの業界から一歩抜け出すのは難しそう。良くてオワタ掲載どまり。コンセプトを提示して特化すれば良くなる?なにかブレイクスルーの一手を。

画像にも記事リンクを張るべき。直観的にアクセスできない。


千年後の君へ

http://blog.livedoor.jp/x1000th/

将来性:★★ センス:★★ デザイン:★★

キレイめ系2ちゃんまとめ。

全体的なカラーピンク系ばっかりなので差し色でリンク文字を青とかにしてみると、賑やかに見えるかも。

何気に韓国スレが多いという穏やかでない内容。

このごろ2ちゃんねる

http://konogoro2ch.blog117.fc2.com/

将来性:★★★ センス:★★ デザイン:★

ゲーム系を取り上げているみたいだけど、それが直観的に伝わってこない。

とりあえず3か月続けてF速に相互リンクしてもらってそれがアクセスの柱という、なんという新参王道サクセスロード。

あとはデザインだけなんとかなれば良いまとめブログになれる気がするんだけど、いっそじゃあF速と同じデザインにしてみ、それだけで良くなると思う。

ぬるいニュース - livedoor Blogブログ

http://blog.livedoor.jp/nw4you/

将来性:★★ センス:★★ デザイン:★★

がんばってデザインした感がびんびん伝わってくる。大手をよく見て学んでる感じ。

ただ、わざわざここを毎日見ようとは思わない。ぬるすぎるから?

(´A`)<咳をしてもゆとり

http://yutori2ch.blog67.fc2.com/

将来性:★★★ センス:★★★ デザイン:★★

WEB2.0デザインは関心をもてるものの、記事が見にくい。

まず>>1ニュースソースコピペ部分は、改行を直してあげよう。

あと青系のカラーリングが多くてゆるくなりすぎ。例えば日付を赤系のビビッドカラーにすると、全体が締まるかも。

それと毎回記事に画像を付ければ一流になれると思う。

扱うジャンルが幅広いからのびしろありまくり

ねとねた

http://vitaminabcdefg.blog6.fc2.com/

将来性:★★ センス:★★ デザイン:★

コンセプトが明快でない、わかりにくい典型的な例。

デザインテンプレートfc2の有名なやつ色変えただけっていう、没個性まとめブログ。おなじテンプレートなのに変に個性出しまくりのAfter・JKさやたんとこを見て自分の没個性っぷりを知ると、次のステージに行けるかも。

どうにかしてトップイラストを用意、土俵に上がれるのはそこからじゃないかな。

ねとねたさんはVipperな俺さんとこを参考にするといいよ。ここの成長戦略描くとしたら、お手本になるのはV俺

ラニュー

http://blog.livedoor.jp/teranews/

将来性:★★★ センス:★★★ デザイン:★

インターネットの話題に特化できればいいんじゃね?ドワンゴとかグーグルの話題を見る限り、そういうのが好きなら、他はばっさり捨ててみると良い。「WEBサービスに特化した2chまとめ」「家電に特化した~」とか新しくて良いかも。

センスは抜群だと思うから、あとは一流になるためにはワイドガイド級のトップ絵かな。

やる夫短編集 地獄

http://mukankei961.blog105.fc2.com/

将来性:★★★ センス:★ デザイン:★

AAのための横スクロールの大きさは納得できるので良しとしても、トップ絵が残念すぎて弱小感を出してしまってる。

やっぱVIPやる夫なら、トップ絵にこだわらないと評価の対象にもならないんじゃないかな。

あとは、やる夫系はいつまでも読まれるコンテンツだから、過去記事の活かし方をもっと考えて。内容はまあま。

ポスト・あんそく

A6ニュース(゚Д゚) - livedoor Blogブログ

http://blog.livedoor.jp/a6news/

将来性:★★ センス:★★★ デザイン:★

コンセプトの意味が通じにくいことで損してるかも。

デザインはもっと頑張れ、ライブドアの定番テンプレートじゃあ三流感がびしびしでてる。

でもセンスを感じさせる部分もあって、面白い雰囲気がでてるのがA6ニュース。挙げた2つの欠点クリアされればかなり良くなると思う。

記事はインデントが効いてて読みやすい。

こっちは必死なんだよ(#^ω^)

http://ichisureichi.blog67.fc2.com/

将来性:★★ センス:★ デザイン:★

文章読みにくい。どうにかしてくれ。内容は良いから、デザインがとにかく課題かな。

あとコンセプトも課題

「記事の掲載方針はぶっちゃけありません」こういうサイトが伸びるためには結局なんだかんだ言って安定しておもしろいぜ!っていう雰囲気がでてないとダメ。それをニュース系で実現するのは難しそうだけども。。

いまのところ、つまらないまとめブログ

えっちら2

http://nonnude.blog59.fc2.com/

将来性:★★★ センス:★ デザイン:★

内容が超素晴らしい(俺好み)。しかしデザインが最悪。オバニコ級。

まず記事の色がバラバラなのがダメ。昔のほーむぺーじみたいな感じ。

あと全部太字なのがだめ。体験談の主役を太字にしたいんだろうけど、そのせいでブログトップページは全部太字で最悪。

エロ系なんだからなにかしら画像を貼ると良い。ベア速VIP画像の貼り方をそのままマネするだけでいいから。

内容が良いだけにのびしろは大きい。

キレイキラ速になれる。

Lucky 2 Channel  らっきー☆にちゃんねる

http://newsokuw.blog49.fc2.com/

将来性:★★★ センス:★★★ デザイン:★★

かわいいタイトルとそこそこのデザインが中堅感をかもしだしてるが、詰めが甘い感じ。ケアレスミスこそ直すのが一番面倒くさいのは解るけど、気合入れて工事してみ。

記事タイトル部分をもうちょっと変えるだけでだいぶ良くなると思う。咳をしてもゆとり風にタイトルを目立たせてみ

あとは、「ここに来ると面白いまとめが多い」って思わせるあとひとつなにか決定打があれば。

ポストハム速

ほんわか2ちゃんねる

http://honwaka2ch.blog90.fc2.com/

将来性:★★★ センス:★★★ デザイン:★★★

おもしろいし、更新多いし、短レスでかなり頑張ってる印象。

なによりコンセプトが確立されてて良い。

ディスクリプションの「ほんわかで無いものも多数アリ。」っていうのいらない。エロ記事もほんわかさせるのがここのブログの凄いところだから、エロさえも胸を張って掲載してて良いと思う。

ポストあやしいニュース2

JK VIP - livedoor Blogブログ

http://jkvip.net/

将来性:★ センス:★★ デザイン:★★

新参かと思ったら半年以上やってんのね。それで一日500程度、ページランク0ってどうなの、

JKの話題でもまじめ系にもっていくとそんなに人こないっていう典型的な例なのかな?

相互RSSをもっと増やしてタイトルをもっとエロくすればとりあえずそれだけで10倍になるんじゃね?

拡大思考ないのかな?なさそうだから将来性星ひとつ

たん速

http://tannsokuvip.blog54.fc2.com/

将来性:★★ センス:★ デザイン:★★

アンケート系が多いからそれを売りにすべき。

なにかキャッチコピーで一発でコンセプトが解るようにして。開設一か月で固定客がまだいないのは、そのせいだと思う。

正直何も感じさせない。

内容は安定してるのにもったいない感じ。

低速 VIP速報

http://teisokuvip.blog23.fc2.com/

将来性:★★ センス:★★★ デザイン:★★

今日出来たサイト

なかなかセンスは感じさせる。

さっぱりしたデザインの中で今後どう魅せてくれるのか。

白を基調としたデザインにするなら、神速VIPが参考になる。

千年後の君へにも同じことが言えるけど、メインカラー一色を使えばそれで良いというわけではなく、メインカラーを際立たせるための差し色が必要。

神速VIPはトップ絵がカラフルで賑やかだから、白が映えてる。そこに気をつけて改良できれば、(もちろん内容もあわせて、)すぐここまであげたブログの中で上の方にいける。

そんな俺はコピペちゃんねるの中の人

2008-09-28

みんないじめてるけど、はてなキーワードはすごいんだよ!

例えば「 はてなキーワードが嫌いになった理由 - 将来が不安」とか、最近はてなキーワードがだめとか何とか、そういう話題がかまびすしかったわけですが、いやいや、今更言うのもなんですが、はてなキーワードはすごいんですよ?

キーワードページからそのキーワード含む日記が解る。こういう機能、なかなか無いです。

でも、そのキーワードを使っているはてな以外の日記も見たい時があるかもしれません。

テクノラティなら、はてなに限らず、色々なブログサービスの、そのキーワードを含む記事を探すことができます。

でも、日記キーワードリンクからダイレクトに飛べないと、いちいち見る気になりません。なので、そういうGreasemonkeyスクリプトを書いてみました。はてダの記事中のキーワードリンクの、リンク先をテクノラティにします。

// ==UserScript==
// @name           Keyword to Technorati
// @namespace      http://anond.hatelabo.jp/
// @include        http://d.hatena.ne.jp/*
// ==/UserScript==
var keywords = document.getElementsByClassName("keyword");
for(var i=0; i<keywords.length; i++){
    keywords.item(i).href = "http://www.technorati.jp/search/" + keywords.item(i).textContent;
}

これではてダ以外の記事も見れて、ちょっと世界が広がるかも!

でも、これもちょっと不便です。キーワードリンクで、そのキーワード意味を知りたい時もあるからです。

はてなキーワードの素晴らしいところは、キーワード含む日記キーワード意味、どちらも一つのページで確認できる事です!まぁキーワードの説明とWikipedia、どっちか片方でも良いような気もしますがf(^ ^;)

そこで、テクノラティキーワード検索結果ページにも、そのキーワード意味が表示されれば便利です。

(余談ですけど、Wikipediaの記事があるなら、Wikipediaの記事だけ表示すれば十分かなぁとか思っちゃったり?概してWikipedia記述の方が優れてるし…)

というわけで、これもユーザースクリプトで実現してみます。

// ==UserScript==
// @name           Technorati with Wikipedia or ?keyword
// @namespace      http://anond.hatelabo.jp/
// @description    Add Wikipedia in Technorati search page
// @include        http://www.technorati.jp/search/*
// ==/UserScript==

var keyword = (decodeURIComponent(document.URL).split("?")[0]+" ").slice("http://www.technorati.jp/search/".length, -1);

function appendKeyword(title,body,url){
    var div = document.createElement("div");
    div.style.border = "inset gray thin";
    div.style.padding = "5px 14px";
    
    var h2 = document.createElement("h2");
    h2.innerHTML = title.link(url);
    h2.style.fontSize = "2em";
    div.appendChild(h2);
    
    var content = document.createElement("div");
    content.innerHTML = body;
    div.appendChild(content);
    
    div.appendChild(document.createElement("hr"));
    
    var foot = document.createElement("div");
    foot.innerHTML = "["+decodeURIComponent(url).link(url)+"]";
    foot.style.textAlign = "right";
    div.appendChild(foot);
    
    //document.getElementById("main").insertBefore(div, document.getElementById("main").firstChild);
    document.getElementById("extra").insertBefore(div, document.getElementById("extra").firstChild);
}

GM_xmlhttpRequest({
    method: "GET",
    url: "http://wikipedia.simpleapi.net/api?output=json&amp;keyword="+keyword,
    onload: function(response){
        var wp = eval(response.responseText);
        if(wp){
            appendKeyword(wp[0].title, wp[0].body, "http://ja.wikipedia.org/wiki/"+encodeURIComponent(wp[0].title));
        }else{
            GM_xmlhttpRequest({
                method: "GET",
                url: "http://d.hatena.ne.jp/keyword?mode=rss&amp;ie=utf8&amp;word="+encodeURIComponent(keyword),
                onload: function(response){
                    var hk = (new DOMParser).parseFromString(response.responseText, "text/xml");
                    appendKeyword(keyword,
                        hk.getElementsByTagName("description").item(1).textContent,
                        "http://d.hatena.ne.jp/keyword/"+keyword
                    );
                }
            });
        }
    }
});

これで、はてダキーワードリンクで飛んだ先に、その単語の説明とはてな以外も含めたブログ記事が表示されます。やったね\(^o^)/

追記

用語の説明は、検索結果の上に表示するより、サイドバー広告が表示されてる)にあった方が便利かなーとか思ったので、コードをちょぴっと変更しました。既にインスコしちゃってた人、ごめんね!

ところでテクノラティ検索結果のAutopagerize、なんか1頁目ばっかり継ぎ足される気がするけど、ボクだけかな?

2008-09-05

Google chromeブロックレベル要素の高さを揃える話

自分用にメモ

padding-bottom: 32768px;
margin-bottom: -32768px;

これで高さ揃えるってのが去年の10月頃に出てたと思うんだけど、これやるとGoogle Chrome で背景画像が正しく出ない。

下のページ見てもらうと分かるんだけど、サイドバーの背景が出てないんだよね。

http://www.linkthink.co.jp/contact/

試してみたら、色なら出ることがわかった。

背景「画像」がダメなんだ。背景「色」なら敷ける。

仕事で使ったこと無くて良かった。

2008-08-10

Firefoxテキストブラウザ化するcss作った【黒画面】【コンソール】

2008.9.28 12:53 追記



★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★


★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★





_________________ここから下は古い情報▼__________________________________________________




今、自分のブログスクラッチしているので、こちらで。→2008/9/28 スクラッチ完了!BLACK-OUT.CSS公式ページ

作りました

【black-out.css

2008.9.13 23:30 追記

2008.8.10 22:29 追記

エントリは、下記の方におすすめ情報でございます。

  1. Firefoxユーザーである(※他ブラウザでもいけます。が、当エントリでは導入方法を紹介していません。追記したbookmarkletだとoperasafariなどのブラウザでもすぐにお試しできます)
  2. Firefoxのアドオン「stylish」を入れている。もしくは必要なら入れてもいいって人。
  3. mixiPCで使っている場合)右に出てくる鬱陶しいバナーうんざりしていたり、日記コミュにしか興味がない人。
  4. お気に入りのブログが、情報源の質には満足しているが左右のアフィリが鬱陶しい点を残念に思ってる人
  5. コンソール(CUI)が好きな人、シンプルなのが好きな人、ぶっちゃけ文字以外用がないのに飾りの画像とかWEBにいらねーよと思ってる人
  6. カラム、2カラムレイアウトのせいで、目線が左右に移動しないといけないのがイラっとくる人、コードは上から下だけでいいだろって思っている人
  7. リンクテキスト探しがきらいな人、どこがリンクがすぐに知りたい人
  8. 背景色が明るいのが目が疲れる人、壁紙も黒にしちゃってるような人、長時間ネットまくりなんで目が疲れにくいのがいい人
  9. サイトによって極端に読みにくいサイズや色のテキストがあることに普段からイラっときている人

要は、LynxのようなシンプルWeb世界がなればいいのになと思っている方。

そして、どんなサイトでも目線は左右に動かしたくない!スクロールは上下だけで済ませたい!

と、強く考えておられる方むけの情報です。

何を作ったの?

私はテキストブラウザLynxを時々使っているのですが、これでサイトを見るとシンプルに見れるのですごく良いんですよね。

ただ、LynxFlashとか画像が見れないし、マウスが使えないのはいざって時にちょっと不便。

で、Firefoxテキストブラウザ化できないかなあと、ふと思いまして、思いつきで作ってしまいました。

私めもwebデザイナーやっとるんですが、上記のように、昨今のwebデザインなんて普段はなくていいって思っている奴でして。

仕事じゃ3カラムサイトとか作りますが自分はそんなん好きじゃないです。色がサイトごとに違うってのも理解できない。

必要なのは情報であってデザイナーデザインなんてどうでもいいんですよ。

だから2chシンプル画面とか大好きです。

そんな訳で、どんなサイトでもテキストブラウザ状態で閲覧できるFirefox用の拡張cssを作りました(やっつけだけど)。

ただ、ニュースサイト画像が見れないと困る時もあるので、普段は小さなサムネイルで、カーソルを合わせた時だけ大きく表示されるようにしています。

@このcssはコンセプト実証モデルです。思いつきで作ってるのでちょっと問題もあります。フィードバックとか意見など頂けると嬉しいかも。

@将来的には、グリモンjsも組み合わせてもっとコンソールのような感覚ブラウジングできるようにしたい

@(参考用)私のよく見るサイト・・・ニコ動wikipediaスラッシュドットジャパン、2nn.jp2ch)、mixiはてなホッテントリに上がっているブログ各種

ちなみに、こんなん使うな、既にこんないいのあるわいってのをご存知の方は教えてくれると嬉しいです。

それなりに探したのだけど、見当たらなくて・・・だから自作したので。


導入方法について

  1. Firefoxのアドオン「stylish」をインストールします。→ https://addons.mozilla.org/ja/firefox/addon/2108
  2. インストール後、stylishの管理画面を開きます。(Firefoxウィンドウの右下にあるメモ帳っぽいアイコン右クリックスタイルの管理)
  3. スタイルの管理」で「書く」を選択、タイトルはblack-outとかテキトーに入れてください。で、下記のコードを貼付けて保存してください。
  4. どんなサイトでも同じデザイン(コンソールのような画面)になります。なお、いつでもstylishdのメニューでcssの有効/無効は切り替えられますのでご安心を。
  5. テストとして、wikipediaを見てみられると雰囲気が掴めると思います。


/*
 * ----------------------------
 * black-out.css
 * author zamamin.com
 * build 2008.8.09 15:03
 * version 0.0.31
 *  fix @namespaceを書いてなかったので追加
 * ----------------------------
 *
 */

@namespace url(http://www.w3.org/1999/xhtml);

/* 全てのエレメントをリセット */
body,body * {
background-image:none !important;
background-color:#000 !important;
border-color:#333 !important;
text-decoration:none !important;
color:#aaa !important;              /*<- テキスト色 */
font-size:16px !important;          /*<- 文字サイズ */
font-weight:normal !important;
padding:0.15em !important;
margin:0 !important;
line-height:1.25em !important;
text-align:left !important;
text-indent:0 !important;
font-family:Arial,Helvetica,Verdana,'ヒラギノ角ゴPro W3','Hiragino Kaku Gothic Pro',Osaka,'メイリオ',Meiryo,'MS Pゴシック',sans-serif !important; 
float:none !important;
clear:both !important;
position:relative !important;
width:auto  !important;
height:auto  !important;

}

body {
background-color:#000 !important;
padding:0.5em !important;
}

body * p, body * div,
body * h1, body * h2, body * h3, body * h4, body * h5, body * h6{
margin-bottom:0.3em !important;
float:left !important;
clear:both !important;
}


/* リンク色 */
body * a,
body * a *{
color:#a50 !important;
}

/* アクセスみのリンク色 */
body * a:visited{
color:#a50 !important;
}

/* カーソルを合わせた時のリンク色 */
body * a:hover,
body * a:hover *{
color:#0aa !important;
background-color:#609 !important;
}


/* 画像は普段は小さくサムネイル表示。鬱陶しいので薄く表示 */
body * img{
opacity:0.3 !important;
height:15px !important;
width:15px !important;
}

/* 画像マウスカーソルもっていけば原寸サイズになる */
body * img:hover{
opacity:0.9 !important;
height:auto !important;
width:auto !important;
}


button,
input,
select,
option,
textarea{
 color:#f00 !important;
 padding:0.05em !important;
 height:auto !important;
}

/* テーブルのスタイル */
table{
border:none;
}

table td,
table th{
border:none;
border-right:1px dashed #999 !important;
border-bottom:1px dashed #999 !important;
}



/* for 2ch(暫定) */
body * dt{
font-weight:bold !important;
}


/* 二コ動 */
embed#flvplayer{
height:540px !important;
width:952px !important;
}




既知の問題点というか仕様



update

2008-06-06

ちょとsYレならんしょこれは・・?

<ul id="menu">
	<li><a href="#">だらだら</a></li>
	<li><a href="#">だらだら</a></li>
	<li><a href="#">だらだら</a><ul><li>だらだら</li><li>だらだらだらだらだらだら</ul></li>
	<li><a href="#">ゆっくり</a><ul><li>していってね!</li></ul></li>
</ul>

こんな感じのリスト

#menu li{
	display:block;
	float:left;
	margin-left:0;
	padding-left:0;
	margin-right:1em;
	border:1px dashed red;
}
#menu li ul{
	position:absolute;
	display:block;
	margin-left:0;
	padding-left:0;
	border:1px dashed black;
}
#menu li li{
	list-style:none;
	border:0 none;
	float:none;
	width:auto;
}

こんな感じのスタイル書いて

window.onload=function(){
	var li=document.getElementById("menu").childNodes;
	for(var i=0;i<li.length;i++){
		if(li[i].childNodes[1]){
			var submenu=li[i].childNodes[1];
			li[i].onmouseover=function(){
				this.childNodes[1].style.display="block";
			}
			li[i].onmouseout=function(){
				this.childNodes[1].style.display="none";
			}
		}
	}
};

みたいなスクリプト書いたときのIEの挙動がおかしい!助けて!

2008-02-19

はてなブックマーク2ちゃんねるっぽくするユーザースタイルシート

インスパイヤ元 - http://anond.hatelabo.jp/20080219145538

@-moz-document domain("b.hatena.ne.jp") {
  ul#bookmarked_user{
    font-size: 105%;
  }
  #bookmarked_user li{
    list-style-type: decimal;
  }
  #bookmarked_user li:before{
    content: '\FF1A';
  }
  #bookmarked_user .timestamp:before{
    content: '\756A\7D44\306E\9014\4E2D\3067\3059\304C\306F\3066\306A\3067\3059\FF1A ';
    font-size: 110%;
    font-weight: bold;
    color: #008000;
  }
  #bookmarked_user img.hatena-id-icon,
  #bookmarked_user .user-tag,
  #bookmarked_user .hatena-star-comment-container,
  #bookmarked_user .hatena-star-star-container{
    display: none;
  }
  #bookmarked_user a[href*='bookmark-']:before{
    content: 'ID:';
  }
  #bookmarked_user a[href*='bookmark-']:link,
  #bookmarked_user a[href*='bookmark-']:hover{
    color: black;
    text-decoration: none;
  }
  #bookmarked_user a[href*='bookmark-']:hover{
    color: blue;
    text-decoration: underline;
  }
  #bookmarked_user span.comment{
   display: block;
   padding: 8px 1em;
   margin-left: 1.5em;
  }
}

曜日の表記と「2008年02月19日」を「2008/02/19」にしたかったが、方法が分からなかった。あ、あと投稿時間も。Greasemonkey じゃないと無理か?

追記

転載・改変は自由なので、再利用したいとかここを変えた方がより良い、という方は好きに使って結構です。

追記2

はてブちゃんねる

はてなブックマーク2ちゃんねる風に見せるサービスktkr

「はてブちゃんねる」を作った - mayokara memo

2007-10-07

mixiユーザースタイルシート書いてみた

ミクシィデザインにむかついた。

素敵さんが公開されているユーザースタイルシートをつかいたかった

でもニュース日記ランキングは表示したかった

→自分でなんとかするしかないみたいだ・・・

っちゅーことでつくったcss

人様のコードを土台にしてるしブログなんてもってないし

コードは整理されてないしもうやる気は残ってないし

でココで公開してしまえ

ミクシィの表示を横幅720pxの2ペインにします。

主な改造点は

・全体的に行間を狭めた。

・全体的に余白を狭めた。

ニュース天気ランキングを一番下に表示。

・ついでに一番上のmixiロゴも控えめな大きさに。

・一部の背景をうっすーい灰色にした。

・さよならmikly

・絶対位置指定divを排除(全部は無理なので目立つ部分を適当に。)

・グローバルナビとかローカルナビとかのメニュー画像幅調整

広告をほどほどけした。

etc...

使い方は「mixi ユーザースタイルシート」あたりで検索してくれ…

/* mixi User Style Sheet by anon */
/*  based mixi 2pain User StyleSheet (by Shao)  thank you ! */

.emoji{display:none !important}

/* 広告*/
p.adBanner, div#diaryComment div.diaryBottomAd, div.prContents, div.sponsorList01{display:none !important} 
div#adBanner{display:none !important}

/*ローカルナビ*/
#localNavigation ul li{position:static;}
#localNavigation ul.localNaviHome img{width:80px !important;}
#localNavigation ul.localNaviFriend img{width:102px !important;}
a#diaryPullDownButton,a#photoPullDownButton,a#videoPullDownButton, a#reviewPullDownButton{display:none !important}
li.mikly, li.review, li.movie{display:none !important}
li.home img {width:73px !important}

/* infomation */
div.information {line-height:1.1 !important; font-size:12px !important;}
div.information h2{padding-top:10px !important; position:static !important; float:left !important; background-position: 10px 10px !important; }
div.information ul{ line-height:1.1 !important;}
div.information div.contents{ padding-bottom:0px !important; position:static; width: 98%;}
div.information div.contents ul { padding-bottom:0px !important;}

/* delete intro */
#intro{display:none !important}

#bodyContents #newFriendDiary,
#bodyContents #newComment,
#bodyContents #newBbs,
#bodyContents #newVideo,
#bodyContents #newAlbum,
#bodyContents #newPlaylist,
#bodyContents #newReview,
#bodyContents #myUpdate{
padding-bottom:5px !important;
}

div div.contents {line-height:1.1 !important; background:#fcfcfc;}
#newMyDiary div.contents dl.contentsList02{ padding-bottom:1px;}

dl.contentsList01{ line-height:1.5 !important;}
dl.contentsList02{ line-height:1.5 !important;}
ul.entryList01{ line-height: 1.2 !important;}
dl.contentsList01 dd{padding-left:16px; background-position: 0% 0.5em;}

/* 3rd column */
#bodySub{float:left !important;width:100% !important; margin:0;padding:0;}
div#help{display:none !important}
div.prContents, div.adBanner, p.greenpower{display:none !important}
div#miklyContents{display:none !important}
div#prSepecial{display:none !important}
div.bodySubSection {width:224px !important; float:left !important; margin:3px !important;}
div.bodySubSection div.heading01{position:static !important;}
div.bodySubSection a.sectionSize{ position:static !important; margin: -20px 0 0 200px !important; }


/* header*/
#headerArea{ background: none !important; height:91px !important;}
#headerArea h1 a{ padding:5px 0 5px !important;text-align:left !important;width:720px !important;}
#headerArea h1 img {width:93px !important;height:23px !important;}

/* footer */
div#headerArea{width:720px !important}
div#headerArea,div#bodyArea,div#footerArea, div#footerArea p,div#footerArea ul{width:720px !important; }
div#footerArea, div#footerArea p,div#footerArea ul{width:720px !important; overflow:hidden  !important; }
div#footerArea ul.footerNavigation01 li { margin:0 2px !important }

2007-09-28

http://anond.hatelabo.jp/20070928140929

たまにLLでページをつくったりするのだけどデザインがものすごくめんどくさい。

というよりたぶん性にあわないのだとおもう。

一応外部よみこみのcssは読み込む。

が、別にそのサイトのために書いたものではないので、いらないものもゴソっとついている。

レイアウトは、まずまっさきにテーブルで書く。

colspan,rowspanなんてあたりまえだ。

思った位置になんとか表示されているのを確認する。

ちょっと見てくれ悪いなーとおもったら、タグに直接スタイルシートを書き込む。

主にmargin,padding

修正も大変かもしれないが、0から書くのもめんどくさい。

だれかデザインだけやってくれる人いないかな…。

デザイン外注っていくらぐらいするんだろう。

2007-09-14

初めてのJavaScript - HTMLファイル

<html><head&gt;<title>Hello JavaScript World!</title><style type="text/css">
<!--
  .select {
    margin-left: 30px;
    padding: 0 2px;
    width: 6em;
    border: dotted 1px;
  }
  .select p {
    margin: 2px;
  }
-->
</style></head&gt;<body><script type="text/javascript">
<!--
  // step 1 : output text
  document.write("Hello world!");

  // step 2 : output html
  document.write("<br/><b>Hello javascript world!</b>");

  // step 3 : manipulate DOM
  var p1 = document.createElement("p");
  p1.appendChild(document.createTextNode("Hello DOM world!"));
  document.body.appendChild(p1);

  // step 3 : interactive, using function, event handler
  function solid() {
    this.style.borderStyle="solid";
  }
  var p2 = document.createElement("p");
  p2.appendChild(document.createTextNode("Hello interactive world!"));
  document.body.appendChild(p2);
  p2.addEventListener("click", solid, false); // not solid()

  // step 4 : using object, prototype, closure
  function P(str) {
    this.str = str;
  }
  P.prototype.regist = function(parent){
    this.elem = document.createElement("p");
    this.elem.appendChild(document.createTextNode(this.str));
    parent.appendChild(this.elem);
    var self = this;
    this.elem.addEventListener("click", function(){self.act()}, false);
    // otherwise
    //  this.elem.helloworld = this;
    //  this.elem.addEventListener("click", function(){this.helloworld.act()}, false);
    // bad way
    //  this.elem.addEventListener("click", this.act, false);
    //  this.elem.addEventListener("click", function(){this.act()}, false);
  };
  P.prototype.act = function(){};

  var p3 = new P("Hello prototype world!");
  p3.act = function(){
    if (this.elem.style.borderStyle == ""){
      this.elem.style.borderStyle = "solid";
    } else {
      this.elem.style.borderStyle = "";
    }
  };
  p3.regist(document.body);

  // step 5 : inheritance
  function SELECT(parent, str) {
    this.str = str;
    this.regist(parent);
  }
  SELECT.prototype = new P();
  SELECT.prototype.act = function(){
    p4.elem.style.borderStyle = this.str;
    p4.div.style.display = "none";
  }

  var p4 = new P("Hello world!");
  p4.div = document.createElement("div");
  p4.div.className = "select";
  p4.div.style.display = "none";
  p4.select = [
    new SELECT(p4.div, "none"),
    new SELECT(p4.div, "dotted"),
    new SELECT(p4.div, "solid")
  ];
  p4.act = function(){
    p4.div.style.display = "block";
  };
  p4.regist(document.body);
  document.body.appendChild(p4.div);

//-->
</script></body></html>

2007-07-20

うがぁ

http://anond.hatelabo.jp/20070720072141

将来の拡張用にPADDING領域は作らなくて大丈夫?ってマジで心配する

これやっぱ他でもそうなのか!

よくあるパターン

http://anond.hatelabo.jp/20070719172216

・二人の船頭

 要望を吸い上げるために打ち合わせをしてると、相手方の担当者二人がいつも細かい部分で言い争ってて、なかなか方向が決まらない。

・古株と新米

 そして、その二人が古株と新米である事もよくある事。

 古株は業務知識に長けているが、技術的な知識がCOBOL全盛期から進歩してない(たとえば、将来の拡張用にPADDING領域は作らなくて大丈夫?ってマジで心配する)ので、そこらへんでトンチンカン意見を言う。

 新米は最新技術に長けていても、業務知識が欠けているので、そこらへんでトンチンカン意見を言う。

 仲が良ければちょうど補完し合えていいのに、大抵仲が悪かったりする。

会議室現場

 会議室で打ち合わせされて決まる仕様は、上司の理想。

 現場ヒアリングされて決まる仕様は、ユーザ現実

普通の人にとって、Excelシートはただの清書ツール

 素人さんの作ったExcelシートは、一見、行×列に分けて綺麗に項目が整理されているように見えても、それはワナである。

 このままデータベースフィールドレコードとして対応できると思ったら大間違い。

 実際の運用ではイレギュラーパターンが発生するたびに、その行だけ、普段使っている数式を消して手動で編集したりなんてことはザラ。

 それも、「普段こんなシートを使ってる」と渡されたExcelシートには、決まってそのイレギュラーパターン存在しなかったりするので、そういう運用存在自体に気付かなかったりするもの。

 上司ですら気付かなかったりするから、現場で一列一列確認する必要があったりする。なお、現場担当者ですら全部の例外運用パターンをすぐ思い出せるわけではないのが、また困りもの。とにかく根気強く聞き出すしかない。

2007-07-19

/* Ten */
if (typeof(Ten) == 'undefined') {
    Ten = {};
}
Ten.NAME = 'Ten';
Ten.VERSION = 0.06;

/* Ten.Class */
Ten.Class = function(klass, prototype) {
    if (klass && klass.initialize) {
	var c = klass.initialize;
    } else if(klass && klass.base) {
        var c = function() { return klass.base[0].apply(this, arguments) };
    } else {
	var c = function() {};
    }
    c.prototype = prototype || {};
    c.prototype.constructor = c;
    Ten.Class.inherit(c, klass);
    if (klass && klass.base) {
        for (var i = 0;  i < klass.base.length; i++) {
	    var parent = klass.base[i];
            if (i == 0) {
                c.SUPER = parent;
                c.prototype.SUPER = parent.prototype;
            }
            Ten.Class.inherit(c, parent);
            Ten.Class.inherit(c.prototype, parent.prototype);
        }
    }
    return c;
}
Ten.Class.inherit = function(child,parent) {
    for (var prop in parent) {
        if (typeof(child[prop]) != 'undefined' || prop == 'initialize') continue;
        child[prop] = parent[prop];
    }
}

/*
// Basic Ten Classes
**/

/* Ten.JSONP */
Ten.JSONP = new Ten.Class({
    initialize: function(uri,obj,method) {
        if (Ten.JSONP.Callbacks.length) {
            setTimeout(function() {new Ten.JSONP(uri,obj,method)}, 500);
            return;
        }
        var del = uri.match(/\?/) ? '&' : '?';
        uri += del + 'callback=Ten.JSONP.callback';
        if (!uri.match(/timestamp=/)) {
            uri += '&' + encodeURI(new Date());
        }
        if (obj && method) Ten.JSONP.addCallback(obj,method);
        this.script = document.createElement('script');
        this.script.src = uri;
        this.script.type = 'text/javascript';
        document.getElementsByTagName('head')[0].appendChild(this.script);
    },
    addCallback: function(obj,method) {
        Ten.JSONP.Callbacks.push({object: obj, method: method});
    },
    callback: function(args) {
        // alert('callback called');
        var cbs = Ten.JSONP.Callbacks;
        for (var i = 0; i < cbs.length; i++) {
            var cb = cbs[i];
            cb.object[cb.method].call(cb.object, args);
        }
        Ten.JSONP.Callbacks = [];
    },
    MaxBytes: 8000,
    Callbacks: []
});

/* Ten.XHR */
Ten.XHR = new Ten.Class({
    initialize: function(uri,opts,obj,method) {
        if (!uri) return;
        this.request = Ten.XHR.getXMLHttpRequest();
        this.callback = {object: obj, method: method};
        var xhr = this;
        var prc = this.processReqChange;
        this.request.onreadystatechange = function() {
            prc.apply(xhr, arguments);
        }
        var method = opts.method || 'GET';
        this.request.open(method, uri, true);
        if (method == 'POST') {
            this.request.setRequestHeader('Content-Type',
                                          'application/x-www-form-urlencoded');
        }
        var data = opts.data ? Ten.XHR.makePostData(opts.data) : null;
        this.request.send(data);
    },
    getXMLHttpRequest: function() {
        var xhr;
        var tryThese = [
            function () { return new XMLHttpRequest(); },
            function () { return new ActiveXObject('Msxml2.XMLHTTP'); },
            function () { return new ActiveXObject('Microsoft.XMLHTTP'); },
            function () { return new ActiveXObject('Msxml2.XMLHTTP.4.0'); },
        ];
        for (var i = 0; i < tryThese.length; i++) {
            var func = tryThese[i];
            try {
                xhr = func;
                return func();
            } catch (e) {
                //alert(e);
            }
        }
        return xhr;
    },
    makePostData: function(data) {
        var pairs = [];
        var regexp = /%20/g;
        for (var k in data) {
            var v = data[k].toString();
            var pair = encodeURIComponent(k).replace(regexp,'+') + '=' +
                encodeURIComponent(v).replace(regexp,'+');
            pairs.push(pair);
        }
        return pairs.join('&');
    }
},{
    processReqChange: function() {
        var req = this.request;
        if (req.readyState == 4) {
            if (req.status == 200) {
                var cb = this.callback;
                cb.object[cb.method].call(cb.object, req);
            } else {
                alert("There was a problem retrieving the XML data:\n" +
                      req.statusText);
            }
        }
    }
});

/* Ten.Observer */
Ten.Observer = new Ten.Class({
    initialize: function(element,event,obj,method) {
        var func = obj;
        if (typeof(method) == 'string') {
            func = obj[method];
        }
        this.element = element;
        this.event = event;
        this.listener = function(event) {
            return func.call(obj, new Ten.Event(event || window.event));
        }
        if (this.element.addEventListener) {
            if (this.event.match(/^on(.+)$/)) {
                this.event = RegExp.$1;
            }
            this.element.addEventListener(this.event, this.listener, false);
        } else if (this.element.attachEvent) {
            this.element.attachEvent(this.event, this.listener);
        }
    }
},{
    stop: function() {
        if (this.element.removeEventListener) {
            this.element.removeEventListener(this.event,this.listener,false);
        } else if (this.element.detachEvent) {
            this.element.detachEvent(this.event,this.listener);
        }
    }
});

/* Ten.Event */
Ten.Event = new Ten.Class({
    initialize: function(event) {
        this.event = event;
    },
    keyMap: {
        8:"backspace", 9:"tab", 13:"enter", 19:"pause", 27:"escape", 32:"space",
        33:"pageup", 34:"pagedown", 35:"end", 36:"home", 37:"left", 38:"up",
        39:"right", 40:"down", 44:"printscreen", 45:"insert", 46:"delete",
        112:"f1", 113:"f2", 114:"f3", 115:"f4", 116:"f5", 117:"f6", 118:"f7",
        119:"f8", 120:"f9", 121:"f10", 122:"f11", 123:"f12",
        144:"numlock", 145:"scrolllock"
    }
},{
    mousePosition: function() {
        if (!this.event.clientX) return;
        return Ten.Geometry.getMousePosition(this.event);
    },
    isKey: function(name) {
        var ecode = this.event.keyCode;
        if (!ecode) return;
        var ename = Ten.Event.keyMap[ecode];
        if (!ename) return;
        return (ename == name);
    },
    targetIsFormElements: function() {
        var target = this.event.target;
        if (!target) return;
        var T = (target.tagName || '').toUpperCase();
        return (T == 'INPUT' || T == 'SELECT' || T == 'OPTION' ||
                T == 'BUTTON' || T == 'TEXTAREA');
    },
    stop: function() {
        var e = this.event;
        if (e.stopPropagation) {
            e.stopPropagation();
            e.preventDefault();
        } else {
            e.cancelBubble = true;
            e.returnValue = false;
        }
    }
});

/* Ten.DOM */
Ten.DOM = new Ten.Class({
    getElementsByTagAndClassName: function(tagName, className, parent) {
        if (typeof(parent) == 'undefined') {
            parent = document;
        }
        var children = parent.getElementsByTagName(tagName);
        if (className) { 
            var elements = [];
            for (var i = 0; i < children.length; i++) {
                var child = children[i];
                var cls = child.className;
                if (!cls) {
                    continue;
                }
                var classNames = cls.split(' ');
                for (var j = 0; j < classNames.length; j++) {
                    if (classNames[j] == className) {
                        elements.push(child);
                        break;
                    }
                }
            }
            return elements;
        } else {
            return children;
        }
    },
    removeEmptyTextNodes: function(element) {
        var nodes = element.childNodes;
        for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) {
                node.parentNode.removeChild(node);
            }
        }
    },
    nextElement: function(elem) {
        do {
            elem = elem.nextSibling;
        } while (elem && elem.nodeType != 1);
        return elem;
    },
    prevElement: function(elem) {
        do {
            elem = elem.previousSibling;
        } while (elem && elem.nodeType != 1);
        return elem;
    },
    scrapeText: function(node) {
        var rval = [];
        (function (node) {
            var cn = node.childNodes;
            if (cn) {
                for (var i = 0; i < cn.length; i++) {
                    arguments.callee.call(this, cn[i]);
                }
            }
            var nodeValue = node.nodeValue;
            if (typeof(nodeValue) == 'string') {
                rval.push(nodeValue);
            }
        })(node);
        return rval.join('');
    },
    onLoadFunctions: [],
    loaded: false,
    timer: null,
    addEventListener: function(event,func) {
        if (event != 'load') return;
        Ten.DOM.onLoadFunctions.push(func);
        Ten.DOM.checkLoaded();
    },
    checkLoaded: function() {
        var c = Ten.DOM;
        if (c.loaded) return true;
        if (document && document.getElementsByTagName &&
            document.getElementById && document.body) {
            if (c.timer) {
                clearInterval(c.timer);
                c.timer = null;
            }
            for (var i = 0; i < c.onLoadFunctions.length; i++) {
                    c.onLoadFunctions[i]();
            }
            c.onLoadFunctions = [];
            c.loaded = true;
        } else {
            c.timer = setInterval(c.checkLoaded, 13);
        }
    }
});

/* Ten.Style */
Ten.Style = new Ten.Class({
    applyStyle: function(elem, style) {
        for (prop in style) {
            elem.style[prop] = style[prop];
        }
    }
});

/* Ten.Geometry */
Ten.Geometry = new Ten.Class({
    initialize: function() {
        if (Ten.Geometry._initialized) return;
        var func = Ten.Geometry._functions;
        var de = document.documentElement;
        if (window.innerWidth) {
            func.getWindowWidth = function() { return window.innerWidth; }
            func.getWindowHeight = function() { return window.innerHeight; }
            func.getXScroll = function() { return window.pageXOffset; }
            func.getYScroll = function() { return window.pageYOffset; }
        } else if (de && de.clientWidth) {
            func.getWindowWidth = function() { return de.clientWidth; }
            func.getWindowHeight = function() { return de.clientHeight; }
            func.getXScroll = function() { return de.scrollLeft; }
            func.getYScroll = function() { return de.scrollTop; }
        } else if (document.body.clientWidth) {
            func.getWindowWidth = function() { return document.body.clientWidth; }
            func.getWindowHeight = function() { return document.body.clientHeight; }
            func.getXScroll = function() { return document.body.scrollLeft; }
            func.getYScroll = function() { return document.body.scrollTop; }
        }
        Ten.Geometry._initialized = true;
    },
    _initialized: false,
    _functions: {},
    getScroll: function() {
        if (!Ten.Geometry._initialized) new Ten.Geometry;
        return {
            x: Ten.Geometry._functions.getXScroll(),
            y: Ten.Geometry._functions.getYScroll()
        };
    },
    getMousePosition: function(pos) {
        // pos should have clientX, clientY same as mouse event
        if ((navigator.userAgent.indexOf('Safari') > -1) &&
            (navigator.userAgent.indexOf('Version/') < 0)) {
            return {
                x: pos.clientX,
                y: pos.clientY
            };
        } else {
            var scroll = Ten.Geometry.getScroll();
            return {
                x: pos.clientX + scroll.x,
                y: pos.clientY + scroll.y
            };
        }
    },
    getElementPosition: function(e) {
        return {
            x: e.offsetLeft,
            y: e.offsetTop
        };
    },
    getWindowSize: function() {
        if (!Ten.Geometry._initialized) new Ten.Geometry;
        return {
            w: Ten.Geometry._functions.getWindowWidth(),
            h: Ten.Geometry._functions.getWindowHeight()
        };
    }
});

/* Ten.Position */
Ten.Position = new Ten.Class({
    initialize: function(x,y) {
        this.x = x;
        this.y = y;
    },
    subtract: function(a,b) {
        return new Ten.Position(a.x - b.x, a.y - b.y);
    }
});

/*
// require Ten.js
**/

/* Ten.SubWindow */
Ten.SubWindow = new Ten.Class({
    initialize: function() {
        var c = this.constructor;
        if (c.singleton && c._cache) {
            return c._cache;
        }
        var div = document.createElement('div');
        Ten.Style.applyStyle(div, Ten.SubWindow._baseStyle);
        Ten.Style.applyStyle(div, c.style);
        this.window = div;
        this.addContainerAndCloseButton();
        document.body.appendChild(div);
        if (c.draggable) {
            this._draggable = new Ten.Draggable(div, this.handle);
        }
        if (c.singleton) c._cache = this;
        return this;
    },
    _baseStyle: {
        color: '#000',
        position: 'absolute',
        display: 'none',
        zIndex: 2,
        left: 0,
        top: 0,
        backgroundColor: '#fff',
        border: '1px solid #bbb'
    },
    style: {
        padding: '2px',
        textAlign: 'center',
        borderRadius: '6px',
        MozBorderRadius: '6px',
        width: '100px',
        height: '100px'
    },
    handleStyle: {
        position: 'absolute',
        top: '0px',
        left: '0px',
        backgroundColor: '#f3f3f3',
        borderBottom: '1px solid #bbb',
        width: '100%',
        height: '30px'
    },
    containerStyle: {
        margin: '32px 0 0 0',
        padding: '0 10px'
    },
    // closeButton: 'close.gif',
    closeButton: 'http://s.hatena.com/images/close.gif',
    closeButtonStyle: {
        position: 'absolute',
        top: '8px',
        right: '10px',
        cursor: 'pointer'
    },
    _baseScreenStyle: {
        position: 'absolute',
        top: '0px',
        left: '0px',
        display: 'none',
        zIndex: 1,
        overflow: 'hidden',
        width: '100%',
        height: '100%'
    },
    screenStyle: {},
    showScreen: true,
    singleton: true,
    draggable: true,
    _cache: null
},{
    screen: null,
    windowObserver: null,
    visible: false,
    addContainerAndCloseButton: function() {
        var win = this.window;
        var c = this.constructor;
        var div = document.createElement('div');
        win.appendChild(div);
        Ten.Style.applyStyle(div, c.containerStyle);
        this.container = div;
        if (c.handleStyle) {
            var handle = document.createElement('div');
            Ten.Style.applyStyle(handle, c.handleStyle);
            win.appendChild(handle);
            this.handle = handle;
        }
        if (c.closeButton) {
	    var btn = document.createElement('img');
            btn.src = c.closeButton;
            btn.alt = 'close';
            Ten.Style.applyStyle(btn, c.closeButtonStyle);
            win.appendChild(btn);
            new Ten.Observer(btn, 'onclick', this, 'hide');
            this.closeButton = btn;
        }
        if (c.showScreen) {
            var screen = document.createElement('div');
            Ten.Style.applyStyle(screen, Ten.SubWindow._baseScreenStyle);
            Ten.Style.applyStyle(screen, c.screenStyle);
            document.body.appendChild(screen);
            this.screen = screen;
            new Ten.Observer(screen, 'onclick', this, 'hide');
        }
    },
    show: function(pos) {
        pos = (pos.x && pos.y) ? pos : {x:0, y:0};
        with (this.window.style) {
            display = 'block';
            left = pos.x + 'px';
            top = pos.y + 'px';
        }
        if (this.screen) {
            with (this.screen.style) {
                display = 'block';
                left = Ten.Geometry.getScroll().x + 'px';
                top = Ten.Geometry.getScroll().y + 'px';
            }
        }
        this.windowObserver = new Ten.Observer(document.body, 'onkeypress', this, 'handleEscape');
        this.visible = true;
    },
    handleEscape: function(e) {
        if (!e.isKey('escape')) return;
        this.hide();
    },
    hide: function() {
        if (this._draggable) this._draggable.endDrag();
        this.window.style.display = 'none';
        if (this.screen) this.screen.style.display = 'none';
        if (this.windowObserver) this.windowObserver.stop();
        this.visible = false;
    }
});

/* Ten.Draggable */
Ten.Draggable = new Ten.Class({
    initialize: function(element,handle) {
        this.element = element;
        this.handle = handle || element;
        this.startObserver = new Ten.Observer(this.handle, 'onmousedown', this, 'startDrag');
        this.handlers = [];
    }
},{
    startDrag: function(e) {
        if (e.targetIsFormElements()) return;
        this.delta = Ten.Position.subtract(
            e.mousePosition(),
            Ten.Geometry.getElementPosition(this.element)
        );
        this.handlers = [
            new Ten.Observer(document, 'onmousemove', this, 'drag'),
            new Ten.Observer(document, 'onmouseup', this, 'endDrag'),
            new Ten.Observer(this.element, 'onlosecapture', this, 'endDrag')
        ];
        e.stop();
    },
    drag: function(e) {
        var pos = Ten.Position.subtract(e.mousePosition(), this.delta);
        Ten.Style.applyStyle(this.element, {
            left: pos.x + 'px',
            top: pos.y + 'px'
        });
        e.stop();
    },
    endDrag: function(e) {
        for (var i = 0; i < this.handlers.length; i++) {
            this.handlers[i].stop();
        }
        if(e) e.stop();
    }
});

/* Hatena */
if (typeof(Hatena) == 'undefined') {
    Hatena = {};
}

/* Hatena.User */
Hatena.User = new Ten.Class({
    initialize: function(name) {
        this.name = name;
    },
    getProfileIcon: function(name) {
        if (!name) name = 'user';
        var pre = name.match(/^[\w-]{2}/)[0];
        var img = document.createElement('img');
        img.src = 'http://www.hatena.ne.jp/users/' + pre + '/' + name + '/profile_s.gif';
        img.alt = name;
        img.setAttribute('class', 'profile-icon');
        img.setAttribute('width','16px');
        img.setAttribute('height','16px');
        with (img.style) {
            margin = '0 3px';
            border = 'none';
            verticalAlign = 'middle';
        }
        return img;
    }
}, {
    profileIcon: function() {
        return Hatena.User.getProfileIcon(this.name);
    }
});

/* Hatena.Star */
if (typeof(Hatena.Star) == 'undefined') {
    Hatena.Star = {};
}

/*
// Hatena.Star.* classes //
**/
if (window.location && window.location.host.match(/hatena\.com/)) {
    Hatena.Star.BaseURL = 'http://s.hatena.com/';
} else {
    Hatena.Star.BaseURL = 'http://s.hatena.ne.jp/';
}
Hatena.Star.Token = null;

/* Hatena.Star.User */
Hatena.Star.User = new Ten.Class({
    base: [Hatena.User],
    initialize: function(name) {
        if (Hatena.Star.User._cache[name]) {
            return Hatena.Star.User._cache[name];
        } else {
            this.name = name;
            Hatena.Star.User._cache[name] = this;
            return this;
        }
    },
    _cache: {}
},{
    userPage: function() {
        return Hatena.Star.BaseURL + this.name + '/';
    }
});

/* Hatena.Star.Entry */
Hatena.Star.Entry = new Ten.Class({
    initialize: function(e) {
        this.entry = e;
        this.uri = e.uri;
        this.title = e.title;
        this.star_container = e.star_container;
        this.comment_container = e.comment_container;
        this.stars = [];
        this.comments = [];
    },
    maxStarCount: 11
},{
    flushStars: function() {
        this.stars = [];
        this.star_container.innerHTML = '';
    },
    bindStarEntry: function(se) {
        this.starEntry = se;
        for (var i = 0; i < se.stars.length; i++) {
            if (typeof(se.stars[i]) == 'number') {
                this.stars.push(new Hatena.Star.InnerCount(se.stars[i],this));
            } else {
                this.stars.push(new Hatena.Star.Star(se.stars[i]));
            }
        }
        if (se.comments && !this.comments.length) {
            for (var i = 0; i < se.comments.length; i++) {
                this.comments.push(new Hatena.Star.Comment(se.comments[i]));
            }
        }
        this.can_comment = se.can_comment;
    },
    setCanComment: function(v) {
        this.can_comment = v;
    },
    showButtons: function() {
        this.addAddButton();
        this.addCommentButton();
    },
    addAddButton: function() {
        if (this.star_container) {
            this.addButton = new Hatena.Star.AddButton(this);
            this.star_container.appendChild(this.addButton);
        }
    },
    addCommentButton: function() {
        if (this.comment_container) {
            this.commentButton = new Hatena.Star.CommentButton(this);
            this.comment_container.appendChild(this.commentButton.img);
        }
    },
    showStars: function() {
        var klass = this.constructor;
        // if (this.stars.length > klass.maxStarCount) {
        //     var ic = new Hatena.Star.InnerCount(this.stars.slice(1,this.stars.length));
        //     this.star_container.appendChild(this.stars[0]);
        //     this.star_container.appendChild(ic);
        //     this.star_container.appendChild(this.stars[this.stars.length - 1]);
        // } else {
        for (var i = 0; i < this.stars.length; i++) {
            this.star_container.appendChild(this.stars[i]);
        }
    },
    showCommentButton: function() {
        if (this.can_comment) {
            this.commentButton.show();
            if (this.comments.length) this.commentButton.activate();
        } else {
            // this.commentButton.hide();
        }
    },
    addStar: function(star) {
        this.stars.push(star);
        this.star_container.appendChild(star);
    },
    addComment: function(com) {
        if (!this.comments) this.comments = [];
        if (this.comments.length == 0) {
            this.commentButton.activate();
        }
        this.comments.push(com);
    },
    showCommentCount: function() {
        this.comment_container.innerHTML += this.comments.length;
    }
});

/* Hatena.Star.Button */
Hatena.Star.Button = new Ten.Class({
    createButton: function(args) {
        var img = document.createElement('img');
        img.src = args.src;
        img.alt = img.title = args.alt;
        with (img.style) {
	    cursor = 'pointer';
	    margin = '0 3px';
            padding = '0';
            border = 'none';
            verticalAlign = 'middle';
        }
        return img;
    }
});

/* Hatena.Star.AddButton */
Hatena.Star.AddButton = new Ten.Class({
    base: ['Hatena.Star.Button'],
    initialize: function(entry) {
        this.entry = entry;
        this.lastPosition = null;
        var img = Hatena.Star.Button.createButton({
            src: Hatena.Star.AddButton.ImgSrc,
            alt: 'Add Star'
        });
        this.observer = new Ten.Observer(img,'onclick',this,'addStar');
        this.img = img;
        return img;
    },
    ImgSrc: Hatena.Star.BaseURL + 'images/add.gif'
},{
    addStar: function(e) {
        this.lastPosition = e.mousePosition();
        var uri = Hatena.Star.BaseURL + 'star.add.json?uri=' + encodeURIComponent(this.entry.uri) +
            '&title=' + encodeURIComponent(this.entry.title);
        if (Hatena.Star.Token) {
            uri += '&token=' + Hatena.Star.Token;
        }
        new Ten.JSONP(uri, this, 'receiveResult');
    },
    receiveResult: function(args) {
        var name = args ? args.name : null;
        if (name) {
            this.entry.addStar(new Hatena.Star.Star({name: name}));
            //alert('Succeeded in Adding Star ' + args);
        } else if (args.errors) {
            var pos = this.lastPosition;
            pos.x -= 10;
            pos.y += 25;
            var scroll = Ten.Geometry.getScroll();
            var scr = new Hatena.Star.AlertScreen();
            var alert = args.errors[0];
            scr.showAlert(alert, pos);
        }
    }
});

/* Hatena.Star.CommentButton */
Hatena.Star.CommentButton = new Ten.Class({
    base: ['Hatena.Star.Button'],
    initialize: function(entry) {
        this.entry = entry;
        this.lastPosition = null;
        var img = Hatena.Star.Button.createButton({
            src: Hatena.Star.CommentButton.ImgSrc,
            alt: 'Comments'
        });
        img.style.display = 'none';
        this.observer = new Ten.Observer(img,'onclick',this,'showComments');
        this.img = img;
    },
    ImgSrc: Hatena.Star.BaseURL + 'images/comment.gif',
    ImgSrcActive: Hatena.Star.BaseURL + 'images/comment_active.gif'
},{
    showComments: function(e) {
        if (!this.screen) this.screen = new Hatena.Star.CommentScreen();
        this.screen.bindEntry(this.entry);
        var pos = e.mousePosition();
        pos.y += 25;
        this.screen.showComments(this.entry, pos);
    },
    hide: function() {
        this.img.style.display = 'none';
    },
    show: function() {
        this.img.style.display = 'inline';
    },
    activate: function() {
        this.show();
        this.img.src = Hatena.Star.CommentButton.ImgSrcActive;
    }
});

/* Hatena.Star.Star */
Hatena.Star.Star = new Ten.Class({
    initialize: function(args) {
        if (args.img) {
            this.img = args.img;
            this.name = this.img.getAttribute('alt');
        } else {
            this.name = args.name;
            var img = document.createElement('img');
            img.src = Hatena.Star.Star.ImgSrc;
            img.alt = this.name;
            with (img.style) {
                padding = '0';
                border = 'none';
            }
            this.img = img;
        }
	new Ten.Observer(this.img,'onmouseover',this,'showName');
	new Ten.Observer(this.img,'onmouseout',this,'hideName');
	if (this.name) {
            this.user = new Hatena.Star.User(this.name);
            this.img.style.cursor = 'pointer';
            new Ten.Observer(this.img,'onclick',this,'goToUserPage');
        }
        if (args.count && args.count > 1) {
            var c = document.createElement('span');
            c.setAttribute('class', 'hatena-star-inner-count');
            Ten.Style.applyStyle(c, Hatena.Star.InnerCount.style);
            c.innerHTML = args.count;
            var s = document.createElement('span');
            s.appendChild(img);
            s.appendChild(c);
            return s;
        } else {
            return this.img;
        }
    },
    ImgSrc: Hatena.Star.BaseURL + 'images/star.gif'
},{
    showName: function(e) {
        if (!this.screen) this.screen = new Hatena.Star.NameScreen();
        var pos = e.mousePosition();
        pos.x += 10;
        pos.y += 25;
        this.screen.showName(this.name, pos);
    },
    hideName: function() {
        if (!this.screen) return;
        this.screen.hide();
    },
    goToUserPage: function() {
        window.location = this.user.userPage();
    }
});

/* Hatena.Star.InnerCount */
Hatena.Star.InnerCount = new Ten.Class({
    initialize: function(count, e) {
        this.count = count;
        this.entry = e;
        var c = document.createElement('span');
        c.setAttribute('class', 'hatena-star-inner-count');
        Ten.Style.applyStyle(c, Hatena.Star.InnerCount.style);
        c.style.cursor = 'pointer';
        c.innerHTML = count;
        new Ten.Observer(c,'onclick',this,'showInnerStars');
        this.container = c;
        return c;
    },
    style: {
        color: '#f4b128',
        fontWeight: 'bold',
        fontSize: '80%',
        fontFamily: '"arial", sans-serif',
        margin: '0 2px'
    }
},{
    showInnerStars: function() {
        var url = Hatena.Star.BaseURL + 'entry.json?uri=' +
        encodeURIComponent(this.entry.uri);
        new Ten.JSONP(url, this, 'receiveStarEntry');
    },
    receiveStarEntry: function(res) {
        var se = res.entries[0];
        var e = this.entry;
        if (encodeURIComponent(se.uri) != encodeURIComponent(e.uri)) return;
        e.flushStars();
        e.bindStarEntry(se);
        e.addAddButton();
        e.showStars();
    }
});

/* Hatena.Star.Comment */
Hatena.Star.Comment = new Ten.Class({
    initialize: function(args) {
        this.name = args.name;
        this.body = args.body;
    }
},{
    asElement: function() {
        var div = document.createElement('div');
        with (div.style) {
            margin = '0px 0';
            padding = '5px 0';
            borderBottom = '1px solid #ddd';
        }
        var ico = Hatena.User.getProfileIcon(this.name);
        div.appendChild(ico);
        var span = document.createElement('span');
        with(span.style) {
            fontSize = '90%';
        }
        span.innerHTML = this.body;
        div.appendChild(span);
        return div;
    }
});

/* Hatena.Star.NameScreen */
Hatena.Star.NameScreen = new Ten.Class({
    base: [Ten.SubWindow],
    style: {
        padding: '2px',
        textAlign: 'center'
    },
    containerStyle: {
        margin: 0,
        padding: 0
    },
    handleStyle: null,
    showScreen: false,
    closeButton: null,
    draggable: false
},{
    showName: function(name, pos) {
        this.container.innerHTML = '';
        this.container.appendChild(Hatena.User.getProfileIcon(name));
        this.container.appendChild(document.createTextNode(name));
        this.show(pos);
    }
});

/* Hatena.Star.AlertScreen */
Hatena.Star.AlertScreen = new Ten.Class({
    base: [Ten.SubWindow],
    style: {
        padding: '2px',
        textAlign: 'center',
        borderRadius: '6px',
        MozBorderRadius: '6px',
        width: '240px',
        height: '120px'
    },
    handleStyle: {
        position: 'absolute',
        top: '0px',
        left: '0px',
        backgroundColor: '#f3f3f3',
        borderBottom: '1px solid #bbb',
        width: '100%',
        height: '30px',
        borderRadius: '6px 6px 0 0',
        MozBorderRadius: '6px 6px 0 0'
    }
},{
    showAlert: function(msg, pos) {
        this.container.innerHTML = msg;
        var win = Ten.Geometry.getWindowSize();
        var scr = Ten.Geometry.getScroll();
        var w = parseInt(this.constructor.style.width) + 20;
        if (pos.x + w > scr.x + win.w) pos.x = win.w + scr.x - w;
        this.show(pos);
    }
});

/* Hatena.Star.CommentScreen */
Hatena.Star.CommentScreen = new Ten.Class({
    base: [Ten.SubWindow],
    initialize: function() {
        var self = this.constructor.SUPER.call(this);
        if (!self.commentsContainer) self.addCommentsContainer();
        return self;
    },
    style: {
        width: '280px',
        height: '280px',
        overflowY: 'auto',
        padding: '2px',
        textAlign: 'center',
        borderRadius: '6px',
        MozBorderRadius: '6px'
    },
    handleStyle: {
        position: 'absolute',
        top: '0px',
        left: '0px',
        backgroundColor: '#f3f3f3',
        borderBottom: '1px solid #bbb',
        width: '100%',
        height: '30px',
        borderRadius: '6px 6px 0 0',
        MozBorderRadius: '6px 6px 0 0'
    },
    containerStyle: {
        margin: '32px 0 0 0',
        textAlign: 'left',
        padding: '0 10px'
    },
    getLoadImage: function() {
        var img = document.createElement('img');
        img.src = Hatena.Star.BaseURL + 'images/load.gif';
        img.setAttribute('alt', 'Loading');
        with (img.style) {
            verticalAlign = 'middle';
            margin = '0 2px';
        }
        return img;
    }
},{
    addCommentsContainer: function() {
        var div = document.createElement('div');
        with (div.style) {
            marginTop = '-3px';
        }
        this.container.appendChild(div);
        this.commentsContainer = div;
    },
    showComments: function(e, pos) {
        var comments = e.comments;
        if (!comments) comments = [];
        this.commentsContainer.innerHTML = '';
        for (var i=0; i<comments.length; i++) {
            this.commentsContainer.appendChild(comments[i].asElement());
        }
        if (e.starEntry && !e.can_comment) {
            this.hideCommentForm();
        } else {
            this.addCommentForm();
        }
        var win = Ten.Geometry.getWindowSize();
        var scr = Ten.Geometry.getScroll();
        var w = parseInt(this.constructor.style.width) + 20;
        if (pos.x + w > scr.x + win.w) pos.x = win.w + scr.x - w;
        this.show(pos);
    },
    bindEntry: function(e) {
        this.entry = e;
    },
    sendComment: function(e) {
        if (!e.isKey('enter')) return;
        var body = this.commentInput.value;
        if (!body) return;
        this.commentInput.disabled = 'true';
        this.showLoadImage();
        var url = Hatena.Star.BaseURL + 'comment.add.json?body=' + encodeURIComponent(body) +
            '&uri=' + encodeURIComponent(this.entry.uri) +
            '&title=' + encodeURIComponent(this.entry.title);
        new Ten.JSONP(url, this, 'receiveResult');
    },
    receiveResult: function(args) {
        if (!args.name || !args.body) return;
        this.commentInput.value = ''; 
        this.commentInput.disabled = '';
        this.hideLoadImage();
        var com = new Hatena.Star.Comment(args);
        this.entry.addComment(com);
        this.commentsContainer.appendChild(com.asElement());
    },
    showLoadImage: function() {
        if (!this.loadImage) return; 
        this.loadImage.style.display = 'inline';
    },
    hideLoadImage: function() {
        if (!this.loadImage) return; 
        this.loadImage.style.display = 'none';
    },
    hideCommentForm: function() {
        if (!this.commentForm) return;
        this.commentForm.style.display = 'none';
    },
    addCommentForm: function() {
        if (this.commentForm) {
            this.commentForm.style.display = 'block';
            return;
        }
        var form = document.createElement('div');
        this.container.appendChild(form);
        this.commentForm = form;
        with (form.style) {
            margin = '0px 0';
            padding = '5px 0';
            // borderTop = '1px solid #ddd';
        }
        //if (Hatena.Visitor) {
        //    form.appendChild(Hatena.Visitor.profileIcon());
        //} else {
        //    form.appendChild(Hatena.User.getProfileIcon());
        //}
        var input = document.createElement('input');
        input.type = 'text';
        with (input.style) {
            width = '215px';
	    border = '1px solid #bbb';
            padding = '3px';
        }
        form.appendChild(input);
        this.commentInput = input;
        var img = this.constructor.getLoadImage();
        this.loadImage = img;
        this.hideLoadImage();
        form.appendChild(img);
        new Ten.Observer(input,'onkeypress',this,'sendComment');
    }
});

/* Hatena.Star.EntryLoader */
Hatena.Star.EntryLoader = new Ten.Class({
    initialize: function() {
        var entries = Hatena.Star.EntryLoader.loadEntries();
        this.entries = [];
        for (var i = 0; i < entries.length; i++) {
            var e = new Hatena.Star.Entry(entries[i]);
            e.showButtons();
            this.entries.push(e);
        }
        this.getStarEntries();
    },
    createStarContainer: function() {
        var sc = document.createElement('span');
        sc.setAttribute('class', 'hatena-star-star-container');
        sc.style.marginLeft = '1px';
        return sc;
    },
    createCommentContainer: function() {
        var cc = document.createElement('span');
        cc.setAttribute('class', 'hatena-star-comment-container');
        cc.style.marginLeft = '1px';
        return cc;
    },
    scrapeTitle: function(node) {
        var rval = [];
        (function (node) {
            if (node.tagName == 'SPAN' &&
                (node.className == 'sanchor' ||
                 node.className == 'timestamp')) {
                     return;
            } else if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) {
                return;
            }
            var cn = node.childNodes;
            if (cn) {
                for (var i = 0; i < cn.length; i++) {
                    arguments.callee.call(this, cn[i]);
                }
            }
            var nodeValue = node.nodeValue;
            if (typeof(nodeValue) == 'string') {
                rval.push(nodeValue);
            }
        })(node);
        return rval.join('');
    },
    headerTagAndClassName: ['h3',null],
    getHeaders: function() {
        var t = Hatena.Star.EntryLoader.headerTagAndClassName;
        return Ten.DOM.getElementsByTagAndClassName(t[0],t[1],document);
    },
    loadEntries: function() {
        var entries = [];
        //var headers = document.getElementsByTagName('h3');
        var c = Hatena.Star.EntryLoader;
        var headers = c.getHeaders();
        for (var i = 0; i < headers.length; i++) {
            var header = headers[i];
            var a = header.getElementsByTagName('a')[0];
            if (!a) continue;
            var uri = a.href;
            var title = '';
            // Ten.DOM.removeEmptyTextNodes(header);
            var cns = header.childNodes;
            title = c.scrapeTitle(header);
            var cc = c.createCommentContainer();
            header.appendChild(cc);
            var sc = c.createStarContainer();
            header.appendChild(sc);
            entries.push({
                uri: uri,
                title: title,
                star_container: sc,
                comment_container: cc
            });
        }
        return entries;
    }
},{
    getStarEntries: function() {
        var url = Hatena.Star.BaseURL + 'entries.json?';
        for (var i = 0; i < this.entries.length; i++) {
            if (url.length > Ten.JSONP.MaxBytes) {
                new Ten.JSONP(url, this, 'receiveStarEntries');
                url = Hatena.Star.BaseURL + 'entries.json?';
            }
            url += 'uri=' + encodeURIComponent(this.entries[i].uri) + '&';
        }
        new Ten.JSONP(url, this, 'receiveStarEntries');
    },
    receiveStarEntries: function(res) {
        var entries = res.entries;
        if (!entries) entries = [];
        for (var i = 0; i < this.entries.length; i++) {
            var e = this.entries[i];
            for (var j = 0; j < entries.length; j++) {
                var se = entries[j];
                if (!se.uri) continue;
                if (encodeURIComponent(se.uri) == encodeURIComponent(e.uri)) {
                    e.bindStarEntry(se);
                    entries.splice(j,1);
                    break;
                }
            }
            if (typeof(e.can_comment) == 'undefined') {
                e.setCanComment(res.can_comment);
            }
            e.showStars();
            e.showCommentButton();
        }
    }
});

/* Hatena.Star.WindowObserver */
Hatena.Star.WindowObserver = new Ten.Class({
    initialize: funct


  
  

2007-03-17

ちょっとつくってみた。

http://anond.hatelabo.jp/20070317135224

一部MUAのように引用領域の左端にタテ傍線がつくとかもじら表示系のように単にインデントされるとか

あるいは気の利いたサイトCSSのように引用を思わせる背景画像がつくとか

そういうことがあれば引用記法を喜んで使うかもしれない


そんな君のためのスタイルシート

<style type="text/css">
blockquote {
border:none;
padding-left:20px;
background-image:url(/images/common/icon-arrow.gif); /*なんか>な画像*/
background-repeat:repeat-y;
}
</style>

あれ、もしかしてここに書けば効く様になるのかな?

てすとてすと。

<style type="text/css"></p&gt; <p&gt;blockquote {</p&gt; <p&gt;border:none;</p&gt; <p&gt;padding-left:20px;</p&gt; <p&gt;background-image:url(/images/common/icon-arrow.gif); /*なんか>な画像*/</p&gt; <p&gt;background-repeat:repeat-y;</p&gt; <p&gt;}</p&gt; <p&gt;</style>

アーカイブ ヘルプ
ログイン ユーザー登録
ようこそ ゲスト さん