「padding」を含む日記

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

2025-07-06

■Claudeが作ってくれたやつ



&lt;html lang="ja"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;PONG Game&lt;/title&gt;
    &lt;style&gt;
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: 'Courier New', monospace;
            color: white;
        }

```
    .game-container {
        text-align: center;
    }
    
    canvas {
        border: 2px solid white;
        background-color: #000;
    }
    
    .score {
        font-size: 24px;
        margin: 20px 0;
        letter-spacing: 2px;
    }
    
    .controls {
        margin-top: 20px;
        font-size: 14px;
        opacity: 0.8;
    }
    
    .start-button {
        background-color: #333;
        color: white;
        border: 2px solid white;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        font-family: 'Courier New', monospace;
        margin: 10px;
    }
    
    .start-button:hover {
        background-color: white;
        color: black;
    }
&lt;/style&gt;
```

&lt;/head&gt;
&lt;body&gt;
    
        
            プレイヤー: 0 | コンピューター: 0
        
        &lt;canvas id="gameCanvas" width="800" height="400"&gt;&lt;/canvas&gt;
        
            &lt;button class="start-button" onclick="startGame()"&gt;ゲーム開始&lt;/button&gt;
            &lt;button class="start-button" onclick="resetGame()"&gt;リセット&lt;/button&gt;
            


            W/S キーまたは ↑/↓ 矢印キーでパドルを操作
        
    

```
&lt;script&gt;
    // Canvas要素とコンテキストの取得
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    // ゲームの状態管理
    let gameRunning = false;
    let animationId;
    
    // スコア要素の取得
    const playerScoreElement = document.getElementById('playerScore');
    const computerScoreElement = document.getElementById('computerScore');
    
    // ゲームオブジェクトの定義
    const game = {
        // プレイヤーのパドル（左側）
        playerPaddle: {
            x: 10,
            y: canvas.height / 2 - 50,
            width: 10,
            height: 100,
            speed: 5,
            upPressed: false,
            downPressed: false
        },
        
        // コンピューターのパドル（右側）
        computerPaddle: {
            x: canvas.width - 20,
            y: canvas.height / 2 - 50,
            width: 10,
            height: 100,
            speed: 3.5, // プレイヤーより少し遅く設定
            targetY: canvas.height / 2 - 50
        },
        
        // ボールの設定
        ball: {
            x: canvas.width / 2,
            y: canvas.height / 2,
            radius: 8,
            speedX: 4,
            speedY: 3,
            maxSpeed: 8
        },
        
        // スコアの管理
        score: {
            player: 0,
            computer: 0
        }
    };
    
    // キーボード入力の処理
    const keys = {};
    
    // キーが押されたときの処理
    document.addEventListener('keydown', (e) =&gt; {
        keys[e.key.toLowerCase()] = true;
        
        // ゲームが停止中にスペースキーでゲーム開始
        if (e.key === ' ' &amp;&amp; !gameRunning) {
            startGame();
        }
    });
    
    // キーが離されたときの処理
    document.addEventListener('keyup', (e) =&gt; {
        keys[e.key.toLowerCase()] = false;
    });
    
    // パドルの移動処理
    function updatePaddles() {
        // プレイヤーパドルの移動（W/S キーまたは矢印キー）
        if (keys['w'] || keys['arrowup']) {
            game.playerPaddle.y -= game.playerPaddle.speed;
        }
        if (keys['s'] || keys['arrowdown']) {
            game.playerPaddle.y += game.playerPaddle.speed;
        }
        
        // プレイヤーパドルの画面外移動を防ぐ
        if (game.playerPaddle.y &lt; 0) {
            game.playerPaddle.y = 0;
        }
        if (game.playerPaddle.y &gt; canvas.height - game.playerPaddle.height) {
            game.playerPaddle.y = canvas.height - game.playerPaddle.height;
        }
        
        // コンピューターパドルのAI処理
        // ボールの位置を追跡するが、完璧ではない動きを実装
        const ballCenterY = game.ball.y;
        const paddleCenterY = game.computerPaddle.y + game.computerPaddle.height / 2;
        
        // ボールとパドルの中心の差を計算
        const difference = ballCenterY - paddleCenterY;
        
        // 反応に少し遅れを持たせる（人間らしい動き）
        if (Math.abs(difference) &gt; 10) {
            if (difference &gt; 0) {
                game.computerPaddle.y += game.computerPaddle.speed;
            } else {
                game.computerPaddle.y -= game.computerPaddle.speed;
            }
        }
        
        // コンピューターパドルの画面外移動を防ぐ
        if (game.computerPaddle.y &lt; 0) {
            game.computerPaddle.y = 0;
        }
        if (game.computerPaddle.y &gt; canvas.height - game.computerPaddle.height) {
            game.computerPaddle.y = canvas.height - game.computerPaddle.height;
        }
    }
    
    // ボールの移動と衝突判定
    function updateBall() {
        // ボールの位置を更新
        game.ball.x += game.ball.speedX;
        game.ball.y += game.ball.speedY;
        
        // 上下の壁との衝突判定
        if (game.ball.y - game.ball.radius &lt; 0 || game.ball.y + game.ball.radius &gt; canvas.height) {
            game.ball.speedY = -game.ball.speedY;
        }
        
        // プレイヤーパドルとの衝突判定
        if (game.ball.x - game.ball.radius &lt; game.playerPaddle.x + game.playerPaddle.width &amp;&amp;
            game.ball.x + game.ball.radius &gt; game.playerPaddle.x &amp;&amp;
            game.ball.y + game.ball.radius &gt; game.playerPaddle.y &amp;&amp;
            game.ball.y - game.ball.radius &lt; game.playerPaddle.y + game.playerPaddle.height) {
            
            // ボールがパドルに当たった位置によって跳ね返り角度を調整
            const hitPos = (game.ball.y - (game.playerPaddle.y + game.playerPaddle.height / 2)) / (game.playerPaddle.height / 2);
            game.ball.speedX = Math.abs(game.ball.speedX);
            game.ball.speedY = hitPos * 4;
            
            // ボールの速度を少し上げる（ゲームをエキサイティングに）
            if (Math.abs(game.ball.speedX) &lt; game.ball.maxSpeed) {
                game.ball.speedX *= 1.02;
            }
        }
        
        // コンピューターパドルとの衝突判定
        if (game.ball.x + game.ball.radius &gt; game.computerPaddle.x &amp;&amp;
            game.ball.x - game.ball.radius &lt; game.computerPaddle.x + game.computerPaddle.width &amp;&amp;
            game.ball.y + game.ball.radius &gt; game.computerPaddle.y &amp;&amp;
            game.ball.y - game.ball.radius &lt; game.computerPaddle.y + game.computerPaddle.height) {
            
            // ボールがパドルに当たった位置によって跳ね返り角度を調整
            const hitPos = (game.ball.y - (game.computerPaddle.y + game.computerPaddle.height / 2)) / (game.computerPaddle.height / 2);
            game.ball.speedX = -Math.abs(game.ball.speedX);
            game.ball.speedY = hitPos * 4;
            
            // ボールの速度を少し上げる
            if (Math.abs(game.ball.speedX) &lt; game.ball.maxSpeed) {
                game.ball.speedX *= 1.02;
            }
        }
        
        // ボールが左右の壁を越えた場合（得点処理）
        if (game.ball.x &lt; 0) {
            // コンピューターの得点
            game.score.computer++;
            updateScore();
            resetBall();
        } else if (game.ball.x &gt; canvas.width) {
            // プレイヤーの得点
            game.score.player++;
            updateScore();
            resetBall();
        }
    }
    
    // ボールをリセット（得点後の処理）
    function resetBall() {
        game.ball.x = canvas.width / 2;
        game.ball.y = canvas.height / 2;
        
        // ランダムな方向でボールを発射
        game.ball.speedX = (Math.random() &gt; 0.5 ? 4 : -4);
        game.ball.speedY = (Math.random() - 0.5) * 6;
    }
    
    // スコア表示の更新
    function updateScore() {
        playerScoreElement.textContent = game.score.player;
        computerScoreElement.textContent = game.score.computer;
    }
    
    // 描画処理
    function draw() {
        // 画面をクリア
        ctx.fillStyle = '#000';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // 中央の点線を描画
        ctx.setLineDash([5, 5]);
        ctx.beginPath();
        ctx.moveTo(canvas.width / 2, 0);
        ctx.lineTo(canvas.width / 2, canvas.height);
        ctx.strokeStyle = '#fff';
        ctx.stroke();
        ctx.setLineDash([]);
        
        // プレイヤーパドルを描画
        ctx.fillStyle = '#fff';
        ctx.fillRect(game.playerPaddle.x, game.playerPaddle.y, game.playerPaddle.width, game.playerPaddle.height);
        
        // コンピューターパドルを描画
        ctx.fillRect(game.computerPaddle.x, game.computerPaddle.y, game.computerPaddle.width, game.computerPaddle.height);
        
        // ボールを描画
        ctx.beginPath();
        ctx.arc(game.ball.x, game.ball.y, game.ball.radius, 0, Math.PI * 2);
        ctx.fillStyle = '#fff';
        ctx.fill();
        
        // ゲームが停止中の場合、メッセージを表示
        if (!gameRunning) {
            ctx.fillStyle = '#fff';
            ctx.font = '20px Courier New';
            ctx.textAlign = 'center';
            ctx.fillText('ゲーム開始ボタンを押してください', canvas.width / 2, canvas.height / 2 + 60);
        }
    }
    
    // ゲームのメインループ
    function gameLoop() {
        if (!gameRunning) return;
        
        updatePaddles();
        updateBall();
        draw();
        
        animationId = requestAnimationFrame(gameLoop);
    }
    
    // ゲーム開始
    function startGame() {
        gameRunning = true;
        gameLoop();
    }
    
    // ゲームリセット
    function resetGame() {
        gameRunning = false;
        if (animationId) {
            cancelAnimationFrame(animationId);
        }
        
        // スコアをリセット
        game.score.player = 0;
        game.score.computer = 0;
        updateScore();
        
        // ボールとパドルの位置をリセット
        game.ball.x = canvas.width / 2;
        game.ball.y = canvas.height / 2;
        game.ball.speedX = 4;
        game.ball.speedY = 3;
        
        game.playerPaddle.y = canvas.height / 2 - 50;
        game.computerPaddle.y = canvas.height / 2 - 50;
        
        draw();
    }
    
    // 初期描画
    draw();
&lt;/script&gt;
```

&lt;/body&gt;
&lt;/html&gt;

https://anond.hatelabo.jp/20250706011306#

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

2025-07-01

■[増田しぐさ] 増田 CSSを紹介する記事(英文 スパム対策付き)

Chrome系ブラウザには増田を快適に閲覧するためのコンパクトな増田という古い拡張機能があったが、Chromeの更新に対応し切れておらず、既にChromeには新規インストールできなくなってしまっている。Edgeにはまだインストール可能だが、いずれ対応しなくなる可能性が高い。

そこで、「増田のトップページで、言及エントリ(返信・トラバ)を一覧から除外することで、新規エントリだけを一覧できる」という機能に絞ってコンパクトな増田を再現、ついでにいくつかのおまけ機能を付与したスタイルシート(CSS)を今年の4月に公開していたのだが、今回改めて英文スパム対策を追加したので公開する。

これを導入するには Stylus という拡張が必要で、少し気軽さには欠けるが、増田以外にも活用できるので、この機会にぜひ導入してみてほしい。拡張をインストールしたあとは、下記のコードをコピペして新規スタイルとして導入する方法もあるが、スタイルシートを公開できる userstyles.world の増田CSSページ^{(※毎朝9:00直後はアクセスできない)} から [Install] ボタンでインストールするほうが、自動更新にも対応するので便利かもしれない。

増田 CSS (7/20: 増田の文字数 制限のため、スパム対策部分は省略しました)

/* トップページで言及エントリを除外 */
/* via: 最近ファーストブクマカが静か https://anond.hatelabo.jp/20250326171302 */
h1/*はてな匿名ダイアリー*/ + #intro/*名前を隠して楽しく日記。*/ + #body div.section:has(h3 > a/*■*/ + a:not(.keyword, .edit)/*anond:YYYYMMDDhhmmss*/){
  display: none;
}

/* うっかりクリックしがちなキーワードリンクを無効に */
a.keyword{
  pointer-events: none;
}

/* 執筆時のテキストエリアを広く */
textarea#text-body{
  min-height: 50vh !important;
}

/* 執筆時に特殊記号のヒント(疑似要素なので選択してコピペできないのがもどかしいけど) */
p.post-submit > span.explain::after{
  margin-left: 1em;
  padding-left: 1em;
  content: "特殊記号: &[&#38;] <[&#60;] >[&#62;]";
  background: url(/images/common/outsite-wh.gif) 0 3px no-repeat;
}

/* スパム対策部分は下記URLの [Install] ボタンで事前確認できます(随時更新中) */
/* https://userstyles.world/style/23028/ */

なお、このCSSを適用すると、NGワードを含むこの増田自体も、増田トップページからは消えてしまう(この増田単体の個別ページなら閲覧できる)。

PC・スマホ向けの導入方法

念のため、PC・スマホにCSSを適用する方法の解説にもリンクしておく。

PC: 【Stylus】ウェブサイトにCSSを適用できる拡張機能。自由にカスタマイズ！ | ナポリタン寿司のPC 日記
https://www.naporitansushi.com/stylus/
iPhone: MaKeoverアプリでiPhone SafariのCSSをカスタマイズ！万博パビリオン予約結果一覧を見やすくする使い方
https://gintachan.com/makeover-app-css-change-safari-how-to/
Android: スマートフォン Android版FirefoxのCSS カスタマイズ Stylus の使い方・初期設定方法
https://skypenguin.net/2025/06/21/post-109209/

(7/21追記) また、スパムが特に多い時は、1ページまるごとスパムということもあるので、PCなら uAutoPagerize (Chrome) や weAutoPagerize (Firefox) などの拡張を使うと、自動でページが継ぎ足されて快適に読み進められる。ただし、継ぎ足ししまくるとメモリ不足などでブラウザが重くなることがあるので、そうなったら page: 20 などのページ番号をクリックしてから続きを読もう。

(参考) 増田の頻出キーワードリンク上位20件抽出 JavaScript

また、スパム対策の簡易NGワードは、下記のスクリプトを使って抽出した「直近の増田の頻出キーワードリンク上位20件」から、誤判定しそうな line と user を除いた18件を用いた。10件だと生き残る英文スパムがあったので20件にしたが、それでもわずかに洩れはある。しかし日本語による真っ当な(?)増田の直近の誤判定はなかった。はてなキーワードのリンクだけを対象にしているので、URLにはこれらのキーワードが入っていても大丈夫だ。ただし、スパムのトレンドが変われば話は変わってくるかもしれないし、過去や未来の増田の誤判定は当然あるだろう。気になる人は前掲のCSSを行単位で編集してほしい。

// AutoPagerizeでまとまった数のページを読み込ませた後に実行するとよい。
(function(){
  const keywords = [];
  // はてなキーワードの集計
  document.querySelectorAll('a.keyword').forEach(a => {
    // 4文字未満は誤検出の可能性が高まるので除外
    if(a.textContent.length < 4) return;
    let index = keywords.findIndex(k => k.keyword === a.textContent);
    if(index >= 0) keywords[index].count += 1;
    else keywords.push({keyword: a.textContent, count: 1});
  });
  keywords.sort((a, b) => a.count < b.count);
  // ランキング配列の出力
  console.log(keywords);
  // CSS埋め込み用に上位キーワードのみをURIエンコードして出力
  console.log(keywords.slice(0, 20).map(k => encodeURIComponent(k.keyword)).join('\n'));
})();

謝辞

anond:20250326171302 ←元はこの増田がきっかけでした。

anond:20250701194328 ←キーワード判定に踏み切る後押しとなりました。

Permalink | 記事への反応(12) | 23:56

2025-05-08

■フロントエンドも少し書く機会があるサーバーサイドエンジニアのお前

いいか。レイアウト調整するときにmarginは絶対に使うな。

marginを使う必要があるときは一度深呼吸して冷静になってくれ。

marginって英単語に馴染みがあるからって思考停止でmarginを選んでないか？

marginなんてよっぽどのことがない限り使わないのに、適当にmarginでスペーシングされまくって、クソ扱いづらくなってる案件が多すぎて殺意が沸くんだ。

俺がわざわざpaddingで整理してるのに少しのレイアウト調整のついでにmarginに変えてんじゃねえぞボケが

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

2025-04-23

■増田CSS /* トップページで言及エントリを除外 */ を修正

すまんかった。

これが修正版。もしよければ自分が使ってる別の便利機能も付記したので使ってみてください。

/* トップページで言及エントリを除外 */
/* via: 最近ファーストブクマカが静か https://anond.hatelabo.jp/20250326171302 */
h1/*はてな匿名ダイアリー*/ + #intro/*名前を隠して楽しく日記。*/ + #body div.section:has(h3 > a/*■*/ + a:not(.keyword, .edit)/*anond:YYYYMMDDhhmmss*/){
  display: none;
}

/* キーワードリンクを無効に */
a.keyword{
  pointer-events: none;
}

/* 執筆時のテキストエリアを広く */
#text-body{
  min-height: 50vh !important;
}
/* 執筆時に特殊記号のヒント(疑似要素なので選択してコピペできないのがもどかしいけど) */
p.post-submit > span.explain::after{
  margin-left: 1em;
  padding-left: 1em;
  content: "特殊記号: &[&#38;] <[&#60;] >[&#62;]";
  background: url(/images/common/outsite-wh.gif) 0 3px no-repeat;
}

先月作ったCSSだと、「タイトルにキーワードが含まれている」場合と「自分が書いた日記」の場合も一覧から除外されてしまっていた。これはたいへん申し訳ない。テストも兼ねて自分でも何度か活用してはいたものの、一覧される増田の数がなんだか少ないなーとは思いつつも気付いてなかったわ。

本件のきっかけと経緯と使い方はこちらから。

(追記) 最近ファーストブクマカが静か
https://anond.hatelabo.jp/20250326171302
「コンパクトな増田」がどんなものかググる程度の非ファーストブクマカだ..
https://anond.hatelabo.jp/20250327200436

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

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

2021-07-22

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

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

なんでかな？

追記：

pタグにclass="recentitem"

でなんとかできたっぽい

&lt;p class="recentitem" style="text-align: center; padding:0 auto; margin:0 auto; "&gt;

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 &gt; .padding-bs.txt-mute.txt-size-variable--12.tweet-context &gt; .nbfc &gt; 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も同じように色々消せる．自分が消しているのは，

画面右側トレンド，ツイートの関連人物
画面左側トレンド
通知内リプライ以外
おすすめのユーザー
Fav数

あたり．

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

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

2019-11-29

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

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

FLOCSSは知らなかったけど、その質問、かなりどうでも良い枝葉末節なような・・・そもそもコンポーネントは文脈によって用例が1000ぐらいある用語だし、巻き上げはES6/TSではそもそも文法でチェック対象。CSSをどう構造化するかもチームの意思決定とか次第だし、CSS in JSの方が良い。 https://t.co/Y14qF4NzpQ— 渋川よしき (@shibu_jp) May 3, 2019

vueはあくまでjsだからね。
jsはjsで管理した方がいいし、cssはcssで管理した方がいい。
でないと確実に肥大化する。
css 設計さえしとけばコンポーネントファイルになんて書く必要ないしね。
CSS 設計使えない現場ならコンポーネント内でやった方がいいけど。 https://t.co/8jGzRGXlD8— かずきち@プログラミングスクール経営者 (@kazukichi3110) November 28, 2019

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

CSS 設計わかんないよーって方は、まず「borderより外側のスタイルをコンポーネントに含めない」を意識するといいかも！

// Bad
.list .box {
margin-bottom: 10px;
border: ...;
padding: ...;
}

// Better
.box {
border: ...;
padding: ...;
}

.list .box {
margin-bottom: 10px;
}— ダーシノ / NES.css (@bc_rikko) December 6, 2019

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

2018-11-14

■anond:20181114142424

margin=余白

padding=肉付け

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

2018-09-07

■anond:20180907112858

こんな感じかね。

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

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

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

2018-07-03

■anond:20180703163232

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html lang="ja"&gt;

&lt;head&gt;
	&lt;meta http-equiv="content-type" content="text/html; charset=Shift_JIS"&gt;
	&lt;title&gt;

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

2017-09-29

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

追記 (9月30日 22:00)

Q : 本文も用いると更に良いのではないか
- A : 可能な限り氏が翻訳した記事を開きたくないため、タイトルだけを用いた
Q : 深層学習ではない手法との比較がない
- A : 追加実験を行った。登場する語彙の上位 12,000 個の bag-of-words を用いたところ
  - RandomForest (class_weight = 'balanced', n_estimators = 500) では精度 0.93 , 再現率 0.66, f値 0.78
  - LinearSVC (sklearn のデフォルトパラメタ) では精度 0.88, 再現率 0.81, f値 0.84 となり、深層学習とあまり差がないことがわかった。
Q : 理由は何か
- 単語の頻度足切りを変化させても精度が変わらないことから、特定の語に強く反応している可能性がある。または特定ジャンルの記事が氏によって重点的に翻訳されているのかもしれない。

最近、タイトルを読むだけで 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;
}
}

使い方

あらかじめ (はてなユーザー名) を自分のユーザー名に置換する
Firefox の Stylish アドオンを入れて新しいスタイルを作ってコピペ。usercontent.css に書いてもいい
- その他のブラウザについては後述
デフォルトでは見ての通り「痛いニュース」「アルファルファモザイク」「ハム速」「はちま」「jin」「やらおん!」といった錚々たるメンツのほか、「J-CAST」「ガジェット通信」「秒刊SUNDAY」などがブロックされている
- よくホッテントリに上がるものの、デマの発信源でなさそうなものや、炎上ネタ系・不快になるニュース系・韓国だから叩けばいいや系をあまり扱わなそうなまとめブログ (はてブを見てざっと列挙した限りでは「暇人＼(^o^)／速報 (himasoku.com)」「キニ速 (kinisoku)」「VIPPERな俺 (news23vip)」「ライフハックちゃんねる弐式 (lifehack2ch.livedoor.biz)」「ゴールデンタイムス (goldennews)」「あじゃじゃしたー (chihhylove)」「哲学ニュースnwk (nwknews)」など) は消したいほどではなかったので含んでいない。これらも消したいなら、見ての通り需要がありそうな名前を列挙したのでそれをヒントに各自お好みで追加頼む
- ブロックするサイトを増やしたい場合は、見たままの通り行を増やして、URL の一部を書けばいい
ブロックされたサイトは、エントリページ含む全てのリンクとサムネイルがはてブ上から非表示となる
おもしろカテゴリのホッテントリがスカスカになるけど泣かない
ユーザーCSSだと、階層の関係でタグやエントリ詳細、お気に入りユーザーのブクマ一覧、検索結果のエントリ詳細などを選んで消すことが出来ないので、副作用としてURLにかかわらずタイトル以外を全部非表示にしてしまった。しかし、逆に見やすくなったのでよしとする
- これを部分的にやめたい場合は、コメントの記述をヒントに気に入らないセレクタを外していけば OK
  - ただし、こうすると非表示対象のサイトでも説明文やタグだけ見えて内容がちょっとわかってしまうのは覚悟すること
- Stylish は CSS をページのリロードなしに簡単にオンオフできるので、この切り替え操作を臨機応変に活用するのも有効な手かと思われる
この CSS に著作権はありません

Chrome、Opera、Safari での使い方

各ブラウザ用の Stylish アドオンが存在するので、まず入れておく
- ダウンロードはこちら → Chrome 用の Stylish、旧 Opera 用の Stylish、Safari 用の Stylish
- IE は残念ながら Stylish が存在しない。一応ユーザー CSS を書けなくはないが、はてブ内だけじゃなくWeb全体に対してしか適用できない。それでもよければ
@-moz-document url() { ～ } が使えないので設定が若干異なる
- 適用したい URL が異なるので、2つの「セクション」に分けて登録する。
  - セクションって何? とかは心配無用で、設定画面を見ればなんとなくわかるかと。「セクションを追加」のボタンを押せば入力欄が増えるだけの話なんで

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

セクションひとつめ

/* はてブ全体に適用 */

/* ブロックしたいサイトのリンクを非表示 */
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;
}

適用先の設定
- [次で始まるURL (URL prefix)] 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;
}

適用先の設定
- [URL] http://b.hatena.ne.jp/(はてなユーザー名)/
- [次で始まるURL (URL prefix)] http://b.hatena.ne.jp/(はてなユーザー名)/interest
- [次で始まるURL (URL prefix)] http://b.hatena.ne.jp/(はてなユーザー名)/favorite

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

字数がオーバーしていたことに気づいたので 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

2chのはてブスレの新UIのユーザ CSS

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://kaisoku 2ch.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://konogoro 2ch.blog117.fc2.com/

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

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

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

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

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

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

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

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

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

(´A｀)＜咳をしてもゆとり

http://yutori 2ch.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://honwaka 2ch.blog90.fc2.com/

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

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

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

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

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

JK VIP - livedoor Blog（ブログ）

http://jk vip .net/

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

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

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

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

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

たん速

http://tannsoku vip.blog54.fc2.com/

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

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

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

正直何も感じさせない。

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

低速　VIP速報

http://teisoku vip.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

「padding」を含む日記

■Claudeが作ってくれたやつ

■[増田しぐさ] 増田CSSを紹介する記事(英文スパム対策付き)

増田CSS (7/20: 増田の文字数制限のため、スパム対策部分は省略しました)

PC・スマホ向けの導入方法

(参考) 増田の頻出キーワードリンク上位20件抽出JavaScript

謝辞

■フロントエンドも少し書く機会があるサーバーサイドエンジニアのお前

■増​田​C​S​S /* ト​ッ​プ​ペ​ー​ジ​で​言​及​エ​ン​ト​リ​を​除​外 */ を​修​正

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

■Yahooショッピングさあ！

■Twitterのバズを隠す

tweetdeck向けの設定

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

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

追記 (9月30日 22:00)

結果

参考文献

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

■増田の広告向けCSS

参考

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

使い方

Chrome、Opera、Safari での使い方

セクションひとつめ

セクションふたつめ

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

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

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

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

二版

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

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

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

■[増田しぐさ] 増田 CSSを紹介する記事(英文スパム対策付き)

増田 CSS (7/20: 増田の文字数制限のため、スパム対策部分は省略しました)

(参考) 増田の頻出キーワードリンク上位20件抽出 JavaScript

■増田CSS /* トップページで言及エントリを除外 */ を修正

■Yahoo ショッピングさあ！

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

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

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

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

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