Home > Tag Cloud > blog

【 MyTrashCan 】 デスクトップのゴミ箱をプラカキャラにカスタマイズ！

【 MyTrashCan 】 デスクトップのゴミ箱をプラカキャラにカスタマイズ！

デスクトップに大きなゴミ箱を設置する 『 MyTrashCan 』 というソフトウェアがあるのですが、専用のアイコンを 猫谷美甘さん がプラカキャラで作ってくださいました！（*ﾟдﾟ*）ﾉｼ

コハちゃん が 『 Contract×Killer 』 のハジメで作ってくださいました！（*ﾟдﾟ*）ﾉｼ

無駄にゴミをポイポイしたり、はたまた空にしたりして、表情の変化をじっくりお楽しみいただけます。

カスタマイズの手順は以下のとおりです。
よろしければあなたのデスクトップをプラカで彩ってくださいねヽ（ゝω・）ノ

続きを読む

Date
2009-02-05 12:34
Category

リキッドデザイン問題は max-width と IE6 用 expression で解決

これらを読んで、改めて Web サイトの横幅とリキッドデザインについて考えてみました。

Before

100%幅のリキッドデザインだった頃
わたしも以前は 100% 幅のリキッドデザイン （ 可変幅 ） を採用していました。
画面全体を有効に活用出来、横スクロールも出ない、俺最高！ と。

ところがあるとき、「 ブラウザを最大化すると広がりすぎて見にくい 」 とのご指摘があり、その当時は 「 見にくいならウインドウ幅調節すれば良くね？ そのためのリキッドなんだから 」 と、特に問題視していませんでした。 わたしも最大化して見てはいますが、常にサイドバーを表示しているため、そう広すぎるとは思わなかったので。

しかし、［ ウインドウ幅をそれぞれのサイトに合わせて調節しながら見る ］ ことと ［ 横スクロールバーが表示される ］、どちらも ［ 普段の環境で快適に見られないことに対するストレス ］ という点において同列のものだと気付いたのです。

100% 幅の可変デザインの問題点は理解したものの、かといって固定幅は小さい画面に合わせると大きい画面で余白がありすぎて不恰好になってしまうし ･･････ という訳で出した結論は、

これらを採用する、というものです。

After

イラストの横幅最大値600px＋余白30px＋ボーダー6px
わたしのサイトはイラストサイトなので、展示するイラストの横幅の最大値 （ 600px ） を基準にします。 余白は左右 30px ずつ取り、ボーダーは 6px ずつ加えました。
モダンブラウザ用 CSS
div.sample {
	border-left  : 6px solid #E5E5E5;
	border-right : 6px solid #E5E5E5;
	min-width    : 660px;
	max-width    : 900px;
	width        : 82%; }
  • 最小幅は 672px （ 600px ＋ 余白 60px ＋ ボーダー 12px ）
  • 最大幅は 912px （ 840px ＋ 余白 60px ＋ ボーダー 12px ）
  • その中間では、ブラウザの表示領域の 82% の幅にする
IE6 用 CSS
* html div.sample {
	width : expression(document.body.clientWidth < 691? "671px" : document.body.clientWidth > 832? "812px" : "auto"); /* IE */ }
  • ブラウザの表示領域が 691px 以下の場合は 671px に
  • ブラウザの表示領域が 832px 以上の場合は 812px にする

ここで注意しておかなければならないのは、< 691? "671px" と > 832? "812px" を、< 671? "671px" > 812? "812px" のように 同値にしてはいけない ということ。 幅を変えるたびにブラウザが落ちて危険です。 なんというブラクラ。 少し余白を設けるように、数値に余裕を持たせてください。

参考リンク

イラストサイトである以上、イラストの最大幅よりも小さな表示領域の場合は横スクロールバーが出てしまうのは必至、と割り切りました。 max-width が min-width と 140px 240px しか違わないのは、［ 広すぎても読みにくい ］ ということから自分が読みやすいと感じる値を算出した結果です。

最小値と最大値に迷っている方は、BROWSIZE.ORG でご自身のサイトの閲覧者の実状を研究してみてはいかがでしょうか。 サイトの方向性によって結果がガラリと変わってくるので、他のサイトでの解析結果が必ずしも当てはまるとは限りません。

追記

min と max の差が僅かしかない。 意味が無いような ･･････。

はてなブックマーク - リキッドデザイン問題は max-width と IE6 用 expression で解決 - eclucifer blog

その ［ 僅かな差 ］ で横スクロールバーが出る Web デザインになったりするので、［ 僅かな差 ］ というのは重要な問題。 と思ったけれど、考えてみれば ［ max ］ なのだからもう少し広げても良い気がする ･･････ という訳で、100px 広げてみました。

おまけ

当サイトにおける過去一ヶ月のブラウザ利用状況 （ Google Analytics 調べ ） は以下のとおりです。

ブラウザ利用状況
ブラウザ利用状況
Internet Explorer バージョン別利用状況
Internet Explorer バージョン別利用状況

まだまだ IE 独断場といった感じ。 やっと IE7 が IE6 を追い抜いたばかりですが、来年の今頃、遅くても再来年には IE6 への対応に一手間掛けずに済みそうな伸びではあります。 やはり同梱のブラウザは強いですね。

画面解像度
画面解像度
ちなみに画面解像度の結果はこのとおり。 横幅だけでなく、縦幅も考えさせられる感じ。 ヘッダを大きくしすぎて肝心のコンテンツがスクロールしないと見えない、というサイトも結構あったりしますね。
Date
2009-01-15 19:06
Category

使用中の Firefox アドオンまとめ

Firefox で現在使用しているアドオンをまとめてみました。
不要なものを整理していて思い立った自分用のまとめヽ（ゝω・）ノ

アドオン

All-in-One Gestures
マウスジェスチャー機能を追加する。
ColorZilla
Web ページの任意の場所から色情報を取得するカラーピッカー。
Gmail Notifier
Gmail の新着メッセージを通知する。
Html Validator
リアルタイムに HTML の文法をチェックする。
Link Widgets
link 要素のナビゲーションリンク があるページの、prev / next / top などのリンクを辿れる。
Make Link　push!!
閲覧中のページのタイトルや URL を、リンク用 HTML としてクリップボードにコピーする。
Organize Status Bar
拡張機能によって追加されたステータスバーのアイコンを並べ替える。
Parent Folder
上のディレクトリに移動するためのツールボタンを設置。
pastego　push!!
クリップボードにコピーした URL を、ボタンをワンクリックするだけで開ける。
RefControl　NEW
サイトごとにリファラを設定する。 RSS リーダー で画像が表示されない場合などに役立ちます。
removetabs
タブをまとめて閉じるためのメニューとボタンを追加する。
Screengrab!
Web ページをキャプチャする。
Tab Mix Plus
タブ機能を拡張する。
はてなブックマークカウンタ
Web ページの はてなブックマーク 数とコメントを表示する。

Greasemonkey

Greasemonkey
公開されているさまざまなスクリプトを使用して、Web ページの見た目や機能をカスタマイズ出来る。
AutoPagerize　push!!
Google の検索結果や対応したサイトでページをスクロールした際に、自動的に次のページを読み込み下にどんどん表示していってくれる。

どんどんカユいところがなくなっていくのが快感でたまりませんね！
あとは 『 クリップボードにコピーした URL を一発で開く 』 系があれば最強なのだけれど。
ご紹介いただいた 『 pastego 』 で解決しました！ ありがとうございました！

Date
2009-01-09 23:03
Category

愛用しているフリーソフトまとめ

愛用しているフリーソフトをまとめてみました。
どれもすべてオススメなので、ご存知なかった方は是非お試しくださいヽ（ゝω・）ノ

ブラウザ

Firefox 2.0

最新版の3は随分様変わりしたようで、アップデートするのが面倒で2のまま。
昨年秋頃、数年愛用していた 『 Sleipnir 』 から乗り換えました。

以下のアドオンのおかけで乗り換え後も快適。 むしろより良くなりました。

Gmail Notifier
Gmail の新着メッセージを通知する。
Make Link
閲覧中のページのタイトルや URL を、リンク用 HTML としてクリップボードにコピーする。
AutoPagerize
Google の検索結果や対応したサイトでページをスクロールした際に、自動的に次のページを読み込み下にどんどん表示していってくれる Greasemonkey。
関連エントリー

イラスト制作

Yukari
綺麗に リサイズ・回転・減色 といえばコレ！ Photoshop 7↓で絵を描いている方に特にオススメ。 世界が変わります。
関連エントリー
BlastPNG
PNG のファイルサイズを減量する。
関連エントリー
BTJ32
グラフィックファイルのフォーマットを変換するコンバータ。 Photoshop や SAI で描いたものを一旦 24bit PNG 保存したあと、JPEG に圧縮するために使用しています。 綺麗で軽くなります。
関連エントリー

Web 制作

TeraPad
テキストエディタ。 シンプルすぎるものはカユいところに手が届かず、かといって多機能すぎるものは却って使いにくい。 程よく使い勝手の良い機能が嬉しいイチオシのテキストエディタです。
ToClip
あらかじめ登録したテキストを、ポップアップメニューから貼り付けられるツール。
頻繁に使用するリンク HTML を登録していると、ポップアップメニューから選択するだけで 『 <a href="/original/pcolors/" title="Plastic Colors - eclucifer original">Plastic Colors</a> 』 のように一発生成出来ます。 わたしは主に内部リンク用に使用していますが、タグや文字列を登録するのも効率 UP でオススメです。
FFFTP
FTP クライアントといえばコレ！ もう八年以上愛用しています。

その他

P3:PeraPeraPrv
Twitter クライアント。 おかげさまで快適ついったライフヽ（ゝω・）ノ
FlashPlayerEx
flv ファイル再生専用プレイヤー。 ニコニコ動画 から DL した動画を視聴するために使用しています。
窓の手
Windows の各種設定をカスタマイズする環境改善ソフト。 キーボード掃除機とマウス掃除機が地味に便利！

改めてまとめてみると意外と少なかった（ﾟεﾟ）
これはオススメ！なフリーソフトがありましたら、是非教えていただけると嬉しいです。

関連リンク

Date
2009-01-07 22:50
Category

WordPress のクイックタグ追加プラグインで楽々実体参照

『 HTML 実体参照変換ツールで楽々実体参照 』 に頂いた 「 WordPress に実体参照変換プラグインが欲しい 」 というコメントを見て、そういえば応用出来そうなものがあったようなと eclucifer bookmark » WordPress を探してみましたら、ありました！

本来はタグ補完用に使うものですけれど、クイック的な意味でいろいろな用途に応用出来そうです。

使い方

  1. 『 AddQuicktag 』 プラグインをダウンロード
  2. 解凍したフォルダをまるごと wp-content/plugins にアップロード
  3. プラグイン管理画面にある 『 AddQuicktag 』 を ［ 使用する ］ で有効化
クイックタグの追加と削除
  1. 『 AddQuicktag 』 プラグインの設定画面を開きます。
  2. ［ ラベル名 ］ には自分が判りやすいものを入力します。
    例では ［ < ］ ［ > ］ 補完のクイックタグを作成するため、［ <> ］ としました。
  3. ［ 開始タグ ］ には ［ &lt; ］ と、
    ［ 終了タグ ］ には ［ &gt; ］ と入力します。
  4. ［ 更新 ］ ボタンを押して設定完了です。
クイックタグが追加されました
新規投稿作成画面にクイックタグが追加されました。
開始タグを入力した状態
作成した ［ <> ］ タグをクリックすると、本文に ［ &lt; ］ と入力され、［ <> ］ タグの表示が ［ /<> ］ に変わります。
終了タグを入力した状態
もう一度 ［ /<> ］ をクリックすると、本文に ［ &gt; ］ と入力され、タグの表示が ［ <> ］ に戻ります。

変換するものが多い場合は 『 蓄々 HTML 実体参照変換ツール 』 にコピペした方が楽かもしれませんが、少ない場合や外部サイトを開く手間が面倒な場合に活躍しそうです。

関連エントリー

Date
2009-01-05 00:24
Category
Page 3 / 13«12345678»...Last

Tag Cloud