ダイアリーのデザイン変更 / Meteor.js でスタイル変更作業 - naoyaのはてなダイアリー
この頃このダイアリーを時折更新していますが、改めて見てみるとデザインが野暮ったかったので、変更しました。Readability を通して読んだときのスタイルが非常に読みやすいので、そのスタイルをパ･･･参考にしました。 ちょっとまだ一部スタイルが当たってないところもありますが、基本はこの路線で。Chrome、Firefox、Safari では確認済み。Windows と Opera では見ていないのでどうなるかわかりません。 どうやって変更したか ダイアリーの管理画面にスタイルを入力してプレビューで･･･とちまちま変更していくのは流石に大変なので、やり方を少し工夫しました。先日触った Meteor.js を使って先に簡単なアプリを作って、そのアプリ上で変更してできあがった CSS を管理画面に貼り付ける、というもの。 以下、そのソース。 https://github.com/naoya/m
Javascript cssRules - とみぞーノート
1. 概要 Javascriptからスタイルシート内のルールを変更する処理のまとめ。スタイルシートそのものを変更したい場合は「Javascript 動的なCSSの適用」を参照。 2. スタイルシート関連のオブジェクト Javascriptからスタイルシートのルールを操る際に関係するオブジェクトを図1にまとめる。FireFoxとIEで若干扱いが異なるので注意が必要。 2.1 stylesheet オブジェクト まずドキュメント内のスタイルシートを扱うstylesheetオブジェクトがある。stylesheetオブジェクトはドキュメントが読み込んでいるCSSファイルや<style>タグで指定したCSS毎に存在する。 ドキュメント内のstylesheetオブジェクトは全てdocument.styleSheetsに格納されており、document.styleSheets[0]のようにして参照できる
style.cssText の使い処に関する考察 - IT戦記
cssText って知ってますか？ cssText っていいうのは CSSRule オブジェクトとか CSSStyleDeclaration が持っている情報を css ファイルに書く形式の文字列にしてくれる機能です。 乱暴に言ってしまえば、 css 系のオブジェクトが持っている innerHTML みたいなものです。 具体例を見てみましょう。 こんな感じの body があるときに <body style="margin: 1em; padding: 1em; border: 1em">....</body> こんな感じで使えます。 alert(document.body.style.cssText); // 'margin: 1em; padding: 1em; border: 1em' 簡単でしょう？(ボブ略 設定も出来ますよ こんな感じ // さっきの続き document.body
ppBlog official
こんにちは、martinです。日本に帰国して1年が経ちました。昨年は２月から新しい職場で働き始めたり、9月６日に第１子が生まれたりとバタバタな一年でして、まるでppBlogの開発・サポートが出来ませんでしたが、今年はなるべく時間を作ってppBlogをいじれたらと思っています。 世界中の皆さんにとって、良い年でありますように。 久しぶりのカキコ。 静的リンクでの挙動を変えています。URLのパスに日付情報などを含ませるように。まだ、いじっている段階なので、色々と不具合があるだろうけれど、まぁ気にしないと。 日付情報がある以外には、現状、PermaLink用の英数文字からなる記事タイトルを別に指定できたのですが、これはそのまま取っておくとして、そうでない場合は、記事のタイトルがそのままブラウザのアドレスバーに表示されるような感じにしてます（静的リンクが有効な場合ですが）。今時のブラウザならエンコ
getComputedStyle について調べてたら深みにハマったのでメモ - IT戦記
getComputedStyle とは！？ ある要素にどんなスタイルが当たっているかを計算してくれる。便利な関数。 使いかたはめっちゃ簡単！ var style = getComputedStyle(element, ''); alert(style.fontSize); // 14px alert(style.color); // rgb(0, 0, 0) ちなみに第二引数は疑似要素の style を取りたい場合に使います。通常は空文字列でいい。 でも、 getComputedStyle はこのままでは IE, Safari では動かない。 Safari では window(グローバル領域) に getComputedStyle は定義されてなくて、 document.defaultView だけに getComputedStyle が定義されている。 ちなみに、 Firefox, Op
主要ブラウザで動くCSSを追加する関数 - os0x.blog
GM_addStyleの実装と最適化 - 0xFFに関連して、「IEでGM_addStyleみたいな関数ってどう書けばいいんだろ」とつぶやいたら、fubさんにcreateStyleSheetってのを教えてもらいました。で、調べてみたらcreateStyleSheetとcssTextで割と簡単に書けるみたいなので、クロスブラウザな関数にまとめてみました。 addCSS.js function addCSS (css){ if (document.createStyleSheet) { // for IE var sheet = document.createStyleSheet(); sheet.cssText = css; return sheet; } else { var sheet = document.createElement('style'); sheet.type = 'te
The Man From Hollywood
is a Kinetic Type experiment that makes use of Advanced CSS selectors and CSS transitions*. The idea is based off of kinetic type videos that are usually created using After Effects, Flash, or other animation tools. Javascript is used, but minimally, really just to turn class names on and off. All of the animations are accomplished using CSS. *Disclaimer: This demo works only works on; Chrome, Saf
CSSを編集するブックマークレット - 素人がプログラミングを勉強していたブログ
SafariにはStylish相当のものがないので自分で書く。 リアルタイムに編集できるようにするとかなり動作が重くなるので、少し工夫してる。 javascript:(function () { var css_edit = document.getElementsByClassName('_css_edit'); if (css_edit.item(0)) { Array.prototype.slice.call(css_edit).forEach(function (elem) { elem.parentNode.removeChild(elem); }); return; } var t = document.createElement('textarea'); var s = document.createElement('style'); s.type = 'text/css';
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
