ぽんハウス BLOG: css

ラベル css の投稿を表示しています。すべての投稿を表示

2014/03/20

GlimmerBlockerでインラインフレームをブロック

（追記：2014.4.6）
更に追記なのですが、このエントリーがまったく無意味になってしまいましたので上部に追記します(笑)
公式のリファレンスを読むと、

gb.zapIframeElements();

この1行をtransformタブ内に書くだけで、すべてのインラインフレームを表示しなくなります…ああ、なんて簡単な＾＾；
（transformタブはAction: でWhitelist URL, optionally modifying contentを選択すると表示されます。）

また、JavaScriptのブロックも

gb.zapScriptElements();

を同様にtransformへ書き込むだけ｡
<head>内にCSSを書き込む場合は、

gb.addStyleElement(contents);

contentsはCSSの内容…を書き込むとそのページだけのユーザスタイルシートとして機能します。
例えばこんな感じ→gb.addStyleElement("body{font-size:100px !important;}");

これで大体の事はできそうですね。
他にも面白そうな物として、

replace(/regexp/, "some text");

これは、文字の置き換えに使えるので、NGワードを非表示するなどして利用出来ます。
簡単な物だと、replace(ほにゃらら, "");でページに含む「ほにゃらら」を非表示にできます。（もしかしたら""で囲む必要があるかも？）
ほにゃらら部分は正規表現に対応しているので、上手く書けば表記の揺れがあっても適応出来ますね。
上記の書き方だと最初に出てきた文字しか置き換えてくれないのですが、以下のように書くとマッチする物すべてに適応されます（グローバルサーチ）。
replace(/ほにゃらら/g, "");
ブラウザのキャッシュをクリアしないと確認出来ないので注意。

本当に奥が深いソフトです。
↓2014.3.20公開

2014/03/19

Chrome拡張StylebotでCSSのカスタマイズをして「注意」マークを付ける。

ふと、webサーフィン(笑)をしていて思ったのですが、読者に記事を募集し原稿料を払うという形式がニュースサイトなどにあります。
中には質がかなりいいかげんなライターも時折いて、誤情報やデマなどに振り回されない為に注意して記事を読むよう、そのライターの名前の前に「注」と大きく表示するCSSのカスタマイズをやってみました。

Google Chrome拡張機能の Stylebot を使って、サイト毎のカスタムCSSを割り当てることができます。
他には有名どころで Stylish なども同様のことができます。
Safariでも Stylish for Safari という機能拡張があります。

細かいインストール方法や設定は飛ばして、おおまかな内容の紹介。
カスタマイズしたいwebページに飛び、CSSボタンを押すとウインドウが開きます。
左上にあるボタンを押し、カスタマイズしたいwebページの箇所をクリック｡するとそこのCSS要素がSelect an Elementに代入されます。
あとは分かりやすいインターフェイスで書かれているので、CSSの知識がある人ならパッと見てすぐに解るかと思います。
CSSは良く分からないという人でも、ライブプレビューが出来るので、結果を見ながら簡単にいじる事が出来ます｡CSSの勉強にも役立つかもしれません。
もう少し自分で細かく設定したいという人でもCSSの直書きも出来るので、融通が利かなくて困る事はないかと思います。
もちろんこれを使って広告を表示させない事も出来ますよ｡

さて今回は注意したい要素に「注」を付ける…ということなので、Edit CSSに以下のソースを書いてみました。

a[href^='http://○○○']:link:before {
content: "注";
font-weight: bold ;
background-color: #f71912 ;
font-size: 300%;
}

リンク先が○○○のaタグの前に「注」を表示するCSSです。
この書き方は、リンク先によって表示方法を変えたい時に…リンク先がPDFや圧縮ファイルだったりする時にクリックしてしまわないよう区別をする時にも便利です。
例えばzipファイルだと、URLの最後が.zipになっているものという意味で、

a[href$='.zip']:link {
}

と正規表現で書く事ができます。

最後に､これを実際使って表示すると、この様な感じにデカデカと「注」という文字がwebページに加えられます。
beforeの替わりにafterだと後に付きます。

本当はこういう事をしなくても、常に気を付けてネットを回るという習慣を付ける事が大切なのでしょう｡

2011/01/14

WiFi Photo Transfer

http://bit.ly/eBiVUL：iTunesが起動します。

iPhoneのフォトライブラリにWebブラウザからWi-Fi接続でアクセス、ダウンロードできるiPhoneアプリ。

USBで繋げなくても転送出来るので気楽に使えます。

アプリを起動して表示されているIPアドレスをWebブラウザのアドレスバーに打ち込めばアクセス出来ます。iPhone側を固定IPアドレスにしておけば、ブックマークに登録してワンクリックでいけるので更に楽に使えます。

まとめて落とす時もzipにして転送してくれます。スクリーンショットのリンクに赤枠があるのは自分のSafariにカスタムCSSを適応させている為。

a[href$='.zip']:link {

border: 1px solid #f52712 !important;

display:inline-block;

}

ダウンロード先が分かりにくいwebサイトなどでも一目瞭然になります。もちろん.zipを.dmgなどにすればdmgなど他の形式でも対応するので、僕は他にも.jpgにも適応させています。