「:hover」を含む日記 RSS

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

2025-12-09

はてなブックマーク増田一覧向けNGフィルタ

はてなブックマーク増田一覧の、さらに「すべて」(1 user)をチェックしている希有な人向けのユーザースクリプトを公開します。

https://b.hatena.ne.jp/site/anond.hatelabo.jp/?sort=eid

// ==UserScript==
// @name        Hatena Bookmark Anond Filter
// @namespace   https://b.hatena.ne.jp/site/anond.hatelabo.jp/
// @description はてなブックマークの『はてな匿名ダイアリー』の記事のうち、指定したNGワードが含まれ投稿非表示します。
// @match       https://b.hatena.ne.jp/site/anond.hatelabo.jp/*
// @grant       none
// @version     2.1.2026.04.29.0027
// ==/UserScript==
/*
2.1.2026.03.25.0023 正規表現対応10 users 以上の人気記事を除外判定。
2.0.2026.01.28.0015 ポイント制を導入。
1.0.2025.12.09.0000 公開。
**/
(function(){
  const SCRIPTID = 'HatenaBookmarkAnondFilter';
  console.time(SCRIPTID);
  const FILTERED = 'filtered';/* フィルタ該当要素クラス */
  const CHECKED = 'checked';/* 二重チェック回避フラグ */
  const USERS = 10;/* 人気記事なら誤検知スパム解説などの可能性があるので除外する */
  const POPULAR = 'popular';/* 人気記事クラス */
  const ONCE = 1, AP = 2, INTERVAL = 3;/* 適用タイミング */
  const NGWORDS = {/* 合計100ポイント非表示判定(ただし1つの記事内で同じワード複数使われても1度しか加算しない) */
    '100': [/* 即NG確定ワード */
      'dorawii',
      'あおやまちゃん', 'アオヤマチャン', 'ボスマン',
      '大学たいてい', 'なんぴょん', 'れめくん', 'れめきゅん', 'えめくん', 'るまさん', 'るまおねえちゃん', '眠りの民', 'リュックサック野郎', 'boushi_inst', 'hakaikami', 'Rekyu', 'iloveootaku_2', 'osaka-sirokichi',/* 電気通信大学たいてい鉄道研究会れめくん(頻出) */
      /*A-G*/'a9w8ru6fqyxqfv9', 'admirail_togo', 'akibakko6348', 'alf1974al', 'amatukiseiru', 'anapgoeson', 'aoi_mizuho', 'asapgoeson', 'asupgo', 'asupgoeson', 'avoid_bds_kk', 'b6jbpsji91ieigt', 'bmi22yo', 'boushi_instrail', 'boushi_ob', 'buscholarx', 'bw0531', 'chihiro_love415', 'circlecavok', 'disney1007cla', 'dora22sibuya', 'donkotrain', 'ecotosk', 'electlone', 'factomodachi', 'fft_dareka', 'gmhtcyznf_abc', 'goesonanap', 'gyudon_honmono',
      /*H-N*/'h13_yokohama', 'h2twi', 'H2TWR', 'hamaishogo1111', 'haru_mofumoffu', 'hermitv8', 'hide1798038', 'hirabiscus', 'hinolovelove', 'hnmk0127_03', 'inaken17_', 'inte235dy', 'ixtabes', 'jamcombatge', 'kawachiasukanew', 'kaoru_ai1991', 'keio9730F', 'kiha2228', 'kihatena200', 'koreanlabsfc', 'koyounoyooko', 'kqlex1500', 'kunugiyamaosake', 'kurakamasan', 'kurotamaxxx', 'kt_ruma_1372', 'kt_up_date', 'lightningreen77', 'luckyyusha', 'mamadoll_kun', 'matya_uec', 'michee_n', 'minamihinawot', 'miniminicot', 'minori0151', 'mizunyanpanda', 'monkichi_22', 'mugen_08i', 'mukoroku651', 'nakano6409', 'nanpyong', 'new_oer', 'nimouec', 'NoName_thUFO', 'norannnde',
      /*O-U*/'oreizmmiporin', 'orenotanoshimi', 'osaka_sirokichi', 'papepoco', 'pasotokon', 'pm95uq', 'portrail', 'reme_kun', 'ruin_2002', 'rx00shiratama03', 's03_amurtk2731', 'sacchan03110319', 'sacchanenjoy', 'seishinyamate_', 'seisu_bot', 'senanana_cos', 'shinano_115', 'shineleaf1372', 'Shirasagi494', 'shop_bullet', 'shurimpy', 'soroisoroi', 'sui_pm95uq', 'sweidan821858', 'taiyaki_level2', 'takao_straight5', 'taking0000', 'tarotaromusic1', 'tc201_501', 'thomas_returnee', 'tocarbarn', 'tokusatsu_fan_0', 'toshikimiyazaki', 'train_magician', 'tx9y2cpwdz27255', 'u2fap5u4zw57811', 'uec15take', 'uecdaisuki', 'UECert', 'uecrail',
      /*V-Z_0-9*/'vampire_mio', 'vbdmnwefknmxsdm', 'vp20th', 'wafue', 'wakasato_', 'walkingniwatori', 'wataameexpress', 'ya4975349616894', 'yayoiulc', 'ymbk_arisa', 'yms_uec16', 'yorozun', 'yuuya_1104_uec', '__________ob', '_chocorail_', '_doitforthewin_', '_toeshin', '_unigmo', '100mph_no_yuuki', '16887y', '169_D51_protect', '205musashino', '2969364x', '2rtkvn34il2783', '36kyo', '86lilxw1',
      /(?!(.)\1{19,})(.{20,})\2{2}/,/* 20文字以上の文を3回以上繰り返す */
      /(?!(.)\1{29,})(.{30,})\2{1}/,/* 30文字以上の文を2回以上繰り返す */
      /(?!(.)\1{79,})(.{80,}).*\2/,/* 80文字以上の文が2回以上現れる */
      'テクウヨ', '自己放尿',
      ' ーーーーーーーー', 'https://anond.hatelabo.jp/20260107144223',/* AI問答貼り付け増田 */
      '†噛み締めて行こうな†', 'https://anond.hatelabo.jp/20250826121213#',
      '困難女性(コンジョ)', '困難女性(コンジョ)', 'コンジョ自警団',
      'Boost', 'Cash', 'Coin Master', 'Dice', 'Free', 'Gift', 'Guide', 'Follower', 'Generator',/*英文スパム*/
    ],
    '90': [/* ほぼNG */
      'megalodon.jp',
      'tadaup.jp',
      '鉄道研究会',
      '鉄研',
      '通勤特快',
      '不正乗車',
      'こども料金',
      '性慾',
      '穢い',
      'エッタ',
      'オソソ',
      'キセル',
      'uec',
    ],
    '10': [/* NG */
      '電気通信大学',
      '電通大',
      '駿河台大学',
      '武蔵野美術大学',
      '武蔵美',
      '大学院',
      '学生課',
      '教務課',
      '朝鮮',
      '統合失調症',
    ],
  };
  const sites = {
    'prefix': [
      ['selector', '(modifier)', '(css)', '(REPEAT)'],
    ],
    'https://b.hatena.ne.jp/site/anond.hatelabo.jp/': [
      ['section.entrylist-unit li.js-keyboard-selectable-item', li => {
        if(parseInt(li.querySelector('span.entrylist-contents-users > a > span').textContent) > USERS) li.classList.add(POPULAR);
        else li.querySelector('li.entrylist-contents-category > a').textContent = li.dataset.matches;
      }, `.${FILTERED}:not(.${POPULAR}){display: none;}`, AP],
    ],
  };
  const rules = sites[Object.keys(sites).find(prefix => location.href.startsWith(prefix))];
  if(rules === undefined) return console.log(SCRIPTID, 'Not found any sites.');
  const scores = Object.keys(NGWORDS).map(Number).reverse();/* 数値インデックス順に取り出されたkeysを逆順にして100から並べ直す */
  const filter = function(selector, modifier){/* 各要素に対してNGワード判定して、該当したら追加でmodifierも適用する */
    document.querySelectorAll(selector).forEach(e => {
      if(e.dataset[CHECKED]) return;
      e.dataset[CHECKED] = 'true';
      const text = e.textContent.toLowerCase();
      let total = 0, matches = [];
      for(const score of scores){
        for(const word of NGWORDS[String(score)]){
          switch(true){
            case(typeof word === 'string' && text.includes(word.toLowerCase())):
            case(word instanceof RegExp && word.test(text)):
              total += score;
              matches.push(word);
              if(total >= 100){
                e.classList.add(FILTERED);
                e.dataset.matches = matches.join(', ');
                if(modifier) modifier(e);
                return;
              }
              break;
          }
        }
      }
    });
  };
  /* ONCE(一括適用) */
  rules.forEach(rule => {
    const [selector, modifier, css] = rule;
    console.log(SCRIPTID, 'ONCE:', selector);
    filter(selector, modifier);
    if(css){
      const style = document.createElement('style');
      style.dataset.script = SCRIPTID;
      style.type = 'text/css';
      style.textContent = css;
      document.head.appendChild(style);
    }
  });
  /* AP(AutoPagerize) */
  rules.filter(rule => rule[3] === AP).forEach(rule => {
    const [selector, modifier] = rule;
    document.addEventListener('GM_AutoPagerizeNextPageLoaded', e => {
      console.log(SCRIPTID, 'AP:', selector);
      filter(selector, modifier);
    });
  });
  /* INTERVAL */
  rules.filter(rule => rule[3] === INTERVAL).forEach(rule => {
    const [selector, modifier] = rule;
    setInterval(function(){
      console.log(SCRIPTID, 'INTERVAL:', selector);
      filter(selector, modifier);
    }, 1000);
  });
  console.timeEnd(SCRIPTID);
})();
/* Hatena Bookmark Anond Filter */
.filtered:not(.popular){
  display: block !important;/*上書き*/
  opacity: .25 !important;
}
.filtered:not(.popular):hover{
  opacity: .75 !important;
}
.filtered:not(.popular) li.entrylist-contents-category{
  background: red !important;
  font-weight: bold;
}

検索用: はてなブックマーク はてブ はてな匿名ダイアリー 増田 スパム 荒らし キーワード NGワード フィルタミュー非表示 削除 隠す ブロック 対策 ユーザースクリプト ユーザースタイル hatena bookmark anond spam keywords ngwords filter mute hide hidden display none block userscript JavaScript js css style

2025-07-14

anond:20250714065656

Stylusなどで下記のコード適用してはどうか。

/* 単にアイコン非表示にするバージョン */
img[src^="https://cdn.profile-image.st-hatena.com/users/"]{
  visibility: hidden;
}

/* マウスを乗せた時だけ表示させるバージョン */
img[src^="https://cdn.profile-image.st-hatena.com/users/"]:not(:hover){
  opacity: 0;
}

空白を残すより、替わりにデフォルトアイコンを表示させるほうがいいと思ったけど、デフォルトアイコン単体の画像URLが見つからなかったのでやめた。プロフィールのデフォルト画像を変更しました記事画像を部分指定して上乗せすればできるけど、コード煩雑になるよなぁ。あと、余白として残さず存在を無くしてしま方法(display: none;)は、どこかでレイアウトが崩れるかもしれないので避けた。

2025-07-06

Claudeが作ってくれたやつ



<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PONG Game</title>
    <style>
        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;
    }
</style>
```

</head>
<body>
    
<canvas id="gameCanvas" width="800" height="400"></canvas>
<button class="start-button" onclick="startGame()">ゲーム開始</button> <button class="start-button" onclick="resetGame()">リセット</button>

W/S キーまたは ↑/↓ 矢印キーパドル操作
``` <script> // 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) => { keys[e.key.toLowerCase()] = true; // ゲームが停止中にスペースキーゲーム開始 if (e.key === ' ' && !gameRunning) { startGame(); } }); // キーが離されたときの処理 document.addEventListener('keyup', (e) => { 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 < 0) { game.playerPaddle.y = 0; } if (game.playerPaddle.y > 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) > 10) { if (difference > 0) { game.computerPaddle.y += game.computerPaddle.speed; } else { game.computerPaddle.y -= game.computerPaddle.speed; } } // コンピューターパドルの画面外移動を防ぐ if (game.computerPaddle.y < 0) { game.computerPaddle.y = 0; } if (game.computerPaddle.y > 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 < 0 || game.ball.y + game.ball.radius > canvas.height) { game.ball.speedY = -game.ball.speedY; } // プレイヤーパドルとの衝突判定 if (game.ball.x - game.ball.radius < game.playerPaddle.x + game.playerPaddle.width && game.ball.x + game.ball.radius > game.playerPaddle.x && game.ball.y + game.ball.radius > game.playerPaddle.y && game.ball.y - game.ball.radius < 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) < game.ball.maxSpeed) { game.ball.speedX *= 1.02; } } // コンピューターパドルとの衝突判定 if (game.ball.x + game.ball.radius > game.computerPaddle.x && game.ball.x - game.ball.radius < game.computerPaddle.x + game.computerPaddle.width && game.ball.y + game.ball.radius > game.computerPaddle.y && game.ball.y - game.ball.radius < 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) < game.ball.maxSpeed) { game.ball.speedX *= 1.02; } } // ボールが左右の壁を越えた場合得点処理) if (game.ball.x < 0) { // コンピューター得点 game.score.computer++; updateScore(); resetBall(); } else if (game.ball.x > 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() > 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(); </script> ``` </body> </html>

 

 

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

2024-07-13

anond:20240713114554

自分は以下のCSSStylusアドオンで。

動画の上部にあるグラデーション部分にマウスを乗せたときだけ、サムネが見られるようにしている。

(他とも干渉してるかもしれないので、以下でそのまま動くかはわからん)

/* 上部マウスバーサムネイル表示 */
#movie_player .ytp-gradient-top{
  display: block !important;
  opacity: 0;
  pointer-events: auto;
}
#movie_player.paused-mode:hover .ytp-gradient-top{
  opacity: 1;
}
#movie_player:not(.unstarted-mode) .ytp-gradient-top ~ .ytp-cued-thumbnail-overlay{
  display: block !important;
  opacity: 0;
  pointer-events: none;
}
#movie_player .ytp-gradient-top:hover ~ .ytp-cued-thumbnail-overlay{
  opacity: 1;
  z-index: 999;
}
#movie_player:not(.unstarted-mode:hover) .ytp-gradient-top ~ .ytp-cued-thumbnail-overlay button.ytp-large-play-button{
  opacity: 0;
}

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

2014-06-23

増田CSSカスタマイズしたい

某なんとかパン的なのとか、増田のツリーが大きくなりすぎると見づらくなるのをどうにかしたいなと思ってブラウザアドオンカスタムCSSをいじってるんだけどなんか微妙…。

本当はクリックでツリー展開したかったんだけど無理そうだからホバーにしたとか、本当は子要素にulを持つliに印を付けたかったけどできなかったとか、いろいろ至らぬ点が重なって気に食わない。

やっぱりCSSだけじゃダメなのかなあ。はてなには天才CSS屋さんとかいそうなので、なにかい方法あったらおせーて。

(>とか化けちゃうけど下に自分の置いときます。ド素人かつ適当なんで統一感なくてすいません)

li ul li {

display: none;

}

div.refererlist ul li:hover > ul li {

display: block;

}

div.refererlist > ul > li > ul > li:first-child {

display: block;

}

2008-08-10

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

2008.9.28 12:53 追記



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


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





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




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

作りました

【black-out.css

2008.9.13 23:30 追記

2008.8.10 22:29 追記

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

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

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

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

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

何を作ったの?

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

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

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

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

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

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

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

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

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

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

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

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

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

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


導入方法について

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


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

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

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

}

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

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


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

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

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


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

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


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

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

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



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


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




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



update

2008-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

 
ログイン ユーザー登録
ようこそ ゲスト さん