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

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

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

// ==UserScript==// @nameHatenaBookmarkAnond Filter// @namespacehttps://b.hatena.ne.jp/site/anond.hatelabo.jp/// @descriptionはてなブックマークの『はてな匿名ダイアリー』の記事のうち、指定したNGワードが含まれる投稿を非表示にします。// @matchhttps://b.hatena.ne.jp/site/anond.hatelabo.jp/*// @grant       none// @version2.0.2026.01.28.0015// ==/UserScript==(function(){constSCRIPTID = 'HatenaBookmarkAnondFilter';console.time(SCRIPTID);const CLASSNAME = 'filtered';/*フィルタ該当要素*/const CHECKED = 'checked';/*二重チェック回避フラグ*/const ONCE = 1,AP = 2, INTERVAL = 3;/*適用タイミング*/constNGWORDS = {/* 合計100ポイントで非表示判定(ただし1つの記事内で同じワードが複数使われても1度しか加算しない) */    '100': [/*即NG確定ワード*/      'dorawii',      'あおやまちゃん', 'ボスマン', 'MNK',      '電気通信大学たいてい', 'なんぴょん', 'れめくん', 'リュックサック野郎', 'boushi_inst', 'hakaikami', 'Rekyu', 'iloveootaku_2',/*電気通信大学たいてい鉄道研究会れめくん(頻出)*/      /*A-G*/'a9w8ru6fqyxqfv9', 'admirail_togo', 'akibakko6348', 'alf1974al', 'amatukiseiru', 'anapgoeson', 'aoi_mizuho', 'asapgoeson', 'asupgoeson', 'b6jbpsji91ieigt', 'bmi22yo', 'boushi_instrail', 'boushi_ob', 'buscholarx', 'bw0531', 'circlecavok', 'disney1007cla', 'dora22sibuya', 'donkotrain', 'ecotosk', 'electlone', 'factomodachi', 'fft_dareka', 'gmhtcyznf_abc', 'goesonanap', 'gyudon_honmono',      /*H-N*/'h13_yokohama', 'h2twi', 'H2TWR', 'hamaishogo1111', 'haru_mofumoffu', 'hermitv8', 'hirabiscus', 'hinolovelove', 'hnmk0127_03', 'inaken17_', 'inte235dy', 'ixtabes', 'jamcombatge', 'kawachiasukanew', 'kaoru_ai1991', 'keio9730F', 'kiha2228', 'koreanlabsfc', 'koyounoyooko', 'kqlex1500', 'kurakamasan', 'kurotamaxxx', 'kt_ruma_1372', 'lightningreen77', 'mamadoll_kun', 'matya_uec', 'minamihinawot', 'minori0151', 'monkichi_22', 'mugen_08i', 'mukoroku651', 'nakano6409', 'nanpyong', 'new_oer', 'nimouec', 'NoName_thUFO', 'norannnde',      /*O-U*/'oreizmmiporin', 'orenotanoshimi', 'osaka_sirokichi', 'papepoco', 'pasotokon', 'pm95uq', 'reme_kun', 'ruin_2002', 's03_amurtk2731', 'sacchan03110319', 'seisu_bot', 'senanana_cos', 'shinano_115', 'shineleaf1372', 'shop_bullet', 'shurimpy', 'soroisoroi', 'sui_pm95uq', 'sweidan821858', 'taiyaki_level2', 'takao_straight5', 'taking0000', 'tarotaromusic1', 'tc201_501', 'tocarbarn', 'toshikimiyazaki', 'train_magician', 'tx9y2cpwdz27255', 'u2fap5u4zw57811', 'uec15take', 'uecdaisuki', 'UECert', 'uecrail',      /*V-Z_0-9*/'vampire_mio', 'vbdmnwefknmxsdm', 'vp20th', 'wafue', 'wakasato_', 'walkingniwatori', 'wataameexpress', 'ya4975349616894', 'ymbk_arisa', 'yms_uec16', 'yuuya_1104_uec', '__________ob', '_chocorail_', '_doitforthewin_', '_toeshin', '_unigmo', '100mph_no_yuuki', '169_D51_protect', '2969364x', '2rtkvn34il2783', '36kyo', '86lilxw1',      /*tadaup.jp*/'1dOaKWk3.jpeg', '1sL2VBZ5.jpeg', '1uNK2iEP.jpeg', 'CBUHadpD.jpeg', 'CgJlF4Wr.jpeg', 'CGTtm0Ev.jpeg', 'CIxj8clS.jpeg', 'CqbERPdQ.jpeg', 'CTZsA2wM.jpeg', 'CWY2m7rS.jpeg', 'CZVCEgd1.jpeg',      'テクウヨ', '自己放尿',      ' ーーーーーーーー', 'https://anond.hatelabo.jp/20260107144223',/*AI問答貼り付け増田*/      '†噛み締めて行こうな†',      '困難女性(コンジョ)', '困難女性（コンジョ）', 'コンジョ自警団',    ],    '90': [/*ほぼNG*/      'megalodon.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 => {li.querySelector('li.entrylist-contents-category > a').textContent = li.dataset.matches}, `.${CLASSNAME}{display: none;}`,AP],    ],  };const rules = sites[Object.keys(sites).find(prefix => location.href.startsWith(prefix))];  if(rules === undefined) returnconsole.log(SCRIPTID, 'Not foundany sites.');constscores =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';consttext = e.textContent.toLowerCase();      lettotal = 0,matches = [];      for(constscore ofscores){        for(constword ofNGWORDS[String(score)]){          if(text.includes(word.toLowerCase())){total +=score;matches.push(word);            if(total >=100){              e.classList.add(CLASSNAME);              e.dataset.matches =matches.join(', ');              if(modifier) modifier(e);              return;            }          }        }      }    });  };  /* 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);})();

• 使い方などは「ユーザースクリプト」などのキーワードを手がかりに調べてください。ブックマークレットとしても動きます。
• NGとなるキーワードも含めて気が向くたびにこのページのコードは更新していこうと思います。
• Greasyforkに投稿してもよかったけど、ひょっとしてキーワードを更新するたびに更新用のタブが開いて(?)うっとうしいかなと思ってやめました。
• 別で使っていたコードを改造して作ったので、無駄に汎用性が組み込まれています。他のサイトや増田(anond.hatelabo.jp)にも拡張しやすいです。filteredクラスを付与してcssでdisplay:noneにしているので、Stylusなどで上書きしやすいです。個人的には下記のCSSを適用して、非表示ではなく半透明化だけに留めています。

/*HatenaBookmarkAnond Filter */.filtered{  display: block !important;/*上書き*/  opacity: .25 !important;}.filtered:hover{  opacity: .75 !important;}.filtered li.entrylist-contents-category{background:red !important;  font-weight: bold;}

検索用:はてなブックマークはてブはてな匿名ダイアリー増田スパムキーワードNGワードフィルターミュート非表示 削除 隠すブロックユーザースクリプトユーザースタイルhatenabookmarkanondspam keywordsngwords filter mutehide hidden display none blockuserscriptJavaScriptjscss style

Permalink |記事への反応(5) | 22:40

ツイートシェア

■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;)は、どこかでレイアウトが崩れるかもしれないので避けた。

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

ツイートシェア

■Claudeが作ってくれたやつ

<html lang="ja"><head>    <meta charset="UTF-8">    <metaname="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 solidwhite;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 solidwhite;padding:10px20px;        font-size: 16px;        cursor: pointer;        font-family: 'Courier New', monospace;margin:10px;    }        .start-button:hover {background-color:white;color: black;    }</style>```</head><body>
プレイヤー:0 |コンピューター:0
        <canvasid="gameCanvas" width="800" height="400"></canvas>
            <button class="start-button">ゲーム開始</button>            <button class="start-button">リセット</button>

W/Sキーまたは ↑/↓ 矢印キーでパドルを操作
```<script>    //Canvas要素とコンテキストの取得constcanvas = document.getElementById('gameCanvas');const ctx =canvas.getContext('2d');        //ゲームの状態管理    let gameRunning =false;    let animationId;        //スコア要素の取得const playerScoreElement = document.getElementById('playerScore');constcomputerScoreElement = 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        }    };        //キーボード入力の処理constkeys = {};        //キーが押されたときの処理    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;                //ボールとパドルの中心の差を計算constdifference = 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;    }        // 描画処理    functiondraw() {        // 画面をクリア        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#

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

ツイートシェア

■anond:20240713114554

自分は以下のCSSをStylusアドオンで。

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

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

/* 上部マウスホバーでサムネイル表示 */#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;}

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

ツイートシェア

■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:    "usersbodytitle"  28px    "bookmarkbody 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 aspan{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-thumbspan{  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

ツイートシェア

■hoverのcss書く気しない

https://coliss.com/articles/build-websites/operation/css/one-way-hover-effect.html

Webページのスタイルでマウスカーソル乗せるとリンクとかボタンの表示が少し変わるやつあるじゃないですか。あれって、ホバーっていうCSSの機能なんですけど、

もうWeb閲覧ユーザーのPC利用率とか15%くらいまで落ち込んでる時代なので、正直あれのデザイン触る気しないんですよね

みんなスマホとかタブレットつかってて、指で直接リンクをタップしているのが現代なんです。

でもなぜかWeb Design 界隈だといろんな実装とか充実してたりして、キャッキャウフフしてるんですけど、正直デザイナーのオナニーなんじゃないの？っていう気持ちがあります。

まぁ :action としても使えるので、完全に無駄とはいいませんけど。

私の個人サービスではどれくらい使ってるかな？って思って見直しましたけど、やっぱり:hover は二行しか使ってなかったですね

Permalink |記事への反応(2) | 13:27

ツイートシェア

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

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

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

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

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

liul li {

display: none;

}

div.refererlistul li:hover >ul li {

display: block;

}

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

display: block;

}

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

ツイートシェア

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

2008.9.28　12：53　追記

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

• 公式サイトを開設しました。
• デモ動画、マニュアル付きダウンロード・パッケージをご用意しております。
• 当エントリより下記の公式ページより情報を得られる事を強く推奨いたします。
  • http://zamamin.org/labs/black-out

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

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

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

作りました

【black-out.css】

2008.9.13　23：30　追記

• wmtg.netドメイン失効に伴い、zamamin.comに変更

2008.8.10　22：29　追記

• bookmarkletを作りました！！Firefox以外でも手軽にお試し頂けます。
  • 　http://anond.hatelabo.jp/20080810224028

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

1. Firefoxユーザーである（※他ブラウザでもいけます。が、当エントリでは導入方法を紹介していません。追記したbookmarkletだとoperaやsafariなどのブラウザでもすぐにお試しできます）
2. Firefoxのアドオン「stylish」を入れている。もしくは必要なら入れてもいいって人。
3. （mixiをPCで使っている場合）右に出てくる鬱陶しいバナーにうんざりしていたり、日記とコミュにしか興味がない人。
4. お気に入りのブログが、情報源の質には満足しているが左右のアフィリが鬱陶しい点を残念に思ってる人
5. コンソール（CUI）が好きな人、シンプルなのが好きな人、ぶっちゃけ文字以外用がないのに飾りの画像とかWEBにいらねーよと思ってる人
6. カラム、２カラムのレイアウトのせいで、目線が左右に移動しないといけないのがイラっとくる人、コードは上から下だけでいいだろって思っている人
   • wikipediaも段組みやめてくれよサイドバーうざいよ、デフォルトの白背景色は目が痛いって思ってる人とか特に
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を書いてなかったので追加 * ---------------------------- * */@namespaceurl(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,'ヒラギノ角ゴProW3','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;}tabletd,tableth{border:none;border-right:1pxdashed#999!important;border-bottom:1pxdashed#999!important;}/* for2ch（暫定） */body*dt{font-weight:bold!important;}/* 二コ動 */embed#flvplayer{height:540px!important;width:952px!important;}

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

• ごちゃごちゃしたサイトに出くわした時に、必要に応じて使う、というのを想定しています。どんな時でも使える万能cssではないです
• mixiの日記投稿のように、文字入力に関してはあまりメリットはないです。view専用のcssと考えられるとよいかと。
• windowsではメイリオの入っているvista機やxp機がおすすめです。macは、まぁとりあえずこのフォントでいいかなとテキトーにやっています（一応、macとwin両方で閲覧テスト済み）
• objectやembedタグのあるサイトでは、objectやembed部分が変になるかも。今後の課題。ニコ動だけ特別対応させています。
• リンクカラーがオレンジなのは映画イノセンスのオレンジ色の画面が好きだったから
• スタイルを何もかも破壊するのでfirebugもおかしくなります

update

• 2008.8.10 21:05
  • @namespaceを書いていなかったので追記。ありがとうございました。 ->http://pc11.2ch.net/test/read.cgi/software/1216790587/553

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

ツイートシェア

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

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

@-moz-document domain("b.hatena.ne.jp"){ul#bookmarked_user{font-size:105%;}#bookmarked_userli{list-style-type:decimal;}#bookmarked_userli: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_userimg.hatena-id-icon,#bookmarked_user.user-tag,#bookmarked_user.hatena-star-comment-container,#bookmarked_user.hatena-star-star-container{display:none;}#bookmarked_usera[href*='bookmark-']:before{    content:'ID:';}#bookmarked_usera[href*='bookmark-']:link,#bookmarked_usera[href*='bookmark-']:hover{color: black;text-decoration: none;}#bookmarked_usera[href*='bookmark-']:hover{color:blue;text-decoration: underline;}#bookmarked_userspan.comment{display:block;padding:8px1em;margin-left:1.5em;}}

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

追記

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

追記2

→はてブちゃんねる

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

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

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

ツイートシェア