カテゴリー : 便利なWeb・Tool

国別アクセスカウンター「FLAGCOUNTER」

FLAGCOUNTERというサービスを使うと、どこの国から、どのくらい訪問者がいるのか?をカウントしてくれます。

FLAGCOUNTERサンプル

Free counters

Free counters

世界地図のパターンもあります。

Free counters map

Free counters map

FLAGCOUNTERは、以下から取得!
http://www.flagcounter.com

Adobe BrowserLabとは。ホットキー一覧

Adobe BrowserLabは、複数ブラウザでサイトがどのように表示されるのか?などのテストが一気にできるソフトウェア。
ブラウザーの表示を、単独で確認や、横に並べて比較、重ねて透かすことによりピクセル単位でズレを照合できる。

Adobe BrowserLab

Adobe BrowserLab onion skin view

Adobe BrowserLab onion skin view

対応ブラウザは、
Internet Explorer(Windows)
Firefox(WindowsMac OS X)
Safari(Mac OS X)
Chrome(Windows)

主要なブラウザは網羅されていますね。
Adobe BrowserLabがあればかなり作業時間の削減できそうです。

ホットキーを覚えてさらに効率的に作業を進めましょ。

Adobe BrowserLab ホットキー一覧

ホットキー 用途
選択しているBrowser Sets内の、次の環境へ
選択しているBrowser Sets内の、前の環境へ
+ 拡大
- 縮小
1 1-up Viewで表示
2 2-up View(横に並べて)で表示
3 Onion Skin View(重ねて)で表示
左側で選択している環境の結果を強調して表示(ホットキー「3」Onion Skin Viewで表示している場合のみ)
右側で選択している環境の結果を強調して表示(ホットキー「3」Onion Skin Viewで表示している場合のみ)
R ルーラーガイドの表示・非表示切り替え
Ctrl/Command キーを押しながらマウス操作で、画像をつかんで移動
Shift キーを押しながらマウス操作で、もう一方のスクリーンショット上にマウスカーソルを表示
(2-up Viewで表示している場合のみ)

ニコンRAWファイル「NEF」をPhotoshopで開く

ニコンRAWファイル「NEF」をPhotoshopで開くためのメモ。
デジタル一眼レフカメラRAWフォーマットはカメラごとに違っています。

今回仕事でニコンのNEFファイルをもらって手こずりました。

Adobe DNG Converter6.2
RAWファイルをDNGにコンバートしてくれます。
これでPhotoshopで開けるようになります。

Adobe Camera Rawアップデート
Adobeサイトのダウンロード→アップデート内のCamera Rawを選択して、最新バージョンをダウンロードしてインストール。
現在バージョン6.2。(リリース2010/08/31)
PhotoshopCSだと、自動でCamera Rawアップデートしてくれるみたい。
私は、自動アップデート切ってたので、手動で入れました。

カメラによって、RAWファイルの中身が違ってたりするので、新しいカメラに対応するために、アップデートはときどきしておくと良いですね。
(いつも忘れるんだけど。。。)

ちょっと変わったCSSメニューボタン

Cool Sprites – Free overlapped CSS menu using CSS Sprites
CSS3 メニューボタン sprite

このボタンの画像ファイルがHTML、CSS、PNGのファイルがセットでダウンロードできます。

Sample HTML Code

<div class="navi1">
  <ul>
    <li class="sm1"><a href="#"></a></li>
    <li class="sm2"><a href="#"></a></li>
    <li class="sm3"><a href="#"></a></li>
    <li class="sm4"><a href="#"></a></li>
    <li class="sm5"><a href="#"></a></li>
  </ul>
</div>

Sample CSS Code

.navi1 {
    display:block;
    height:72px;
    margin:0 auto;
    position:relative;
    width:525px; }
.navi1 ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.navi1 ul li {
    background-image:url(tab-1.png);
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.navi1 ul li a {
    display:block;
    height:100%;
    width:100%; }
.navi1 ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.navi1 ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.navi1 ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.navi1 ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.navi1 ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.navi1 ul li:hover {
    z-index:1000; }
.navi1 ul li.sm1:hover {
    background-position:0 -75px; }
.navi1 ul li.sm2:hover {
    background-position:-125px -75px; }
.navi1 ul li.sm3:hover {
    background-position:-249px -75px; }
.navi1 ul li.sm4:hover {
    background-position:-373px -75px; }
.navi1 ul li.sm5:hover {
    background-position:-498px -75px; }

PSDファイルもダウンロードできます。

CSS3メニューボタン「CSS Menu Maker」

css3 ボタン

CSS3のメニューボタンを簡単に作成してくれるソフトウェア「CSS Menu Maker」
これがあれば、簡単にボタンを出力してくれます。
フリーウェアです。
CSS3のみでボタンが作られるので、SEO的にも良い。
サポートブラウザは、FireFox、Chrome、Safari、Opera、IE(IE6は除く)に対応。
対応OSは、WindowsとMac。

CSS3 Menu. Free CSS Menu Maker

便利です。

カワイイCSS3のボタン

CSS3 BonBon Sweet
BonBon Sweet CSS3 Buttons

カワイイCSS3のボタン。
CSS3のみを駆使してこのようなボタンを作っています。
ダウンロードして、いろいろ数値などを変更してみると立体感や形、光沢の具合が変わります。
CSS3のみでボタンが作られているのでSEOにも優しいです。
ブラウザごとに少し見た目が変わります。
ちょっと勉強で試してみるのもいいかもしてません。

私もHTML5やCSS3に全然ついていけていないので、勉強中です。
もっと早く勉強しておけばよかったぁ

HTML5 サイトリンク集『HTML5 Gallery』

ギャラリーサイト『HTML5 Gallery』ではHTML5で作られたサイトをまとめて紹介しています。

html5gallery

html5 gallery


HTML5 Gallery

HTML5のサイト制作するのに、参考になるかも。
頻繁に更新してます。

WordPress『フリーテーマの暗号化を解除』

WordPressの無料テーマを使っていて、「テーマの編集」をしようとしたら、暗号化されてて困った。
という経験ありませんか?

暗号されている中には、もしかすると、スパム的なリンクが仕込まれているかもしれません。
他のサイトで使っているテーマのfooter.phpが暗号化されていまして、かなり困りました。
修正するにしても、「どうやって暗号を解除するのか?」と困っている方もいると思います。(私とかね。)

探してみたら、暗号化されているコードを複合化してくれるサイトがありました。

php $_F=__FILE__;$_X= Byterun Decoder

php $_F=__FILE__;$_X= Byterun Decoderにアクセスして

$_F=__FILE__;$_X=この部分を入力します。

「Decode This Rubbish」ボタンをクリックして復号化してくれます。

あとは、ソースを見てスパムっぽいところを修正できますね!

フリーソフト「データ復旧」 Windows7対応まとめ

パソコンにはトラブルがつきものです。
ファイルを誤って削除してしまい、ごみ箱にも入っていない状態になってもデータを復旧させることができるフリーソフトをご紹介します。
データ復旧ソフトはWindows7対応のものだけをまとめました。


GlaryUndeleteデータ復旧ソフト

Glary Undelete(グレイリー・アンデリート)
パワフルなリカバリソフトです。
外付けHDDやUSBメモリにも使用できます。
ごみ箱から削除したファイルはもちろん、クラッシュやウイルス感染によって削除されてしまったファイル等々、トラブルによって消えたファイルを、元通りに復旧してくれるソフトです。
簡単な操作で検出&復旧できます。
インストールの時に言語を「Japanese」を選ぶだけで日本語にできるのもうれしいですね。


EASEUS delate file recovery

EASEUS Deleted File Recovery
ごみ箱から削除したファイルはもちろん、クラッシュやウイルス感染によって削除されてしまったファイル等々、トラブルによって消えたファイルを、元通りに復元してくれるソフトです。
サムネイルや専用ビューワでファイルを確認しながら復旧させることができます。


SoftPerfectFileRecover データ復旧ソフト

SoftPerfect File Recovery
軽量でシンプルなリカバリソフトです。
FAT/NTFSでフォーマットされていればメディアやドライブの種類に関係なく使用できます。
ごみ箱から削除してしまったファイルなどを簡単に復旧してくれます。
ただ、クラッシュなどの用途には不向きかも知れません。
操作ミスなどで削除してしまったファイルを復旧させる目的で使うと良いと思いますよ。


ShadowExplorer
Windows Vista の Ultimate、Business、Enterpriseで提供されている機能「シャドウ・コlピー(VSS)」を使ってファイルを復旧させるリカバリソフトです。
シャドウコピーによって作られたバックアップファイルをリスト表示し、任意のファイルを復旧させることができます。
復旧したいファイルの日時がわかっていれば、便利かと思います。


すべてのリカバリソフトがそうですが、100%ファイルを復旧できるわけではありません。
パソコンがトラブルに見舞われる前に、普段から重要なファイルはバックアップしておきましょう!
バックアップのソフトは、HDD丸ごとバックアップソフトのまとめを参照してみてください。

WEBデザイン レイアウトの時に便利なサイトたち

黄金比

黄金比レイアウト「golden_ratio」

黄金比「golden_ratio」


golden ratio

黄金比とは、最も美しいとされる比「1:(1+√5)/2」のこと。
近似値は1:1.618。約5:8になります。
「Golden Ratio Calculator」は黄金比をWEBデザインで簡単に利用できるWEBツールです。
ただ、数値を入力するだけで、黄金比の計算してくれます。

ちなみに、名刺は黄金比です。

余談ですが、黄金比はジョジョ好きならご存じのスティールボールランの鉄球や爪弾をアワーアップさせたヤツです。(めちゃくちゃ余談…)

グリッドレイアウト

グリッドレイアウト「grid calculator」

グリッドレイアウト「grid calculator」


grid calculator

グリッドレイアウト「grid system」

グリッドレイアウト「grid system」


Variable Grid System

グリッドレイアウトとは簡単にいうと、いろいろと種類がありますが、グリッド分けして、写真やイラスト、テキストエリアなどのパーツを整理して美しく見せるレイアウトの方法です。
かっちりと融通のきかないものも、可変的なものもあります。
最近は可変グリッドのスクリプトなんてのもよく目にしますね。

上記サイトは、基本となるグリッド分けを行うときに便利なサイトです。

白銀比

白銀比レイアウト「レイアウトの小技」

白銀比レイアウト「レイアウトの小技」


レイアウトの小技

白銀比とは1:1.414の比率のこと。
日本では白銀比が古くから使われています。
法隆寺や四天王寺や、生け花の美のバランスにも採用されていたりします。
身近なものではA3、A4の用紙の縦横の比率です。
A3を半分に折ってみるとA4の大きさになります。
WEBデザイン 制作に役立つ無料サービス・ツールまとめ


いろいろなレイアウトの比率だったり方法があります。
どんなデザインにするのか、
迷った時やバランスがどうしても悪いといったときに使ってみてはどうでしょうか?
どれも実績があり認知されているものなので、WEBのデザイン案を捻りだせなくなったら頼ってみるのも手です。
説明するときは説得力もあるし良いかも!?

WEBデザイン レイアウトの時に便利なサイトたちでした。