「WorkFlowy専用Firefox」に追加しているアドオンとその役割の整理（2015/08段階）
1．はじめに この記事では、現時点で、私が「WorkFlowy専用Firefox」に追加しているアドオンを整理します。 最初に現状を整理して、次に気になっていることややりたいことをメモします。 最後に、現在「WorkFlowy専用Firefox」を使っている方々に向けた、ちょっとしたお誘いがあります。 「WorkFlowy専用Firefox」によって、パソコンからのWorkFlowyを、さらに強力なツールに育て上げる（Windows&Mac） 自分のWorkFlowyを育てる。「赤坂シナモンの地下迷宮」へと続く試行錯誤の中間報告。 2．彩郎の「WorkFlowy専用Firefox」を強化する4つのアドオン 2015年8月現在、私が「WorkFlowy専用Firefox」に追加しているアドオンは、次の4つです。 Stylish ShortcutKey2URL Thumbnail Zoom P
WorkFlowyの見た目アレンジが素晴らしすぎた | 今、夢に生きる
WorkFlowy。 とっても便利なクラウドアウトライナーです。 ToDoリストとして使う、プロジェクトを細かいタスクに分解するのに使う、アイデアを膨らませるのに使う、文章を書くのに使う、などなど、さまざまな活用法ができる便利ツール。 機能的には、とってもいいんですが、私には一つ大きな不満がありました。 それは、「味気ない」 「さわり心地」を求めたい こういうのを全然気にせず、「機能がよければいい」という人もいるかと思うんですが、私はダメなほうです。 ツールは、使っていて楽しくないと嫌だなぁと思います。 アナログの手帳なら、触り心地とかすごく気になりますし、デジタルツールでも、見た目はすごく気になります。 気になるというか、そこが寂しいと使う気が失せてくるんですよね。 WorkFlowyはとても魅力的なツールなので、しばらく味気ないのを我慢して使っていたんですが、先日とうとう限界を迎えて、
[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！
俺のためにWeb開発者は俺にとって読みやすいフォント指定をするのだ！ 指定方法は下にあるぞ！ 新規でサイトを制作するのに基本のフォント指定を持っていなかったので 色々調べたり、このブログのフォント指定を変更してみたりしたら 実は Arial より Verdana のほうが見やすいことがわかってしまった。 さすがMicrosoftがコンピュータ用ディスプレイ上での視認性向上のために 作ったフォントだ！Verdana - Wikipedia フォント周りのオススメの指定追記記事により良い指定を載せたのでこちらは掲載終了しました。 font-family めっちゃ長い！何故かと言えば環境によっては指定したフォントがインストールされていない可能性があるから。 だから指定したいフォントを優先順位つけて記述する。左にあるフォントが一番優先順位が高い。 余談だけどfont-size(文字サイズ)とlin
Chromeの機能拡張 -Responsive Inspector | コリス
レスポンシブの確認ツールの多くは単にブラウザのサイズを変更して確認するだけですが、レスポンシブがスタイルシートで定義されているかに基づいてページの確認ができるChromeの機能拡張を紹介します。
プレゼン資料用のメタ言語ってどうだろう
メインマシンをMacBookに変えてから、プレゼン資料を作るためにいちいちParallelsからPowerpointを立ち上げるという作業がうっとうしくなって来た今日この頃である。もちろん、Keynoteを使うという方法もあるがファイルの互換性の問題があるし、Google Docsでは見栄えが悪い。 「誰かがすでに作っているだろうな」と思いつつHTML+CSS+JavaScriptで作ってみたのがこれ（クリックすると次のスライドに進む）。 手持ちのバージョンのSafari、Opera、Firefox、IEでは動作確認済み。iPhoneでももちろんちゃんと動く。フォントの大きさはダイナミックに計算しているので、全画面でブラウズしてもそれなりに動く。 まだまだ機能的に不足している部分はたくさんあるが、こんな形で作っておけば、ブログでの公開も簡単だし、見た目はCSSしだいでなんとでもできる。ある
シンプルなもう一つのCSS Framework「inuit.css」 - ゆーすけべー日記
ワディットのHPを改修する際に使ったんだけど、最近気に入ってるCSS Frameworkが「inuit.css」。CSS Frameworkは便利なんだけどどうしても使っていると「それっぽさ」が出ちゃうので（特にTwitter Bootstrapなんかｗ）こまめにみんなが使ってないようなものを探している。 inuit.cssそれ自体は非常に簡素なもので、コアのcssオンリーだとgridレイアウトすら対応してない。ただHTML5の要素の記述もある。特徴としてデフォルトで使っても文字が非常に読みやすいことがあり。大きさ、フォント、マージン、色非常にバランスよく配置、設定されている。また、イメージをマージンつけて左側に回り込ませて配置するといったちょっとしたユーティリティな使い方ができる。img要素にclass="left"を付ければOK。 <p> <img src="http://yusuke
[CSS]シンプルなHTMLで実装するダイナミックなサイトマップコンテンツ
<ul> <li><span>Fruit</span> <ul> <li><span>Apples</span></li> <li><span>Oranges</span></li> <li><span>Watermelons</span></li> </ul> </li><!-- Fruit --> <li><span>Vegetables</span> <ul> <li><span>Leaf Vegetables <a href="linktothisitem">#</a></span> <ul> <li><span>Arugula</span></li> <li><span>Cabbage</span></li> <li><span>Lettuce</span></li> <li><span>Spinach</span></li> </ul> </li><!-- Leaf Veget
公式のはてなブックマークの数値表示がカッチョわるいので、テキスト表示させるJavaScriptを書いてみた。 – 和洋風KAI
嗚呼・・・。公式のはてなブックマークの件数表示。 これ非常に便利なのですがMSゴシック体で表示されるため、Mac環境だとフォントが上の画像のように合わずしっくりこないのが玉にキズ・・・。アンダーラインもあわねぇ。サイズもあわねぇ。車もそんなに走ってねェ・・・。 というわけで、見た目をしっくりさせるためにテキストではてブ数を表示させるJavaScriptを@akio0911さんにアドバイスをもらいつつ書いてみました。 追記：書きなおしてみました! 「先日書いた"はてブ数"をテキスト表示するJavaScriptがカッチョ悪かったのでシンプルに書きなおしてみた。 | 和洋風◎」 参考にしたのは @amachang さんの記事。 HTML だけで、件数を埋め込む例を書いてみたよ！やり方は簡単callback パラメータに document.write を指定するだけ！ 引用元：新はてなブックマーク
CSSで「折り返す」pre
■ tDiary: この期に及んでspamフィルタを導入していない人は どういう人なのかな。 ツッコミ通知メールを使っていない(ので気づいてない) 自分の日記はRSSリーダに登録してない(ので気づいてない) 単なる面倒くさがり屋さん 未対策の日記は(RSS経由では)読むに耐えないので、どんどん購読先から消えてもらっているのだが。もったいない。せめてここのフィルタくらいは入れてくれないだろうか。簡単だからさ。 追記 書き漏らした「理由」: spamをまだ受けていない(でも予防措置はしておいた方がいいよね) そもそも日記を放置しっぱなしで更新していない(ので気づいてない) ■ CSS: 「折り返す」pre 人が作ったtDiaryのテーマをつらつらと見ていたら、見慣れぬ属性が書いてあった。こんなの。 white-space: -moz-pre-wrap; /* Mozilla */ white-
Mozilla Re-Mix: Google Readerのデザインをいい感じにできるユーザースタイルやスクリプトあれこれ。
スタンドアロンアプリとしてのフィードリーダーは、基本的にそのルックスを変更することは難しく、ある程度妥協して使うしかありませんが、ローカルアプリにも負けない機能を持ったGoogle リーダーなら、そのスタイルを手軽に変更することが可能です。 今回は、そんなGoogle リーダーのUIを手軽に変更できるユーザスタイルやGreasemonkeyスクリプトを6つピックアップしてご紹介したいと思います。 1.Pure Reader（Greasemonkey） safari用拡張機能からの派生で、"Pure"の名の通りホワイトグレーを基調としたシンプルかつクリーンなUIに変更することができます。 Greasemonkey版以外にFirefoxアドオン「Pure Reader for Firefox」も公開されています。 2.Google Reader for Snow Leopard Improve
[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル
階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></
Mozilla Re-Mix: 閲覧しているページのCSSをリアルタイムに編集して状態を維持できるGoogle Chromeエクステンション「Stylebot」
ウェブページは、管理者の好み、使い勝手、企業イメージなどにより、様々なスタイルで表示されるようになっています。 しかし、ユーザーは各サイトのスタイル全てを受け入れているわけではなく、中には文字が小さい、目がチカチカする、行間が狭いなど、様々な不満要素があるものです。 こうしたスタイルは基本的に管理者側で決定するものですので、不満だからと言ってどうすることもできないのが普通ですが、お気に入りのサイトのあの部分を修正できれば・・という気持ちになったことは誰しもあるはずです。 そんな風に考えたことがあるGoogle Chromeユーザーなら、「Stylebot」という拡張機能を使うことでこうしたサイトをもっと閲覧しやすくすることができます。 「Stylebot」は、表示しているサイトのスタイルをユーザー側で変更し、変更後は常にそのスタイルで表示することができるようになるという拡張機能です。 拡張
はてなブログ | 無料ブログを作成しよう
南関東の「いろんなところから富士山が見える」状況に驚きつづけている 大阪から東京に引っ越して３０年以上経つが、じわじわと蓄積されてきた驚きがついに閾値を超えたので筆を執った次第である。正確には「ポメラ DM250を起動してmenuキーを押して新規作成を選んだ」のだが、ポメラを持っていなかったら、さらに驚きが蓄積されていないと…
Google カレンダーのフォントサイズを調整する方法 - 風待ち日記
日本語版になって嬉しい反面、なんだかフォントサイズが大きくなったと感じているユーザーの方も多いでしょう。そんな悩みもFirefoxとユーザースタイルシートを使うことで解決します。以下はFirefoxのuserContent.css（ユーザースタイルシート）を編集してフォントサイズを調整する手順。 まずは以下のフォルダを開きます。 Windows 95/98/Meの場合は C:\Windows\Application Data\Mozilla\Firefox\Profiles\（英数字）.default\chrome\ Windows 2000/XPの場合は C:\Documents and Settings\(ユーザー名)\Application Data\Mozilla\Firefox\Profiles\（英数字）.default\chrome\ この場所にあるuserContent-e
「なぜ CSS が巨大になってしまうのか、なにがいけないのか」 - by edvakf in hatena
Nicole Sullivan さんの素晴らしいプレゼン。 5 Mistakes of Massive CSSView more presentations from Nicole Sullivan. 内容は30分ぐらい。ビデオのほうが分かりやすいのでおすすめ。だいたいスライドの35ページ目まではあんまりおもしろくないので飛ばしてもいいと思う。 スライド中に出てくる衝撃的な統計は、Sullivan さんのブログにもまとめられているのでご一見を。 Top 5 Mistakes of Massive CSS | Stubbornella 要旨 CSS の「ベストプラクティス」は間違っている。 プレゼンでは Facebook の例を挙げているけど、例えばサーバー側のロジックでは、ページヘッダー、右コラム、中央、左コラム、フッター、のようにビューを分けるところだけど、CSS をそのような区分でデザ
[CSS]CSS3グラデーションの表示サンプルと指定方法のまとめ
現在、Firefox, Safari, Chromeで利用できるCSS3グラデーションの表示サンプルと指定方法のまとめをDynamic Driveから紹介します。 CSS Library:CSS3 Linear Gradients 下記は各ポイントをピックアップしたものです。 CSS3グラデーションの基礎知識 CSS3グラデーションをサポートしているブラウザは現在のところ、下記の三つです。 Firefox 3.6+ Safari 2+ Chrome CSS3グラデーションの対応エレメントは、下記の二つです。 background background-image CSS3グラデーションの指定方法はmoz系（Firefox）とwebkit系（Safari, Chrome）で異なり、下記のようになります。 moz系
plaintxt.org
Contents Introduction Themes Experiments (Plugins) Miscellaneous License Terms of use Introduction Once upon a time, I was an actively developing themes and plugins for WordPress. No more. No, I have since moved on to other projects. And while this site is no longer updated, I want it to remain because when I was developing for WordPress, I found referencing other themes and plugins useful, even n
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.dynamicdrive.com/style/csslibrary/item/css3_linear_gradients/
Google Code Archive - Long-term storage for Google Code Project Hosting.
the-golden-grid - Project Hosting on Google Code