CSS3でGoogle検索やはてブを見やすくしたり、キュレーションサイトを目立たなくする方法
Web技術 CSS3でGoogle検索やはてブを見やすくしたり、キュレーションサイトを目立たなくする方法 Wednesday, October 26th, 2016 最近、調べ物をしようとGoogle検索した時にキュレーションサイトなどの役に立たない、あるいは他のサイトの情報をまとめただけのサイトばかり上位に表示されてしまい、ストレスがたまることが多くなってきました。 そこで、検索結果のCSSを上書きしてキュレーションサイトなどを半透明で表示し、ついでに記事が書かれた日付や「未指定」などを目立つようにカスタマイズしました。 ※ このスクリーンショットは、この記事でできるGoogle検索結果のカスタマイズ例です。1件目のNAVERまとめは半透明に、2件目の記事ははてなブックマーク数、サムネイル、記事が公開された日付を目立たせるなどして「役に立つページかどうか」を判断するヒントをわかりやすくし
hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
text-decoration: blink; と blink 要素終了のお知らせ
Bugzilla@Mozilla で、Gecko レンダリングエンジンにおける blink 要素と CSS の text-decoration: blink; のサポート廃止が提案され、それが承認されたようです。 大昔の名残で、Netscape 系ブラウザと Opera しかサポートしていませんので、今どき使っている人の方が珍しいどころか、知ってる人も少ないんじゃないかとは思いますが （携帯サイト作ってる人とかだと使うのかな...）、Bugzilla@Mozilla で、Gecko レンダリングエンジンにおける blink 要素と CSS の text-decoration プロパティに対する blink 値指定のサポート （点滅エフェクト） をやめようぜっていう提案がされ、それが承認されて、今後リリースされるバージョンに反映されることが確定したみたいですね。 857820 - Drop
画像を一切使わずCSSで描かれた「けいおん！」の澪がマジですごい！
今回紹介するのは、画像を一切使わずにhtml+CSSだけで「けいおん！」の秋山 澪を描いた技術デモ作品です。実際に作品を見てもらえば分かると思いますが、ものすごくクオリティが高くて普通に画像にしか見えないレベルです。久しぶりにCSSで絵を描く作品で驚かされたので、これはぜひ紹介せねばと思い記事を書きました。 「けいおん！」（K-ON!）は、軽音楽部で4人の高校生たちがガールズバンドを組み、音楽活動を行っていくストーリーで人気のかきふらい氏による4コマ漫画作品です。2年前にアニメ化、今月12月より映画が公開されている人気作品ですね。秋山 澪はその作品に登場するキャラクターです。その秋山 澪をまったくの画像なしで、html+CSSのコードだけで表現しています。 私も以前にCSSでドラえもんなど様々な作品を描いたりしましたが、はっきりいってhtml+CSSのコードだけで絵を描くのはとても大変です
今なおブラウザシェア10.1%もあるIE6とどう向き合えばいいのか
登場から10年以上経つにもかかわらず、亡霊のようにいき続けているIE6（Internet Explorer 6）ですが、日本でのシェアは10.1%もあるようです。 見過ごせない数字ですので、そんなIE6について考えてみます。 Internet Explorerの歴史 Internet Explorerは1995年8月24日に公開され、現在はIE9まで公開されています。 IE1 - 1995年 8月24日 IE2 - 1995年11月27日 IE3 - 1996年 8月16日 IE4 - 1997年 9月30日 IE5 - 1999年 3月18日 IE6 - 2001年 9月19日 IE7 - 2006年11月 2日 IE8 - 2009年 3月20日 IE9 - 2011年 3月15日 今回のテーマであるIE6は2001年に公開され、5年以上も最新バージョンとして提供されていたことになりま
iTunesのフォントはやっぱダメだ - なげやりろぐ
以前もちらっとだけ取り上げましたけど、WebKitをITMSの表示に利用するようになってからのiTunesはフォントがとっても見づらいというか汚いというか・・・ Mac OSX版でならキレイなんですけどWindows版ではどうにもよろしくない。文字のジャギーが目立ってとてもApple製のアプリとは思えないですよね。 で、WebKitでの描画なら当然スタイルを指定しているファイルが必要なわけですが、iTunesのインストール先にあるiTunes.Resourcesフォルダ内にiTunes.cssというファイルがあって、これを編集することである程度はフォントを変更出来ることまでつかめていました。 しかし、アスタリスクで全適用させてみても変化してくれないところがかなりあったので、これはやはり個別にidやclassが指定されているに違いないなと。 では、それを指定しているファイルはどこにあるのかと
ねこまぐろBlog :: pixivとTINAMIのタイトルからサムネイルを非表示にするユーザCSS*Firefox+Stylish
ネットなどの備忘録なブログ。たまに創作ネタメモとか？ ※当サイトではアフィリエイト広告を掲載しています。詳しくはPrivacy Policyをご覧ください。 ※現在pixivの改悪仕様変更によりalt要素がなくなったため、タイトルによる非表示が出来ません（マイページトップを除く）、下記の追記をごらんください。 *2011-06-07 “腐女子”だけど、常時“ボーイズラブ”の絵を見たいわけでもないし、 苦手な絵柄と同性愛として見たくない二次創作もあります。 見て不快な気持ちを直接的ではないとは言え吐き出すのも悲しいので、 腐女子イラストを投稿する皆さんがつけてくれたタイトル「腐（腐向け）」を利用して非表示にするユーザCSSを書いてみました。 FirefoxのStylishと言うアドオンを利用しているため、常時無効にする事が出来るので便利です。 私もたまに無効にして腐向け絵を楽しんでます。 無
【メモ】 Tumblrに関する情報あれこれまとめ。 | mutter
カスタマイズは、自分のTumblrの右上の「Customize」から行うことが出来ます。基本は、タイトルや説明文の入力、アイコン画像の設定、テーマの変更などですね。その他テーマの変更で「custom HTML」を指定してタグを入力していくことで、自分好みにカスタマイズしていくことが出来ます。 使えるのはHTMLの他、下記のページで定義されているTumblr独自のタグ。これを使用すると様々な情報を記載することが出来ます。 Creating a custom HTML theme | Tumblr また、テンプレートにはJavaScriptを記述してWidgetを動かすことも出来ます。 以下、簡単なカスタマイズ例です。 Followしている人の一覧を表示する Tumblrタグ{block:Following}で実装できます。以下はあるテンプレートに記載されていた実装例です。 {block:Fo
Mozilla Re-Mix: 2009年[moziller]のFirefoxに個性を持たせてくれた17個のユーザースタイル（CSS）
年末ということでまとめ記事ばかり続いていますが、このシリーズも今日を含めあと4日ですのでもうしばらくおつきあいください。 本日は、Greasemonkeyとともに、Firefoxの外観やウェブサービスの使い勝手をカスタマイズしてくれる「ユーザースタイル」部門から、2009年管理者がお世話になったものをリストアップしたいと思います。 本日時点で管理者が使っているユーザースクリプトは以下の合計17個となります。 ON/OFFが面倒なので、基本的にStylishを使ったものとなっています。Stylishをインストールされている方はそれぞれの公開ページで[Install]ボタンをクリックするだけで導入が可能です。 また、コードが記載されているものは[userstyles.org]にアップされていないものですので、これらを導入される場合はStylishアイコンをクリック→新しいスタイルを書く→「白紙
SimpldR: livedoor Readerをシンプルに
しばらく前からユーザー・スタイルシートとユーザー・スクリプトのコンビネーションでlivedoor Readerをシンプルにして使うようにしていて中々快適なのでまとめてエントリにしてみる。キーボードでサクサク操作できて快適ウハウハとかじゃなくてシンプルな画面でマウス・ホイールを使ってひゅいんひゅいん読む感じ。 ユーザー・スタイルシート ヘッダの色などを排除するのがメイン。userContent.cssに以下のCSSを追加する。 /* livedoor Reader ----------------------------- */ @-moz-document domain("reader.livedoor.com") { * { font-family: "Lucida Grande", "Trebuchet MS", sans-serif !important; } pre, code,
Google系サービスをSnow Leopardスキンで統一してみた
Warning: include_once(/home/sites/lolipop.jp/users/lolipop.jp-dp16105308/web/wp/wp-content/plugins/wp-super-cache/wp-cache-phase1.php): failed to open stream: Permission denied in /home/users/0/lolipop.jp-dp16105308/web/wp/wp-content/advanced-cache.php on line 8 Warning: include_once(): Failed opening '/home/sites/lolipop.jp/users/lolipop.jp-dp16105308/web/wp/wp-content/plugins/wp-super-cache/wp-c
Firefox3.5でウェブ表示画面を広くする方法 | ライフハッカー・ジャパン
その2: userChrome.cssを編集する Firefoxの「userChrome.css」ファイルを編集すると、不要なものを削除したり、整理することができる。このファイルは、WindowsXPでは「C:\Documents and Settings\[User Name]\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome\」、Linuxは「~/.mozilla/firefox/xxxxxxxx.default/chrome/」（xxxxxxxxはランダムな8文字）に保存されている。 Firefoxを閉じた状態で「userChrome.css file」を開けば、CSSを修正できる。「userChrome.css」が存在しなければ、「userChrome-example.css」を「userChrome
Mozilla Re-Mix: GmailのUIをシンプル＆クールに変更できるGreasemonkeyスクリプト「Helvetimail」
FirefoxやThunderbirdはWEBユーザーの必須アイテム。 初心者からヘビーユーザーまで使える！便利でクールなFirefox拡張機能（アドオン）の使い方やカスタマイズ、Mozilla関連情報をどうぞ。 Adobe 「Flash Player」を緊急アップデート。 by hoge (07/16) Adobe 「Flash Player」を緊急アップデート。 by H.I. (07/16) ウェブページから余計なコンテンツを排除して読みやすく表示できるFirefoxアドオン「Tranquility Reader」 by しんちゃん (07/11) YouTubeのHTML5動画に表示される広告をブロックしてくれるFirefoxアドオン「YouTube Advertisement Blocker」 by はち (06/17) ウェブページ上の不要なリンクを非表示にできるFirefox
Googleの検索ボックスがやたら主張するようになったのでユーザースタイルシート(Stylish)で小さくする - F.Ko-Jiの「一秒後は未来」
ちょっと前にGoogleの検索ボックスの文字サイズが大きくなりましたが、個人的にこれはキライ。ちょっと主張しすぎだし、他人からディスプレイを覗かれた時に検索ワードを認識されやすくなったからです。 というわけでユーザースタイルシートを使ってみることに。 Firefoxにはユーザーが自由にスタイルをカスタマイズできる userContent.css というのがあるらしいのですが、その場合Firefoを再起動しないとスタイルが反映されないようなので、拡張機能の Stylish を入れました。これであれば簡単にスタイルを変更できます。 Stylishをインストールしたら、Googleの検索結果ページへ移動。 ↑ Firefoxの右下にある白い「S」マークをクリックして、新しいスタイルを「google.co.jp」用で作成します。 ↑ 適当に名前をつけてスタイルを書きます。 @namespace u
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
Webデザイナの労力を減らすCSS3の新機能 | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Inayaili de Leon氏がSmashing MagazineにTake Your Design To The Next Level With CSS3のタイトルのもとCSS3を積極的に使っていってはどうかという内容の記事を公開した。いつまでもあまり簡単とはいえないCSSハックを駆使したり、JavaScriptに依存した使い続けることに意味があるのか、というわけだ。 ただ、逆説的だが、妥当検証を通過できなくなるしブラウザごとに設定を追加する必要があるので使わない方がいいことはわかっているものの、Take Your Design To The Next Level With CSS3の冒頭ではまだ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
好きなサイトのCSSを簡単にカスタマイズできる「Stylebot」 | ライフハッカー・ジャパン
Loading...
拡張機能「Stylish」を使って「Firefox」のメニューやダイアログをすりガラス風にNOT SUPPORTED
https://turmali.org/2009/10/text-width/