コピペブログがムカつくので、はてブを快適にするユーザーCSS作った
はてブは便利だ。かれこれ使い続けて8年目になる。 しかし、はてブを使っているとしばしばムカつくことがある。 それは2chをコピペしただけのデマまとめサイトがホットエントリとして頻繁に表示されてしまうことだ。 リンクをクリックしなければいいのだが、最近はタイトルだけで不快になるレベルのものも多い。 例えばここのところ、冷凍庫に入ったバイトをアップして炎上させる遊びがリア充の間で流行しているが、 「ハム速」というサイトはこういったものを毎回取り上げて、嫌でも目に付くタイトルで他人の個人情報を晒している。 なにがホットだよ。見たくねえよ死ね。 しかし、はてなの運営はいつまで経っても非表示サイト機能を用意してくれないし、 こういったクソサイトを未だにブクマしてホッテントリ入りに貢献するはてなユーザーはあとを絶たない。 これらを弾くユーザースクリプトやユーザーCSSを書いてくれた人もいない。 仕方な
Twitterの片想い片想われをチェックするWebアプリ「lovetestter」を作った - 今日覚えたこと
以下のリンクからどうぞ。 lovetestter(らぶてすったー) - Twitterの片想い片想われをチェックします 今回のは長く使いそうだから、けっこう頑張って、できるだけ本格的に見えるようにした。 これはなに？ Twitterアカウントのフォローとフォロワーを分析して、片想いと片想われのユーザーを抽出する。結果一覧にはいろいろな情報が表示されている。それを見ながらワンクリックでフォローしたり解除したりできる。 片想い片想われってなに？ 片想いは、自分がフォローしているけど、相手は自分のことをフォローしてない状態。 片想われは、自分はフォローしてないけど、相手は自分のことをフォローしている状態。 lovetestterを使えば、そういう状態になってるユーザーを一覧表示して、整理できるというわけ。別に相互フォロー主義とかとは関係ないつもり。 使い方 lovetestterを開く。 真ん中
新はてブのUserCSSを書いた - いさぢちん日記
3カラムで横幅固定だと見にくいので。 /*新はてブレイアウト対策*/ .wrapper-container-inner { width:100%!important; padding-left:0!important; } .wrapper-container-inner.left-column-line { background-image : none!important; } #left-container { float:right!important; width:200px!important; } #center-container { width:auto!important; float:none!important; margin-right:200px!important; margin-left:0!important; } #right-container { d
CSSで描いた「キュゥべえ」が登場 すごすぎてわけがわからないよ - はてなニュース
MBS・TBS系で放送中の人気アニメ「魔法少女まどか☆マギカ」に登場するキャラクター「キュゥべえ」を描いた1枚のイラストがはてなブックマークで話題を呼んでいます。なんとこのイラスト、画像をまったく利用せず、HTMLとCSSだけで描かれているそうです。 ▽ http://jsdo.it/norahiko/m1WT 以前はてなブックマークニュースではHTMLとCSSのソースコードのみで描かれた「ドラえもん」のイラストをご紹介しました。上記エントリーで見られるキュゥべえのイラストも、同じ手法で描かれています。一見画像のようですが、イラストの上で右クリックをしてみると“画像を保存できない”ことがわかります。 ▽ 画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい - はてなニュース このHTMLとCSSだけで描かれたキュゥべえ、作者さんによると、Google Chromeと、Fir
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
まどか☆マギカのルーンフォントをはてダで使ってみたよ - y-kawazの日記
主に海外の解析部隊の人達によって、まどか☆マギカの作中で使われてるルーン文字*1が解析されつつある解析完了したみたいです。 ご丁寧にもTrueTypeフォントがダウンロード出来るようになってたので、早速はてダで使ってみます。 まずMadokaRunes.ttfだけど、件のサイトへの直リンクは出来なさそうなので一旦別の場所にコピー。*2 IEではTrueTypeやOpenTypeのWebFontが使えず独自のEOT(Embedded Open Type)という形式のファイルが必要らしいのでeotファイルも作って置いておきます。*3 Firefoxでクロスドメインでwebfontファイルを取得する場合は、外部サイト側にアクセスコントロールヘッダによる許可が必要なので、フォントファイル置き場の .htaccess に↓とかを書いておきます。 header add Access-Control-A
ジェスチャ一発でニコニコ動画のサムネをはてなダイアリーに綺麗に貼るレシピ(Chrome拡張とGoogleガジェットとCSSで) - Damehumanoid 曰く
全部webで教えてもらった方法を繋ぎあわせただけですが、参考までに。 個人的サムネ貼りジェスチャの紆余曲折 id:sikii_j さんのこちらの記事でジェスチャにサムネ変換が登録できることを教えてもらう これまで頼っていたNicoNail.infoがサービス終了 はてなダイアリーはまだiframeタグを変換してくれないことがしばしば id:Gimite さんのiframe → Google Gadgetコンバータを使わせていただく 下にiGoogleの追加ボタンが出てくるのがなんとなく残念 諦めてたところにid:raydive さんがid:amachang さんのCSSでボタンを消す方法の記事を教えてくれる …これ、全部繋げられるんじゃないか？ ということで試してみた。 以下自分の使ってるChrome用だけど多分他のブラウザでも流用は可能。 ジェスチャは敷居さんのとこに載ってたChrome
Firebugの使い方 | THE HAM MEDIA
Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会（SaCSS）にて発覚！使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ！」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない！という人も勉強会の時に多かったように、実際にも多いはず！ Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ！と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認
画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい - はてなニュース
こちらの“ドラえもん”のイラスト、どうやって描かれていると思いますか？PhotoshopやIllustratorなどの画像編集ソフトで描かれているようにも見えますが、実はこのイラスト、なんと画像を一切使わずに「XHTML」と「CSS3」のソースコードのみで描かれているとのことです。 ▽CSS3 ドラえもん インターネット上でイラストを公開するには、JPGやGIFといった画像ファイルでアップロードするのが一般的。しかしこちらのドラえもんはそういった画像ファイルではなく、Webサイトを構築する際に使われるXHTMLとCSS3のソースコードのみで作られています。そのため“右クリックで保存”ができなかったり、ブラウザの種類やバージョンによって見え方が異なるのが特徴です。 こちらはFirefox3.6の場合です。FirefoxやGoogle ChromeはCSS3に対応しているので、グラデーションま
ニコ動が快適になるかもしれないFirefox用CSS - ネットハイカー
書いてみた。 まずあれ。 FirefoxにアドオンのStylish入れてね。 ファイル自体を貼りたかったんだけど、やり方分らないからそのままコピペる。 ニコニコ動画のでかい頭を小さくします。 @namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("www.nicovideo.jp") { /***(｀・ω・´)ゞスクロール用スペース確保***/ body{padding-left:10px !important;} /***(｀・ω・´)ゞ広告破壊***/ div#PAGEBODY div.ads_728, div#PAGEBODY div#category_recent div.mb16p4 div#web_pc_top_bottom, div#PAGEBODY div#category_recent di
はてなスターの画像が自由に変更できるようになりました - はてなダイアリー日記
さきほど、はてなスターの機能拡張を行い、スタイルシートで設定するだけで簡単にはてなスターの画像を変更できるようになりました。この方法を使うと、はてなダイアリーなど、スタイルシートが編集可能な環境ならどこでも簡単に画像を変更できます。 今回の機能により、「Commentボタン」「Addボタン」「☆」のそれぞれの画像を変更することができます。それぞれ以下の項目を編集することで指定が可能です。 /* Commentボタンの画像をurl()の中に指定します */ .hatena-star-comment-button-image { background-image: url(http://exapmle.com/comment.gif); } /* Addボタンの画像をurl()の中に指定します */ .hatena-star-add-button-image { background-imag
「NewYear07-Couple」「Hatenaテーマ」のデザインを簡単アレンジ - tikeda's blog
「NewYear07-Couple」は去年末に正月用に作った公開デザインなんですが、もう季節的にも使えそうにないので、背景やヘッダー画像をオリジナルな物に変えたり、色をいくつか指定すれば、id:imaginarationさんみたいな感じでアレンジできる簡単なツールを用意してみました。 「NewYear07-Couple」をアレンジ 上のページで使いたい画像のURLと色をWebカラーで指定し「変更」ボタンを押すと、ページ自体が変更した内容のデザインに変わり、そのスタイルシートが表示されます。それをコピーして、はてなダイアリーの「デザイン」→「詳細」→「スタイルシート」枠に入れたらそのまま使えます。 こんな感じで、違った雰囲気に簡単にアレンジできるので、CSS書く手間を省くのによかったら使ってください。 「hatena」をアレンジ 同様に「Hatenaテーマ」でも色味も簡単にアレンジできるよう
ルビ表示はユーザスタイルシートで! - 徒書
なんだか最近になってMozillaでルビ表示3の記事(個別ページ)がブックマークされているなと思っていたのですが、404 Blog Not Found:css - ルビもCSSでで紹介されていたからのようでした。 それにしてもその紹介記事のブックマーク数が200以上ってすごいな。やはりウェブでは作った人よりも紹介した人の方が注目される、ということなのでしょうか。それはいいとしても、トラックバックで「プログラマーの小飼弾氏のアイデアと技術には……」と書かれているのを見てしまうと釈然としないものを感じてもいいでしょうか。(←誤った疑問文) それはそれとして、404 Blog Not Foundではルビ表示用のスタイル定義をサイト用のCSSに組み込んでいますが、これはあまりよくありません。あのスタイル定義は(2001年当時のMozilla用に作った、)あくまで擬似的な表示を行うスタイルです。製作
ごく簡単なHTMLの説明
HTMLは本来簡単で便利なものです。「30分間HTML入門」で基本は十分。まずシンプルに自分の情報を表現してみてください。 You can write a document as simple as you like. In many ways, the simpler the better. -- Tim Berners-Lee 簡単なHTMLの説明 少し詳しいHTMLの説明 XHTMLから次世代ウェブへ 電子テキストで情報発信 簡単なHTMLの説明 だんだん説明の量が増えてきたので、コンパクトな入門ページを用意しました。 基本がきちんと分かる30分間(X)HTML入門 HTMLを使った人間・コンピュータ双方にわかりやすい表現 （スライドのHTML版） 何のためのHTML？ HTMLは画面をレイアウトするためではなく、文書を環境に依存せずに共有できるように記述するための約束です。そこを正
あれこれポップアップ
ウェブページ (HTML) にて、マウスポインタの下にある任意の箇所（要素）の情報（属性値）あれこれをポップアップに出す、 JavaScript と CSS のセット。 Web サイトの製作運営者向けの一種の「素材」。 HTML に「あれこれポップアップ」の外部 JavaScript と 外部 CSSを適用するだけで、すぐ機能します。そのはず。 多くの典型的なブラウザでは、 title 属性に何か書いてある要素部分にマウスポインタをかざすと、その title 属性値がツールチップとしてポップアップしますよね。あれのゴージャス版と思ってもらえればよいです。典型ブラウザ本来のポップアップとの違いは、ポップアップするのが title 属性だけではない点。それと自分で言うのも何だけど、見てくれがカコイイ事（笑） 適用サイト利用者向け FAQ だうんろーど他 お持ち帰り用アーカイブをダウンロード 2
もうパンツはかない
このサイトは webサイトのデザインをいろいろ考えてみようかななどとでっち上げたサイトです。ようやく7つ目のデザインとなります。 デザインにはカスケーディングスタイルシート(CSS)を使っています。21世紀の今、テーブルレイアウトでもないでしょうから。ですのでデザイン的にはターゲットとなるwebブラウザは、CSSにきちんと対応した新しめのもの、たとえば Firefox(レンダリングエンジン Gecko を使ったもの。N9なども含む)や 、Opera9、Safari などを想定していますが、HTML的には素直なよいHTMLをめざしてますので、まともなWEBブラウザであれば閲覧に支障はないでしょう。デザインが再現できるかはともかく。 デザインノート 今回のポイントは半透明画像の重ねあわせといったところでしょうか。 一番下の背景の上に3枚の半透明画像が重なり、スクロールするとそれぞれ違う速度で動
Designing with CSS § ウェブスタンダードテンプレート集
ドメインウェブの設定が見つかりません 考えられる原因 ドメインウェブの設定がまだ行われていない。 ドメインウェブの設定がまだ反映されていない。(反映には数時間～24時間かかることがあります) ドメインウェブ・DNSの設定が誤っている。 アカウントが存在しない、契約が終了している、削除されている。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch