「padding」を含む日記 RSS

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

次の25件>

2024-02-11

■anond:20240210212445

じゃあワイも無責任にはてな用CSS貼っとくわ

パソコン画面右上のアイコンで選ぶ表示スタイルを一番右の「ヘッドライン」表示にしといてな

/* ヘッドライン表示を切り詰める */
/* #container 指定でCSS優先度を上げる必要がある */
body[data-entrylist-layout="headline"] #container .entrylist-main{
  padding-right: 0 !important;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents{
  padding-left: 0 !important;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-users{
  position: static !important;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-users{
  top: 14px !important;
}

/* ヘッドライン表示にサムネイルを追加 */
body[data-entrylist-layout="headline"] #container .entrylist-contents-main{
  display: grid;
  grid-template:
    "users    body title"  28px
    "bookmark body domain" 20px
    / 60px 120px 1fr;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-users{
  grid-area: users;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-users a span{
  margin-right: 0;
}
body[data-entrylist-layout="headline"] #container .following-bookmarks-container{
  grid-area: bookmark;
  position: absolute;
  left: 20px;
  bottom: 2.5px;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-body{
  grid-area: body;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-title{
  grid-area: title;
  z-index: 99;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-title > a{
  margin-left: -120px;
  padding-left: 120px;
  margin-bottom: -28px;
  padding-bottom: 28px;
  width: 890px;
  white-space: nowrap;
  display: block;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-body{
  display: block !important;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-thumb{
  position: static;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-thumb span{
  width: 100px;
  height: 50px;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-thumb{
  background: #f0f0f0;
  width: 100px;
  height: 50px;
  background-position: 50%;
  background-size: cover;
  border-radius: 4px;
}
/* 2行目に、総合ではドメイン(domain), サイト内一覧ではカテゴリと時刻(meta), マウスホバー時はいずれも概要文(description) */
body[data-entrylist-layout="headline"] #container .entrylist-contents-domain,
body[data-entrylist-layout="headline"] #container .entrylist-contents-meta,
body[data-entrylist-layout="headline"] #container .entrylist-contents-description{
  grid-area: domain;
  display: block;
  opacity: 0;
  padding: 0 !important;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-meta > li{
  vertical-align: top;
}
html[data-stable-request-url^="https://b.hatena.ne.jp/entrylist/"] body[data-entrylist-layout="headline"] #container .entrylist-contents-domain,
html[data-stable-request-url^="https://b.hatena.ne.jp/site/"] body[data-entrylist-layout="headline"] #container .entrylist-contents-meta{
  opacity: 1;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-domain img.favicon + span,
body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-meta{
  opacity: 0;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-description{
  opacity: 0;
  position: absolute;
  top: calc(40px - 3px);
  left: calc(180px + 16px + .5em);
  height: 20px;
  line-height: 20px;
  color: #999;
  min-height: auto !important;
  padding-right: 0 !important;
  width: 890px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-stable-request-url^="https://b.hatena.ne.jp/site/"] body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-domain,
body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-description{
  opacity: 1;
}
/* 増田調整 */
body[data-entrylist-layout="headline"] #container a[href^="/entry/s/anond.hatelabo.jp/"] .entrylist-contents-thumb{
  background-image: url('https://cdn-ak-scissors.b.st-hatena.com/image/square/b1638cdb5807a4788e4ba3c1109a984166e095fc/height=288;version=1;width=512/https%3A%2F%2Fanond.hatelabo.jp%2Fimages%2Fog-image-1500.gif');
}

/* マウスホバー時にサムネも反応させる見た目調整 */
.entrylist-contents-title:hover ~ .entrylist-contents-body .entrylist-contents-thumb{
  opacity: .90;
}

Permalink | 記事への反応(0) | 09:03

2023-08-22

■フロントエンドエンジニアが見た嫌なWebデザイナー

・margin paddingがバラバラ

・フォントサイズがバラバラ

・どれがh2でどれがh3なのか分からないデザイン

・ペライチなのにgoogle font を5種類くらい使ってくる

・似たような色だがカラーコードが違う

・font weightを300-700まで全て使っているが、ルールが存在しない

・雰囲気で色々な種類のボタンを作る

・中規模以上のサイト構築なのにhoverなどの基本的なパーツがない

・ページごとにコンテナのサイズが違う

・コントラストを考えてない配色

・可読性を考えていない小さすぎる文字

・ベクター画像を持っているのにbitmapで渡してくる

・上司の如く上から目線の指示を出してくる

・テキストの改行位置や揃えについてピクセル単位で修正指示を出してくる

・アニメーションのイメージを言葉だけで伝えようとしてくる

・個人的な理由で大規模なデザイン改修をねじ込んでくる

Permalink | 記事への反応(0) | 11:22

2021-07-22

■style="text-align: center;"効かないね

₍₍(ง🎃)ว⁾⁾
鳴らない言葉をもう一度描いて
₍₍ᕦ(🎃)ᕤ⁾⁾　₍₍ʅ(🎃)ว⁾⁾
₍₍🙏⁾⁾
₍₍🎃⁾⁾
赤色に染まる時間を置き忘れ去れば
₍₍₍(ง🎃)ว⁾⁾⁾
哀しい世界はもう二度となくて
₍₍ᕦ(🎃)ᕤ⁾⁾　₍₍ʅ(🎃)ว⁾⁾
🙏
🎃
荒れた陸地が こぼれ落ちていく
₍₍ ʅ(🎃) ʃ ⁾⁾
一筋の光へ


なんでかな？


追記：

pタグにclass="recentitem"

でなんとかできたっぽい

<p class="recentitem" style="text-align: center; padding:0 auto; margin:0 auto; ">

Permalink | 記事への反応(0) | 22:06

2021-03-26

■Yahooショッピングさあ！

なんか画像の端っこ切れてるなと思って

元画像確認したけど問題なし、幅の最大値も問題なし、

で調べるとpaddingが2px多くて端っこ削ってんの。

見た目に関わる部分なんだから早く改修しろや。

なんか聞いたら大分前から要望だしてるらしいじゃん。

そんなんだからアマゾン楽天から水あけられてんだよ。

Permalink | 記事への反応(0) | 10:48

2021-03-16

■anond:20210315235950

margin-(top|bottom|left|right)

padding-(top|bottom|left|right)

Permalink | 記事への反応(0) | 10:23

2020-08-04

■anond:20200804132359

CSSでいうとpaddingに相当する部分は法力が及ぶ

paddingの広さは人によるけどラスプーチンクラスなら40px四方は軽い

Permalink | 記事への反応(0) | 16:01

2020-07-08

■Twitterのバズを隠す

何かしら創作し発信している身としては，SNSの拡散度合いの可視化は心に悪い．

たかだか10RT程度が限界の自分の投稿と，やたらRT･Favされる人気者の投稿････

もちろん自分の心が荒んでいるからこそ出てくる文句でもあるし，客観的にはもっと改善点もあるだろう．

ただ，自衛手段としてこれらを見えにくくする手はあると思うのだ．

というわけでAdBlockのMyフィルター機能を使って色々隠してみた．使い方はまあググってくれ．

tweetdeck向けの設定
! リプライとかのボタンを非表示
tweetdeck.twitter.com##ul.tweet-actions
! 数字も消す
tweetdeck.twitter.com##span.like-count
tweetdeck.twitter.com##span.retweet-count
!RTした人の名前を非表示
tweetdeck.twitter.com##div.tweet.js-tweet > .padding-bs.txt-mute.txt-size-variable--12.tweet-context > .nbfc > a
!続きを見るを非表示
tweetdeck.twitter.com##div.js-show-this-thread
!詳細欄のRTやFav欄を非表示
tweetdeck.twitter.com##.flex-wrap--wrap.flex-align--baseline.flex-row.flex.tweet-stats.js-stats-list

あまりきれいなフィルターにはならないが，Twitter Webも同じように色々消せる．自分が消しているのは，

あたり．

みなさんもいいtwitterライフを．

Permalink | 記事への反応(0) | 17:23

2019-11-29

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

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

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

Permalink | 記事への反応(1) | 15:06

2018-11-14

■anond:20181114142424

margin=余白

padding=肉付け

Permalink | 記事への反応(0) | 14:39

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

Permalink | 記事への反応(1) | 17:06

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>

Permalink | 記事への反応(2) | 16:35

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 氏が翻訳したものである。

手法

入力文は vanilla の MeCab [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

Permalink | 記事への反応(2) | 21:41

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がレガシーすぎて大変なんだろうなー、と思った。

Permalink | 記事への反応(1) | 15:34

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

Permalink | 記事への反応(0) | 23:50

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;
}
}

使い方

Chrome、Opera、Safari での使い方

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

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

/* ブロックしたいサイトのリンクを非表示 */
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 に続きます。

Permalink | 記事への反応(9) | 13:01

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;}

}

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

Permalink | 記事への反応(0) | 12:15

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

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

Permalink | 記事への反応(0) | 00:45

2011-04-07

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

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

・コメントがない行を消す

.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; }

Permalink | 記事への反応(0) | 18:28

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;}


}

Permalink | 記事への反応(0) | 18:03

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ちゃんまとめ。

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

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

このごろ２ちゃんねる

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はトップ絵がカラフルで賑やかだから、白が映えてる。そこに気をつけて改良できれば、（もちろん内容もあわせて、）すぐここまであげたブログの中で上の方にいける。

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

Permalink | 記事への反応(2) | 20:23

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、なんか１頁目ばっかり継ぎ足される気がするけど、ボクだけかな？

Permalink | 記事への反応(0) | 00:31

2008-09-05

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

自分用にメモ。

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

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

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

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

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

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

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

Permalink | 記事への反応(3) | 11:31

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

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

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

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

何を作ったの？

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

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

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

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

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

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

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

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

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

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

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

＠（参考用）私のよく見るサイト・・・ニコ動、wikipedia、スラッシュドットジャパン、2nn.jp（2ch）、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,'ＭＳ Ｐゴシック',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

Permalink | 記事への反応(2) | 11:36

2008-06-06

■ちょとｓYレならんしょこれは・・？ 

<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の挙動がおかしい！助けて！

Permalink | 記事への反応(1) | 20:46

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

Permalink | 記事への反応(1) | 17:13

次の25件>
ログイン ユーザー登録
ようこそ ゲスト さん