Recent Entries

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Google 画像検索でサイズとファイルタイプを特定する方法

Googleの画像検索をよく利用する方必見です。
画像のサイズとファイルタイプを特定してイメージ検索が出来ます。

Google 画像検索

Googleの画像検索の検索窓に以下の文字を入力します。

imagesize:WIDTHxHEIGHT filetype:○ 検索する物

WIDTHは画像の幅、HEIGHTは画像の高さです。(xは小文字のエックスでOK)
また、filetype:の後にはjpg、gif、pngなどのファイルタイプを指定出来ます。(無くてもOK)
最後に検索する物を入力します。(日本語OK)
それぞれを半角スペースで区切ってね。

全て入力し終わったら最後に[画像検索]ボタンを押してみましょう!

関係無いサイズの画像、関係無いファイルタイプの画像を見事にフィルタリングしてくれます。
私はあんまりGoogleのイメージ検索を使わないけど、使う人にとってはメチャクチャ便利なんじゃないかなぁ。

画像収集が好きな方はぜひお試しくださーい!

スポンサーサイト

speed.ioでインターネット回線の速度をチェック!

自分のパソコンの回線速度を知りたくなりませんか?
契約したプロバイダからどれ位の速度が出るか聞いていると思いますけど、実際にその通りの速度が出ているとは限りません。
また回線の混み具合によるので毎日違うかもしれません。

speed.ioを利用すれば簡単にインターネット回線の速度をチェック出来ます。
Webサービスなので何もダウンロードする必要はないので初心者にも簡単です。

speed.io - Internet DSL Speedtest

speed。io

speed.ioでチェックできるもの

  1. ダウンロード速度(DOWNLOAD)
  2. アップロード速度(UPLOAD)
  3. 1分間の接続回数(CONNECTS)
  4. 平均PING時間(PING)
  5. プロバイダ(PROVIDER)
  6. IPアドレス(IP-ADDRESS)
  7. Webブラウザ(BROWSER)

speed.ioにアクセスしたら、「Sart SpeedTest」をクリック!
すぐに速度チェックが始まるので、黙ってみていましょう。
途中で止めたい時は、「Abort SpeedTest」をクリックしてください。

結果画面の左下にある「AS TEXT」、「AS GRAPHIC」をクリックすると結果を貼り付けたりできます。
まぁ、貼り付ける方もあまりいないとは思いますけど。

speed.ioの結果貼り付け

AS TEXT : 単なるテキストで結果を表示。
AS GRAPHIC : 画像で結果を表示。

speed.io - Der DSL Speedtest
(画像で表示するとこんな感じ。WEBSITE LINK使用。)

回線速度にはダウンロードとアップロードがありますが知ってますよねぇ。
自分のパソコンにデータを取り込む事がダウンロード(下り)で、自分のパソコンからインターネット上にあるサイトにデータを送る事をアップロード(上り)と言います。
まぁ、これ位覚えとけば良いでしょう。

speed.ioの他にも回線速度チェックのWebサービスはたくさんあるので色々探してみてください。
speed.ioはメーターがカッコいいのでお気に入りです。ただそれだけ・・・。
回線速度を○○級とか何かに例えたりするサービスもあるので下のリンクもあさってみてね。

SearchLoad OptionsはFirefoxの検索バーを常に初期状態に戻すアドオンです。

SearchLoad OptionsはFirefoxの上部にある検索バーをよく使く方にお勧めのアドオンです。 特にFirefoxの検索バーにいつくもの検索サービスをゴチャマゼにしている方はぜひ読んでみてください。

Firefoxの検索窓

私は、この検索バーを良く使います。呼び方は検索窓でも良いです。
というより、ほぼすべての調べ物をこの検索バーから行っています。
ですから、Google検索、Yahoo!検索、msn検索、e-words、翻訳、はてな、動画、知恵袋などなど様々な検索エンジンを登録しています。

検索エンジンの切り替えは横のファビコンをクリックするだけなのでとても簡単です。
でも、たまに普通のWeb検索したいのに翻訳サービスにしたままで失敗する事があります。
連続して調べる時はこのようなミスはしないのですが、少し間を置くと忘れちゃうんですよね・・・。

あーぁ、勝手にデフォルトのGoogle検索に戻らないかなぁ~

はい、キタ――(゚∀゚)――!!

なります、出来ます、超簡単に!

Firefox用 アドオンのSearchLoad Optionsを使えば自動的に検索窓の検索サービスをデフォルトに戻せます。

ダウンロード ダウンロードはこちらから。
SearchLoad Options :: Firefox Add-ons

SearchLoad Optionsのインストールが終了したら、検索バーのアイコンをクリックして、「検索のオプション」をクリックしましょう!
(検索バーの管理ではありませんよ。)

このような検索オプションのウィンドウが開きます。
SearchLoad Options

検索オプションの設定

検索バーを一掃
検索バーに書かれた文字を消去してくれます。
チェックした場合は、消去するまでの時間を設定しましょう!
「検索バーが動作中なら取り消す。」は、読んだ通りの意味です。
検索エンジンを初期化
検索バーに登録されている検索エンジンの中から初期状態(デフォルト)となる検索エンジンをリストから選択することにより、どの検索エンジンに変更してても設定時間が経つと初期状態(デフォルト)に戻るようになります。
「検索バーが動作中なら取り消す。」は、読んだ通りの意味です。
検索の読み込み先
■前面のタブ
現在アクティブなタブに検索結果を表示します。
連続で検索する時に便利。

■新しい前面のタブ(デフォルト)
新しいアクティブなタブを作ってそこに検索結果を表示します。
これが一番使いやすいかな?タブの増えすぎに注意!

■新しい背面のタブ
新しい非アクティブなタブを作ってそこに検索結果を表示します。
いらないでしょう・・・。
新しいタブに関する例外
新しいタブを作る際に「検索の読み込み先」の設定から除外するタブの種類を選択します。

■空白のタブ
空白のタブに上書きして検索結果を表示します。

■ホームページ
ホームページを設定すると、自分で設定してあるホームページ(起動時に開くページ)が表示されている時に上書きで検索結果を読み込みます。

このようにSearchLoad Optionsでは、検索結果を表示するタブの設定まで出来てしまいます。
設定時間を色々と変えて自分に合ったタイミングを探しましょう!
検索エンジンの間違いが無くなってイライラ解消でーす!

vertical-alignで画像に並ぶ文字の縦位置を指定する

FC2ブログでは文字と絵文字の縦の位置が丁度いい感じになってくれます。
自然と文字と絵文字の縦位置が中央で揃うとでもいいましょうか。
自分で用意した小さな画像などを使うと気づくのですが、これ普通にしててもなりませんよ。

← FC2ブログの絵文字はこんな感じです。

← 普通だとこうなるはずなんですよ。

違いがわかりましたか?ズレてるでしょ?
普通は画像の横に文字を入力すると下の例のように画像の底に文字が並びます。
好みもありますがどちらかと言えば上の方がしっくりくると思います。

そこで今回はFC2ブログの絵文字がなぜちゃんと揃うのか説明します。
簡単な事なんですが、絵文字にはあらかじめ「emoji」というclassが設定されています。
そして、そのclassには「vertical-align:middle;」というスタイルが設定されています。

この「vertical-align:middle;」というのが答えです。
vertical-alignは、縦方向の表示位置を指定するプロパティです。
そして、middleという値は画像横の中央に文字列を表示するというものなんです。

ですから、簡単に文字と絵文字が揃うんです。
確認してみてください。
絵文字を使うと[emoji:v-16]というような変な文字が入力されます。
その状態で、一度記事を下書き保存してみましょう。
すると、

<img src="http://blog-imgs-1.fc2.com/image/v/16.gif"  class="emoji" style="border:none;" />

というhtmlタグに変わるのです。

よくタグを見てください。まず、URLはその絵文字のアドレスです。
その他に「class="emoji" style="border:none;"」が追加されているのがわかりますね。
(border:noneは枠線無しという意味です。)

「テンプレートの設定」からCSSファイルを見てみましょう。

.emoji{vertical-align:middle;}

このような記述がきっとあるはずです。(無いと絵文字がちゃんと並びません。)
FC2ブログのテンプレート作る時には必須かな!?

このようにして我々(FC2ブロガー)は、簡単に絵文字を使う事が出来るのでした。
まぁ、知ってても知らなくても普通に使う分には関係ありません。
CSSを弄った時には消さないようにしましょう。(絵文字使わなければ要らないけど・・・。)

「class="emoji"」の有効利用

せっかく元からCSSに設定してあるので、自分で用意した画像にも使ってみましょう。
どう使うかというと、任意のimgタグに「class="emoji"」を追加するだけです。

実は私も良く使ってます。
自分で用意した画像を文字の頭に付けて使う時なんかに重宝しますよ↓

vertical-alignサンプル

あまり大きな画像の時には逆に変な場合もあるので注意しながら使いましょう。

また、vertical-alignには他にも値がありますのでついでに軽く説明しておきます。
あまり使わないと思うけどね・・・。

vertical-alignの値

baseline
emoij.png ← baselineです。何も設定しない場合はこれになります。
top
emoij.png ←topです。
middle
emoij.png ← meddleです。
bottom
emoij.png ← bottomです。
数値(単位付き)
emoij.png ← 20pxを設定をしました。

基準はbaseline(底)です。
正の数だと画像が上へ、負の数だと画像が下へ移動します。
パーセント(%)
emoij.png ← 20%の設定をしました。

基準はbaseline(底)です。
行の高さを基に正の数なら上へ、負の数なら下へ移動します。

(text-top、text-bottom、super、subはなんじゃもんじゃで省略してます。)

わかりやすく大きめの画像を画像を用意しました。
まぁ、こんな感じです。
一見使い勝手が良さそうなプロパティですが、何にでも効くではないので注意しましょう!

尚、vertical-alignプロパティを適用できるのは、インライン要素とテーブルセルであり、ブロックレベル要素には適用できません。従って、 vertical-alignプロパティでボックス全体の縦方向の配置や、ブロックボックス内のテキストの縦方向の位置などを制御することはできません。

vertical-align-スタイルシートリファレンスより引用

<div>とか<p>などはブロックレベル要素です。
<span>や<img>はインライン要素になります。(だから絵文字で使えるのです。)
詳しく知りたい方はこちらのサイトがとてもわかりやすいですよ↓

The Web KANZAKI - ブロックレベル要素とインライン要素

詳しく知っちゃうとうちのブログが段落(<p>)使ってないのがバレちゃうけどね。シーッ! d( ゚ε゚;)
今度一気にマークアップ修正するかもー!(2009/4/14 修正完了!)

要するに何でもかんでも揃うと思ったら大間違いよって事ですので。
使える機会がありましたら、お試しください。

WebWaitでWebサイトの表示時間を簡単にチェックする

自分のWebサイトの表示速度がどれ位なのか気にしていますか?
あまり長いこと待たせると訪問者側から嫌われてしまいますよ。
折角良い記事を書いててもページが表示する前に帰られては意味がありません。

まぁ、自分でWebブラウザを使って開いてみれば速いか遅いかはすぐわかると思います。
では、他のWebサイトなどと比較する時はどうしたら良いでしょうか?
そうです、Webページの表示時間を数値化するのです。

というわけで、自分のWebサイトの表示時間を簡単にチェック出来るWebサービスをご紹介します。

WebWait - Benchmark Your Website

このWebWaitの使い方は実に簡単です。
フォームに自分のWebサイトのアドレスを入力して[Time It!]ボタンを押すだけ!

設定するオプションも2つだけです。
WebWaitを使うときは何回かの平均を取るようにすると良いです。

≪ Multiple Call Options ≫
# Calls (0=forever) : Webページを読み込む回数
Call Interval (secs) : Webページを読み込む間隔(秒)
(初期設定 : 5回、60秒毎)

私のブログで試した結果はこちらです。
読み込む回数を5回、間隔を30秒で測ってみました。

WebWaitの結果画面

右側の赤枠にはその都度測定されるWebページの表示時間が表示されます。
「2.94s」というのは最後に測定した値です。

左側の黒枠があなたのWebサイトの表示時間の平均です。
結構数値にブレがありますので、回数を増やした方が良いと思います。

WebWaitで表示速度チェック

私のブログの表示時間は4.05秒だそうです。
この測定した数値を自分なりに速いとか遅いと判断しても良いです。
でも、簡単に数値が出るのだから、あなたがいつも快適に見ているサイトと比べてみるのが良い方法かと思います。

Yahoo!Japan : 1.30s
Google : 0.21s

それからWebWaitはブックマークレットとして使う事も出来ます。
下のほうにあるピンク色の[WebWait]と書かれたところをブックマークフォルダにドラッグ&ドロップすれば登録完了です。
WebWaitブックマークレットを使うときは測定したいWebサイトを開いた状態で、登録したWebWaitブックマークレットをクリックすればWebWaitにジャンプして計測が始まります。
(IEの場合、右クリック-「お気に入りに追加」で登録しましょう。)

ちなみにブックマークレットの中身はこのようなJavaScriptです。

javascript:document.location.href='http://webwait.com#'+encodeURI(document.location.href);

要するに自分のWebサイトのアドレスの頭に「http://webwait.com/#」を付ければOKなんですね。

あとWebWaitはIE6、Firefox、Operaでテストされているようです。
ちょっと古いですけど、基準が同じならOKですかね・・・。

自分のブログの表示速度を把握するのはとても大事な事ですのでお試しください。
よそ様のWebサイトを勝手に測定して、「遅すぎるぞー!」なんて事は言わないようにしましょう(・ω・)

CSSファイルを簡単に軽くする方法

CSSファイルとは、カスケーティング・スタイルシートのファイルの事でWebサイトの見た目を設定するのに必要なファイルの事です。
CSSファイルは外部ファイル化してヘッダー部で読み込ませるのが普通です。
CSSファイルの容量はページ表示速度の大事なファクウターになるわけですから、出来るだけ軽いファイルの方が良いです。

というわけで、今回は簡単にCSSファイルを軽くする事が出来るWebサービスをご紹介します。

Clean CSS - A Resource for Web Designers - Optmize and Format your CSS

名前の通り、CSSファイルをClean(掃除)してくれるWebサービスです。
実際に私のブログで試したところ数キロバイトほど容量が軽くなりましたので、ページの表示速度に興味のある方はお試しください。
CSSファイルの容量が大きければ大きいほど効果があるんじゃないかな。

※Clean CSSを使う前に必ずCSSファイルのバックアップを取ってください。
CSSファイルの圧縮レベルによっては表示が変わってしまう場合があります。

Clean CSSでCSSファイルを軽くする方法

  1. まずは、Clean CSSに行ってみましょう!
  2. Clean CSS - A Resource for Web Designers - Optmize and Format your CSS
  3. CSS-Code:」と書かれたテキストエリアにご自分のCSSファイルの内容をペーストします。
    または、
    CSSファイルのアドレスがわかっているならば、「CSS from URL:」という所にCSSのアドレスをペーストします。
  4. 最後に[Process CSS]をクリックします。
    以上で、CSSファイルの圧縮が完了します。

圧縮されたCSSは、下の「Input:~欄」に表示されていますので、コピーして使ってください。

Input : 最初のCSSファイルサイズ。
Output : 圧縮後のファイルサイズ。
Compression Ratio : 圧縮率です。

Messages」には、どのような事をしたのかがラインナンバーとともに表示されます。
見てみるとわかりますが、少しでも文字数などが少なくなるようなCSSの書き方に替えているだけです。

例としては、

font-weight(文字の太さ) : normal  ⇒ 400

これは標準の太さを意味します。(数値400とnormalが同じ意味です)

font-weight(文字の太さ) : bold  ⇒ 700

これは、一般的な太字の太さです。(boldと700が同じ意味です。)

marginなどの場合もいくつか書き方があるので最適化されます。

margin(マージン) : 1em 1em  ⇒ 1em

マージンに2つ数字を書くと最初が上下、次が左右になります。ですので、どちらも同じ数値ならば1つにまとめられますね。まぁ最初からそう書くのが普通かもしれませんが、うっかりミスもあるもんです。

paddingなんかも同様です。
複数の数値をまとめる際は出来るだけ少なくなるように記述されます。

padding(パッディング) : 2px 10px 10px 10px  ⇒ 2px 10px 10px

4つ指定した場合は上、右、下、左となります。(左右の数値が同じところに注目)
3つの場合は、上、左右、下となるので、左右の数値をまとめて書けます。

colorの場合も省略が可能な場合があります。

color(文字色) : #ffffff  ⇒ #fff

どちらも文字色に白を指定しています。
同じ数字(a~f含む)が6つ並んだ時は、3つに省略できます。

margin-top(マージン上) : 0px ⇒ 0

CSSファイル内では、0pxを単なる0と書けます。
htmlタグにstyleで指定する場合は、pxなどの単位を付けなければいけません。

とこんな感じの事をClean CSSは一瞬でやってくれるようです。
でも、圧縮されたCSSファイルはちゃんとチェックしてから適用しましょうね。
font-family(文字の種類)に日本語で指定している時は文字化けするかもしれませんので、後で修正してください。
(メイリオ ⇒ ????、MS Pゴシック ⇒ ??? ?Х????a*?など)

私のCSSファイルで試したところ、オプションを弄らない状態で、

14.6KB ⇒ 9.98KB

まで、圧縮する事が出来ました。
最初から大した容量ではなかったのですが、コメントが消えたのが大きく影響しているのだとお思います。

/* 全体的な設定
------------------------------------------------------------ */

ってな感じでカスタマイズしやすいようにたくさんコメント書いてありますので・・・。
ちなみにコメントを残した場合だと11.8KBでした。

さて、どうやってコメントを残したのでしょう?
実はClean CSSのオプションを弄ると簡単にコメントを残したり出来ます。

続きを読む?»

ブログ記事を愛用のテキストエディタで書く方法

ブログ記事を、どのようにして書いてます?
たぶんほとんどの方はブログサービスの「新しく記事を書く」ボタンを押して表示されたテキストエリアに文字を入力していると思います。

でも、突然Webブラウザが強制終了した場合は保存してない記事は無くなってしまいます。

Firefox3のクラッシュ

長文を書いていた時に消えると、もう一度最初から書くなんて面倒くさいしヤル気が出ません。
それに、その時に考えついた良い文章を後から思いだすのもかなり難しいです。
(FC2ブログには自動記事保存がありますが、一度保存した記事の再編集には対応してません。)

要するにWebブラウザ上でブログ記事を書いているのがダメなのです。
ローカルのテキストエディタを使っていれば、パソコン自体が強制終了しないかぎり安全です。
でも、いちいちテキストエディタを開いて記事を書き、その文章をコピーしてブログサービスのテキストエリアに貼り付けるなんてかなり面倒です。

というわけで、簡単にブログ記事を愛用のテキストエディタで書く方法をご紹介します。
必要なのはFirefox用 アドオンのIt's All Text!と使いなれたテキストエディタです。

ダウンロード ダウンロードはこちら。
It's All Text! :: Firefox Add-ons : It's All Text

It's All Text!を使ってブログ記事を愛用のテキストエディタで書く

FirefoxにIt's All Text!をインストールしてからお読みください。

  1. まずIt's All Text!に使うテキストエディタを設定します。
    ツール」-「アドオン」でIt's All Text!を選び、[設定]ボタンを押します。
  2. It's All Text設定ウィンドウが開くので、エディタという所の[参照]ボタンを押し、設定するテキストエディタの実行ファイルを選択してパスを入力します。
  3. 次に、「文字セット(既定:UTF-8)」の欄を、ブログサービスで使っている文字コードに書き換えます。
    (FC2ブログはEUC-JPです。)
  4. 編集ボタンが表示される位置を決めます。
    これはブログのテキストエリアに対する位置です。
  5. その他の設定はそのままでOKです。
    早速、ブログ記事を新規作成してましょう!
    記事を書くテキストエリアにフォーカスすると編集ボタンが指定した位置に表示されます。

    It's All Textの編集ボタン
    (初期設定 : 右下)
  6. 編集ボタンをクリックすると先程設定したテキストエディタが起動し、記事の内容もそのままの状態で表示されます。
  7. あとは、テキストエディタでガンガン記事を書いて上書き保存をすれば、ブログのテキストエリアに書いた記事が表示されるようになります。
    ※テキストエディタの文字コードも合わせる必要があります。

これで、もうブラウザの強制終了によってブログ記事を消去される心配がなくなりました。
でも、この方法で編集すると絵文字、画像の挿入などに難があります。

その時は、まず編集中のテキストエディタを上書きし、ブログのテキストエリアに編集中の記事を移します。
絵文字や画像などを挿入します。
その後にテキストエディタを閉じてから、再びIt's All Text!の編集ボタンをクリックします。
簡単に言うと途中まで書いた記事を保存しテキストエディタで開きなおすという事です。

これはWebブラウザの突然の終了から書きかけのブログ記事を守る為の方法です。
ですから、ローカルのテキストエディタは保険のようなものなので、何度開きなおしても良いというわけです。

画像を多用する方には向いてないかもしれませんが、記事が消えるよりはマシでしょう。
折角長い時間かけて書いたブログ記事がアッサリ消滅してしまった経験がある方は、その時の脱力感を思いだしてみて下さいね( ´З`)

あと、ブログのhtml編集やCSS編集のテキストエリアって狭いですよね?
愛用のテキストエディタを使えば作業がはかどりますよ。
テキストエディタならタグの検索とかも出来ますので!
(テキストエリアなら記事欄じゃなくても使えるんです~。)

It's All Text!でより良いブログライフを。
それでは、また。

Firefox3のブックマークの追加が面倒くさいです。

Firefox3でWebページをブックマークする時は、どのようにしてますか?
もしかしてアドレスバーの☆をクリックしてご自分で整理されたフォルダに分別していますか?
それだとクリックが多くて面倒くさくないですか?

Firefox3のブックマーク

一瞬でWebページを指定したフォルダにブックマークする方法をご紹介します。
(大した事ないので期待しないでね。)

ブックマークしたいタブをドラッグしたまま、サイドバーのお好きなブックマークフォルダまで持っていってドロップするだけ!

タブ移動

深い階層のフォルダに入れたい時は、親フォルダの上でタブを持ったまま待っていれば開きます。

簡単すぎるから記事にしちゃまずかったかなぁ・・・。
でも、☆より断然楽チンなんだよね。ホント些細な事だけれども。

あと、アドレスバーの左端のファビコンが表示されるところでもOKですよ。
こちらの方法は現在開いているタブの複製にも使えます。
ファビコンの部分をドラッグしたままタブバーまで持っていってドロップしてみましょう!
たまーに使うかな。

私の場合、ブックマーク行き決定のWebページはこの方法でブックマークします。
何となく後で読みたいだけかも(!?)なのはRead It Laterで仮ブックマークします。
Read It Laterで気になる記事を後で読む!

毎日するような事は少しでも楽になるように工夫しましょうね。
自分にあったブックマークのアドオンを探すのもきっと面白いですよ!
以上、Firefoxユーザー限定の小ネタでした。

(追記)
ice0さんから情報頂きました。
Firefox3.1Beta 2では、この方法が使えないそうです。
という事は、Firefox3.1の正式版でも出来なそうですね・・・。
他のブラウザでは出来ない事なので、さすが!Firefoxと思っていたのですが残念です(゚д゚;)

AutoPagerを使えばWebページがスラスラ連続して読めます!

AutoPagerはWebページを先読みしてくれるとても便利なFirefox用アドオンです!
今開いているWebページがあったとしたらその時すでに次のページを先に読み込んでくれて、その読み込んだ次のページを下にスクロールするだけで次々と表示してくれます。

以前からGreasemonkey(グリースモンキー)というアドオンにAutopazerizeやGoogle AutoPager(Google限定)などのスクリプトを設定すると同じ事ができましたが、他のスクリプトを使わないならこちらの方が単純で良いでしょう!

Greasemonkeyについてはこちらをどうぞ。
Greasemonkey - Wikipedia

AutoPagerを使えばGoogle検索の結果ページなどで次のページに送る為の「次へ」ボタンなどを押す必要がなくなります。そして、下にスクロールするだけで、どんどんWebページが読み込まれ表示されていくのです。
探し物がなかなか見つからない時に重宝します。
また、ブログのような読み物にも有効ですので入れるっきゃないでしょ!

AutoPagerの使い方

ダウンロード AutoPagerのダウンロードはこちら。
AutoPager :: Firefox Add-ons

AutoPagerに開いたWebサイトの設定が保存されている場合は、次のようなダイアログが出ます。

AutoPager
(Gizmodo Japanの例)

『AutoPagerはこのサイトの設定を見つけたよ。
このサイトでオートページングを可能にしたいかい?』

OKを押せばすぐにそのWebサイトでオートスクロールが使えます!
これだけ各記事をスラスラと連続して読んでいけるのです(゚∀゚)

Webサイトの設定も簡単に弄れます。

  1. Googleなどの検索エンジンで何か検索して検索結果のページを表示します。
  2. Webページ上で右クリックして、「AutoPager」-「ページ設定を表示する」とクリックします。
  3. すると下の画像のようなものが右下に表示されますので、「このサイト」の左側の「AE」をクリックしてみましょう!

    AutoPager

    リンクをクリックするだけで色々と設定を変える事ができます。

    記号の意味
    E:有効、 D:無効、 AE:常に有効、 AD:常に無効
  4. Google検索の次へのボタンの下あたりに「Auto pager によって挿入された改ページ」というのが表示され、その下には次の検索結果ページが表示されます。

    AutoPager
  5. どんどん下にスクロールして行ってください。
    「次へ」のボタンを一度も押すことなく検索結果を進んでいけます。
    100件だって200件だって楽勝です!

このようにAutoPagerは大変便利なFirefox用アドオンです。
また、Webページの設定はサイト毎に保存されています。
もしAutoPagerを中止したいなら、ステータスバーの右側に表示されているAutoPagerのアイコンをクリックして色が薄い状態にしときます。

AutoPagerオンのアイコン ← AutoPagerオンのアイコン(old : AutoPagerオンのアイコン

AutoPagerオフのアイコン ← AutoPagerオフのアイコン(old : AutoPagerオフのアイコン

AutoPagerアイコン ← 最新版のAutoPagerアイコン

AutoPagerはGoogleだけじゃなくYahoo!などでも出来ます。
右クリックから「設定の管理」をクリックしてサイトタブにある「URLパターン」を見れば何となく使えるサイトがわかると思います。他の設定は難しそうなのでスルーでOKだと思います。

AutoPagerにサイト設定を追加する方法

AutoPagerに設定が保存されてないWebサイトでオートスクロールを使う時に必要です。
でも、私の理解がいまいち・・・。自分のブログでは出来なかったですし(゚д゚lll)誰か教えて
なんとなく出来たわよ。「AutoPagerでFC2ブログをスラスラ読む!
というわけで、出来なくてもご容赦ください(;´Д`)

一応、今回はちゃんと出来たRocketDock.comのアイコンページでのサイト設定の追加方法をご紹介します。ちなみにRocketDockはとても便利なランシャーソフトです。
綺麗なアイコンがたくさんありますよっ!

さて、これからどういう事をするかというと「次に進む為のリンクの設定(リンク XPath)」と「読み込むコンテンツの範囲の設定(コンテンツ XPath)」をします。

  1. まずオートスクロールを設定したいWebページを開きます。
    今回はRocketDockのIconページです。(RocketDock - Get Icons
  2. Webページ上で右クリックして「AutoPager」-「AutoPager」を選択します。
    これでサイドバーにAutoPagerウィンドウが表示されます。

    AutoPagerのサイドバー
  3. 的のようなアイコンにAと書かれたボタンをクリックします。(リンクのA)
    これは次のページへのリンクを設定する時に使うボタンです。

    AutoPagerのリンク XPath
  4. このボタンをクリックした後、Webページにカーソルを戻すと赤枠が表示されます。
    この赤枠を次のページへのリンクへ持っていきクリックします。
    RocketDock.comだと「≫」です。

    AutoPager NextLink

    AutoPagerのサイドバーのリンク XPathのところに「//a[@class='nextPage']」と入力されていればOKです。
  5. 次にCというボタンをクリックします!
    これは、先に読み込んでおくコンテンツの範囲を設定するボタンです。

    コンテンツ XPath
  6. 先程と同じようにクリックした後、Webページにカーソルを戻すと赤枠が表示されます。
    この赤枠を先に読み込んでおきたいコンテンツの範囲に設定しクリックします。

    AutoPager Contents

    AutoPagerのサイドバーのコンテンツ XPathに「//div[@id='files']」と入力されていればOKです。
    (コンテンツ範囲は違くてもOKですよ。)

    ※出来るだけコンテンツの範囲に邪魔なものが入らないようにしましょう。
    少し小さめのコンテンツに赤枠を表示したまま、キーボードの「W」を押していけば少しずつ赤枠が大きくなっていくので設定しやすいですよ。
  7. 両方のXPathに文字列が入ったのを確認し、緑色のチェックボタンを押します。
    これは、サイトを追加する為のボタンです。

    サイトを追加します。
  8. Auto Pager 設定のウィンドウが開きますのでRocketDock.comがURL パターンに追加されているか確認しましょう。

    Auto Pager 設定

    確認できたら、右下の「OK」をクリックします。
  9. Webサイトに戻ると、次のようなダイアログが表示されます。

    AutoApgerのダイアログ

    すぐさまオートスクロールを開始する時は、「OK」をクリックすれば完了です。

    ※ここでキャンセルしてもサイト設定は残りますのでご安心を。
    キャンセルした場合は、右クリックメニューから「ページ設定を表示する」をクリックしてオートスクロールを開始しましょう。

これでAutoPagerにサイトを追加出来ました(゚∀゚)
下にどんどんスクロールしていってみましょう。RocketDockの綺麗なアイコンが次々と表示されれば成功です。

上のダイアログにパペポとあるのは作成者の名前です。
AutoPagerはサイト設定を公開できるので、その為にあるようです。(登録が必要)
AutoPager 設定ウィンドウの「全般」タプにある「私の名前」のところを変更すればOKです。

全般タブでは他にもいくつか設定出来ますがそのままでOKでしょう!
「Show AutoPager icon in status bar」のチェックを外すとステータスバーのアイコンが消えます。

というわけで、あまり理解できないまま書いてます(*´ω`*)
XPathとか正規表現とか正直辛いです・・・。すごく大事ですけどね。
でも、AutoPagerに最初から設定さてれるWebサイトだけでも十分便利なので使ってみてください。
検索結果のページがスイスイ進むので感動すると思います!

Windows7のショートカットをAutoHotKeyで再現!

Windows7のショートカットがすごくいい感じらしいです!
実際に使ってみたいけど、Windows7のβ版入れるのちょっと怖いよね・・・。
そんな方にお勧めなのがWindows 7 ShortcutというAutoHotKeyです。

AutoHotKeyを使えばWindows7のショートカットだって再現できちゃうみたいです。
ウィンドウも透明になっちゃうんだなー!

Windows 7のショートカットがXPやVistaでも使える『Windows 7 Shortcuts』 : ライフハッカー

上記サイトからダウンロードした「Windows_7_Shortcuts_0.3.zip」を解凍して、「Windows 7 Shortcuts 0.3.exe」を実行すればOKです。
起動するとタスクバーに下のアイコンが表示されます。

Windows Shortcut

Windows 7 Shortcutのショートカット

全てWindowsボタンと一緒に押すので覚えやすいです。

Windowsボタン + ←(左), →(右)
ウィンドウサイズがデスクトップの半分になって、左(右)半分に寄って固定されます。
2つのウィンドウを順番に左右に振り分ければ半々で表示出来ます。
Windowsボタン + ↑(上)
アクティブなウィンドウが最大化します。
Windowsボタン + ↓(下)
アクティブなウィンドウを最小化します。
あとウィンドウの状態をひとつ前に戻すような感じ。
※Windows標準でも「Windows + M」は最小化ってのはあるよ。
Windowsボタン + スペースキー
キーを押している間は、全てのウィンドウが透明になってデスクトップが見えます。
コレ凄いからぜひやってみましょう!
Windowsボタン + home
アクティブウィンドウ以外の全てをクリアします。
私のキーボードの場合、←(左)がhomeボタンなんで使えないです・・・。

タスクバーのアイコンを右クリックして、「preferences」を選択するとショートカットキーを確認できます。

Windows Shortcut

ウィンドウを左右に振り分けるのとウィンドウを透明にするのがすごいなぁと思います。
これが標準で付いているWindows7って・・・欲しいかもー!

AutoHotKeyってなんじゃ?って方は、こちらをどうぞ↓

窓の杜 - 【NEWS】ホットキーでWindowsやアプリを自由自在に操作できる「AutoHotkey」
AutoHotKeyはスクリプトファイルを読み込んで、Windowsやアプリケーションを自在に操れるツールです。処理内容の違うスクリプトファイルを読み込む事によって色んな事が出来ます。

AutoHotkeyはホットキーへの機能の割り当てなど常駐ソフトの作成に特化したスクリプトエンジンである。

AutoHotkeyを流行らせるページより

AutoHotKeyの使い方は上記サイトに非常に詳しく書かれていますので興味のある方はのぞいでみましょう!
でも、内容はかなり難しいですのでわたしにはわかりません・・・。

ダウンロード AutoHotKeyのダウンロードはこちら。
AutoHotkey Download

続きを読む?»

バラク・オバマ氏が第44代アメリカ大統領に就任

ついにアメリカ史上初の黒人大統領が誕生しましたね。
人種差別を憂いていた方々には、希望の光に違いありません。
また、未曾有の金融危機の中、オバマ大統領がどのようにリーダーシップをとっていくのか注目です!

【ワシントン=小川聡、本間圭一】米国のバラク・オバマ前上院議員(47)は20日午前11/時半(日本時間21日午前1時半)から、ワシントンの連邦議会議事堂前で大統領就任式に臨み、宣誓を行い、第44代米国大統領に就任した。

オバマ米大統領が就任、平和と団結訴え : 国際 : YOMIURI ONLINE(読売新聞)

オバマ大統領の就任式には史上最多の約200万人とも言われる市民が集まったそうな。
私もニュースでその模様を見ましたが凄かったなぁ。
アメリカは何をやっても規模がデカイです。テロ対策の警備は相当大変だったでしょうね。

さてそのアメリカ合衆国ですが、人口がどのくらいか知ってますか?
国土が半端なく広いですからね~(ちなみに面積は日本の約25倍です。)

2009年現在、全世界総人口は67.5億人くらいだそうです。(世界の人口
日本は、1.27億人くらいだそうな。(統計局ホームページ/人口推計/人口推計月報

じゃ、アメリカは?
日本を基準に計算すると、軽く25億人を超えてしまいますね(笑)

正解は、約3億人!

何か意外な気がしませんか?
土地が広い割には・・。アメリカの人口はもっと多いかと思いました。
日本の人口はやっぱり過密過ぎるかな・・・。

アメリカ合衆国の総人口、3億人を突破 - ウィキニュース

というわけで、たまには政治ネタも記事にしてみました。
これからアメリカ合衆国がどう変わるのかに注目しましょーう!(よくわからんけど。)
世界中の景気も早く良くなったらいいなぁ。

FirebugでWebページのHTMLやCSSを簡単にチェックする!

Firefox用アトオン Firebugはとっても便利な開発ツールです。
開発ツールというと難しく感じますが、WebサイトのHTMLやCSSのチェックなどにも使えます。
『ここの表示がおかしい!』とか『色替えたらどんな感じ?』と思ったら、Firebugで調査出来ます。
Webページをカスタマイズする上でとても便利なアドオンです。
Webサイトを管理している方はぜひ一度使ってみましょう。

ダウンロード Firefox用アトオン Firebugのダウンロードはこちら。
Firebug :: Firefox Add-ons

今回はFirebugの使い方をすごく簡単に説明してみます。(デバッグ関係は無し)
ブログなどのデザインチェックにとても有効だと思いますので覚えちゃいましょう。
HTMLとCSSのチェックが驚くほど簡単に出来ますよ。(知識が必要ですが・・・。)

Firebugの使い方

Firebugを起動するには、Firefoxの上部のツールバーにあるアイコンか、下部のステータスバーにあるアイコンをクリックします。

Firebugのアイコンはこの虫です。
Firebugのアイコン

ツールバーのアイコンとステータスバーのアイコンでは、クリックした時の動作が少し違います。

  1. ツールバーのアイコンは、Firebugを新しいウィンドウで開きます。
  2. ステータスバーのアイコンは、Firefoxの下部にドッキングします。

どちらも内容は同じなので、使いやすい方でOKです!

さて、実際にこのブログのTOPページをFirebugで開いてみます。
今回はツールバーのアイコンをクリックしてFirebugを新しいウィンドウで開きました。

Firebugのメインウィンドウ

最初は「コンソールパネルは停止しています。」となります。
コンソールにチェックを付け「miracleblues.blog46.fc2.comで選択された機能を有効にします」とういボタンをクリックすれば動きます。

Firebugのコンソールを有効にする
(このボタンはウインドウの下の方にあります。)

Firebugのコンソールを動作させるとFirefoxが少し重たくなるかもしれません。
また、コンソールは一度Webサイトを登録すると有効になったままになりますので、必要ない時は停止しましょう。

Firebugのコンソールを停止する

Webサイト単位でも停止出来ますし、全体的に停止する事も出来ます。
「使用するサイト」をクリックすると各サイトにおける現在のコンソールの動作状況がわかります。
登録したサイトの削除もここで出来ます。

今回は、コンソールにはこれ以上触れません。(停止でOK!)
コンソールの使い方はこ下記Webサイトがわかりやすいので見てみてください。

Firebug とコマンドライン

Firebugのコンソールを使いこなしたい方は色々弄ってみましょう。
わたしにゃよくわかりません・・・。

FirebugでWebページのHTMLやCSSを簡単にチェックする

さて、ここからがこの記事の本題です。
FirebugはHTMLとCSSのお勉強にもなりますので使い方を覚えましょう。

まず、FirebugウィンドウのタブをHTMLに替えます!

FirebugのHTMLタブ

ウィンドウにお馴染みのHTMLタグ(ソース)が表示されましたね。
これがこのWebページのHTMLソースです。

「+」や「-」で各要素が折りたたまれているのでとても見やすくなっていると思います。
「+」をクリックするとその要素の中が見えます。また、「-」をクリックすると中身が隠れます。

次にウィンドウに書かれたHTMLタグの先頭(要素名)を上からクリックしてみましょう!

FirebugのHTML

すると、右側のウィンドウにそのタグに設定されているCSSが表示されます。
Webページでおかしなところを見つけたらチェックしてみてください。

また、HTMLタグの先頭(要素名)以外のプロパティもクリックしてみましょう。
下の画像のように、idなども簡単に変更出来るようになってます。

Firebugでソースを修正する

また、CSSのプロパティの横に出る禁止マークをクリックすると簡単にそのスタイルだけを消す事も可能です。

FirebugでCSSチェック

ここでHTMLやCSSに加えた変更は、現在開いているWebページに反映されます。
つまり、その場で変更した内容をチェックできるという事です!

CSSウィンドウも同様にチェック&テストができますので試してみてください。

FirebugでCSSをチェック!
(※もちろん実際にHTMLやCSSが変更されるわけではありません。)

このようにしてFirebugでは簡単にHTMLやCSSのチェックとテストが出来ます。
Firebugのウィンドウは最大化するととても見やすいですよー。

どうでしょう?結構使う機会があると思いませんか?
私はしょっちゅうFirebugを使ってますよ。
それがFirefox3がメインのWebブラウザになった理由の一つでもあります( ´∀`)

さらにFirebugにはWebページの調査機能があります。
ツールバーのメガネアイコンがそうです。
(無かったらツールバーのカスタマイズから追加出来ます。)

firebug2.png

調査を実行すると、Webページ上でマウスオーバーした場所(青線の中のブロック)のHTMLタグとCSSの内容がFirebugウィンドウに表示されます。また、逆にFirebugのHTMLタグマウスオーバーすると、Webページの該当する箇所が青い線で囲まれます。
これならページソース全体からでは探しにくい場所も超簡単に見つけられます。
忘れやすいclassやidの確認にも最適ですよ!

Firebugの調査

上の画像の状態の時、Firebugのウィンドウには該当するHTML(<div class="entry_body">)が表示され、右側のCSSにも該当するスタイルが表示されます。
画面をクリックするか、調査アイコンをもう一度押すと調査が終了します。

コレすごく便利です。試さないときっと後悔しますよ~(b´∀`)

あとFirebugにはHTMLやCSSの他にも、DOM、スクリプトのデバッグ、レイアウト、ネットワークの接続状況などを確認する機能も含まれています。使いこなすには時間がかかりそうですが、とても便利な機能ばかりなのでぜひ一度使ってみてください。

英語の名言をランダム表示するブログパーツ

英語の名言と日本語訳をランダムに表示するブログパーツのご紹介です。
名前は英語名言ブログパーツで良いのかなぁ。
なかなか深ーい言葉もあって見ていると楽しいですよ。

Powered by 英語名言集

英語名言ブログパーツはページ更新の度に違った英語の名言をランダムで表示してくれます。
日本語訳も表示されるので、英語のお勉強にもなるかもね。

英語名言集
この英語名言ブログパーツを配布してくださっているサイトです。
英語の名言ジャンル一覧では、ちゃんとカテゴリわけされた名言が見れるので訪問してみましょう。

どれも古ーい言葉ですけど、色褪せないといいますか、普遍的といいますか、とにかく的を得た言葉ばかりなんだよねぇ。さすが名言だ!

ブログで使う画像集めにブログ画像ゲッターって便利かも!

ブログの記事に画像載せたいけど、かっこいい画像とか持ってない・・・
カメラのテクニックもない・・・。
というよりも、カメラ持ってない・・・。

色んな方がいらっしゃると思います。
でも、もう大丈夫(゚∀゚)
ブログ画像ゲッターを利用すればかっこいい写真が簡単にゲット出来ちゃいます!
ブログ画像ゲッター : 無料で掲載できる写真を検索!

ネタフルさんで紹介されてました。
[N] ブログで使える画像をFlickrとAmazonから検索する「ブログ画像ゲッター」

記事にもある通り、じゃんじゃん使ってオッケーな画像ばかりのようです。

「Flickrは商用利用も可能な画像しか出ないようになっています」

著作権などはWebから画像を持ってくる時に一番気になる部分ですから、とてもわかりやすくて良いですね。

ただ、やってみるとわかりますが、『クリエイティブ・コモンズ 表示 - 改変禁止 3.0』などと書かれていたりしますので、画像を弄っちゃダメみたいです。
まぁ、普通に考えてそりゃそうですね。あくまでお借りしているのをお忘れなく。

クリエイティブ・コモンズ - Wikipedia

とりあえず「Flickrだけ」にして「tower」と入れて検索してみました。
なかなか幻想的な画像が出てきましたよ~。
記念にいくつか貼り付けておきましょう。


Photo by .craig


Photo by Desmond Kavanagh


Photo by backpackphotography


Photo by law_keven

どの写真の場所も行ってみたいところばかりですね~。
素材集めの手助けにブログ画像ゲッター使ってみてはいかがですか。

「窓並べ」ガジェットでウィンドウ整列がとても簡単に出来る!

窓並べってサイドバーガジェットがかなり良いです。
窓並べは簡単に複数のウィンドウを上下左右に並べたり、ウィンドウを重ねたり、最小化したりできるガジェットです。最大化が無いのが残念ですけど・・・。
さらにWindowsのシャットダウンがおまけで付いてるんだけど便利だよ。

ダウンロード 窓並べのダウンロードはこちら。
Windows Live Gallery - 窓並べ

マイコミジャナーナルさんで詳しく紹介されてました。
インストール方法や使い方とかも詳しく出ているので参考にしてください。

【レビュー】複数開いたウィンドウを1クリックで整列! - サイドバーガジェット「窓並べ」でデスクトップを快適に (1) 「窓並べ」ガジェットの概要とインストール | パソコン | マイコミジャーナル

実際に使ってみたらビビビビッー!ときたので記事にしちゃいました。
デスクトップ上のウィンドウ操作関係には目が無いんですよね(*´Д`)
ガジェットでこんな事が出来るのなんて最高だぁー!(最近、サイドバー起動してなかったけど・・。)

窓並べ
(サイドバーから出した状態の窓並べ)

ボタンの意味は左からこのようになっています。

  1. ウィンドウを重ねて表示します
  2. ウィンドウを上下に並べて表示します
  3. ウィンドウを左右に並べて表示します
  4. 全ウィンドウを最小化します
  5. ウィンドウ操作を元に戻します
  6. 「Windowsのシャットダウン」のダイアログを表示します

使うときはサイドバー上ではなく、デスクトップに出した方がいいかな?
窓並べをデスクトップに出した後に、邪魔なサイドバーは「サイドバーを閉じる」でタスクバーに収納してしまえば良いのです。(終了ではありません)
窓並べがウィンドウの後ろに行っちゃった時は、タスクバーにあるサイドバーのアイコンをクリックするだけで、最前面に出ますのでOKでしょう。

窓並べは色彩と効果なども多少選べるので遊んでみてね。(スパナをクリック。)
マウスオーバーでボタンがあわただしく変化するのが面白いです^^(モザイク効果)
ウィンドウ操作のフリーソフトなどを使った事のない方は、この「窓並べ」ガジェットを使ってみてください。ウィンドウを重ねておくよりも左右に並べた方が便利な時って結構あると思いますよ。

サイドバーがメモリ喰うから常用はダメだろうけど、このガジェットの操作感はなかなか光るものがあると思います。
あぁ、でもWindows7ってウィンドウ操作がパワーアップしてるから最初からこういうウィンドウ操作が出来ちゃうんだよね。いいなぁー。
というわけで、Windows Vistaの方にお勧めでーす!

WindowsPagerはシンプルな仮想デスクトップソフトです。

仮想デスクトップってご存じですか?
パソコンのデスクトップを拡張する為のソフトウェアの事です。
通常は1つしかないデスクトップを複数もつ事ができたり、表示領域をさらに広くとったり出来ます。

あくまで仮想デスクトップなので、実際にデスクトップが増えるわけではありません。
でも、それに似た感覚を味わえるし、デスクトップが狭すぎると思っている方には便利なソフトです。
使い方さえ覚えてしまえば作業効率アップは間違いなしです!

今回はWindowsPagerという仮想デスクトップソフトをご紹介します。
すごくシンプルでとても扱いやすいのが特徴です。アイコンまでシンプルだぁ。

WindowsPagerのアイコン

ダウンロード WindowsPagerのダウンロードはこちら。
WindowsPager
(windowspager-0.48experimental.zip : SourceForge.net: WindowsPager: Files

WindowsPagerを起動するとタスクバーに4つの小さなウィンドウが表示されます。
タスクバーにある通知領域の左側です。
下の画像をよく見てみてください↓

WindowsPager

オレンジ色になっているのが現在表示されているデスクトップです。
4つのウィンドウにそれぞれ違ったWebブラウザのアイコンが表示されているのが確認できると思います。これは通常のデスクトップにFirefox3を起動し、その他の仮想的なデスクトップにはIE7、Opera9.6、Google chromeをそれぞれ起動させた状態です。

それぞれの仮想デスクトップにWebブラウザが1つずつ起動しているのです。
タスクバー上でウィンドウが複数起動しているのとは違います。

WindowsPagerの使い方

WindowsPagerはタスクバーにある小さなウィンドウをクリックするだけで、お望みの仮想デスクトップへ移動する事ができます。
また、NumLockした状態で、Ctrl + テンキー(1,2,3,4)で移動する事も出来ます。
(小さいウィンドウは左から1、2、3、4。)
NumPadNumberとなってますので、キーボードの上の数字ではありません。
※windowspager.iniファイルを弄れば色々なキーを設定できます。
windowspager.iniについては下の方で説明してます。

あるウィンドウを仮想デスクトップ(1)から、仮想デスクトップ(2)など異なったデスクトップ間を交互に移動させるのも簡単です。
Ctrlキーを押しながら、マウスでミニウィンドウ上のウィンドウを直接掴んで他の仮想デスクトップへドロップさせればOKです!
(この機能はWindows2000では出来ないようです。)

ミニウインドウとミニウィンドウのちょうど間に配置する事も出来ます。
その時はどちらかのデスクトップに半分だけウィンドウが表示されます。
なんかすごーいよ(*´Д`)

WindowsPagerは楽しい

ミニウィンドウでズレ気味にドロップしたウィンドウは、デスクトップ表示もそのままズレていますので直してあげてくださいね。

ウィンドウを他の仮想デスクトップに移動する方法は他にもあります。
移動したいウィンドウのタイトルバー、もしくはタスクバー上のウィンドウタスクを右クリックすると次のような右クリックメニューが表示されます。

WindowsPagerの右クリックメニュー"

Move to Desktop1~4
選択中のウィンドウを仮想デスクトップの1~4へ移動させます。
Always Visible
選択中のウィンドウが仮想デスクトップ1~4全てに表示されるようになんります。
チェックを外せば元に戻ります。
Keep on top
選択中のウィンドウを常に最前面に表示する設定です。
そのウィンドウを最小化した場合を除きます。
チェックを外せば元に戻ります。

ミニウインドウを右クリックすると、以下のメニューが表示されます。

About : バージョン情報、コピーライト。
Help : WindowsPagerの使い方を表示します。(英語)
Quit : WindowsPagerを終了します。

※WindowsPagerの複数の仮想デスクトップに色んなものを起動させたままQuitで終了した場合は、全てのアプリが本物のデスクトップ上に戻って表示されます。
データがどうなるとかは未検証ですがたぶん平気でしょう。
でも、ちゃんと1つずつアプリを終了してからの方が良い気がします。

さてWindowsPagerの使い方はこんなもんでOKです!
ねーシンプルでしょ。エフェクトも何もないけど、何か素敵です。
(壁紙をそれぞれ別のものに設定したりする事もできませんよ。) 出来るようになりました。

windowspager.iniでWindowsPagerの設定を弄る

最新のWindowsPagerでは仮想デスクトップにそれぞれ別の壁紙を設定したり、ホットキーを変更したり、窓の数を変更したり出来るようになりました。

この情報はFunkazistaのガリスさんにコメントで教えて頂きました。感謝感謝!
ガリスさんの記事も合わせてご覧ください。
WindowsPagerの使い方 - Funkazista

windowspager.iniファイルが追加されたのは、WindowsPager Version0.42からです。
古いWindowsPagerをお持ちの方は、新しいWindowsPagerにチェンジしましょう。
アンインストールはフォルダ毎捨てるだけでOKです!
※バージョンの確認はフォルダ名、もしくは「about」から出来ます。

windowspager.iniはWindowsPagerフォルダのexeフォルダ内にあります。
見つけたらテキストエディタで開いて中身を修正します。とても簡単です。

layout

タスクバーにあるWindowsPagerの窓の数を設定できます。
縦方向にたくさん増やす時はタスクバーの固定を解除して伸ばさないと、ひとつひとつの窓が小さくなりすぎて使い物になりません。
※「タスク バーを固定する」のチェックを外して、タスクバーの端をドラッグ。

  • rows : 縦方向の窓の数。(初期:1)
  • columns : 横方向の窓の数(初期:4)

hotkeys

ウィンドウを変更する時のショートカトキーの設定です。
数字と一緒に押すキーを設定します。複数のキーを使う場合は、半角スペースで区切ります。
(初期:control)

また、その下では先程設定したキーと同時に押すキー(数字キー)の部分を変更できます。
”desktop1=numpad1”のnumpad1というのはテンキーの1という事です。

numpad1を単なる1に書き換えるとテンキーではないキーボードの1になります。
数字キー以外にもa~zやファンクションキーなども割り当てる事ができます。

usevirtualkeysはよくわかりませんが、noのままで。

wallpaper

これ最高ですね。仮想デスクトップごとに壁紙を設定できます。
bmpファイルとipgファイルが設定可能なようです。(×png)

:: 壁紙の設定方法 ::
「desktop1=」の後のdefaultを消して、そこに画像ファイルのフルパスを入力します。
Windows Vistaの方は画像の上でShiftキーを押しながら右クリックをして「パスとしてをコピー」を選択します。
それからパスを貼り付けて、余計な「"」と「"」を消します。

misc

WindowsVista用の設定です。
Aero設定の方は、opaque_panel=のnoをyesにすれば窓が透明になる…
のかと思ったら、何も変化なしでした。
non_documented_hide_methodもよくかわりません。

readmeに書かれていた英文

Windows Vista: If you you are using the AERO, Windowspager is setting the taskbar/panel to obaque to see something. Glass effects on Windows, hardware acceleration is still working. If you do not like this set 'opaque_panel' to 'no' under 'Misc'.

仮想デスクトップの使い道

WindowsPagerの使い方なんて、インストールすればすぐわかります。
どちらかというと、その後の使い道の方が大事かもしれません。

そこで仮想デスクトップの使い道を考えてみました。

  1. 仮想デスクトップ1 - インターネット。Webブラウザのみのスペース。
  2. 仮想デスクトップ2 - 画像編集のスペース。
  3. 仮想デスクトップ3 - メールのスペース。開きっぱ。
  4. 仮想デスクトップ4 - 動画閲覧スペース。Webブラウザやローカル保存の動画など。

ブログを書きながら~みたいな感じでいかがでしょう。
仮想デスクトップ4あたりは、参照サイトや辞書サイトを開きっぱなしにしたり、エクスプローラーでファイル操作したりとオールマイティなスペースにしておけば良いかもしれません。

まぁ、わざわざWindowsPager使ってやるほどのタスクでもないような気もしますが、やってみると意外や意外!結構便利ですから~。
でも、PCのメモリも増えるわけではないのであまり無茶はしない方が良いです。
ちなみにWindowsPager自体(windowspager.exe)のメモリは864Kです。

要するに仮想デスクトップの使い道で大事なのは、デスクトップの整理整頓です。
デスクトップ上でのウィンドウの重なりをなおす作業や位置移動などの無駄な事を無くすように使えばよいのではないでしょうか。
煩雑になりがちなタスクバーもスッキリしますよー(´∀`)

WindowsPagerをぜひ使ってみてください。
他にも仮想デスクトップソフトはありますが、WindowsPagerはとてもわかりやすくて使いやすいです。
仮想デスクトップ初心者にはもってこいの一品だと思います。
でも、ご使用の際は自己責任でお願いいたします。

ブログタイトルの順番[3]

このブログを始めた頃、ブログタイトルの順番について2記事ほど書きました。
内容はブログタイトルとサブタイトル(記事タイトル)の順番を並び替える理由やその方法についてです。

なつかしーと思いつつ見ていましたが、ちょっとおかしなところがありました:(;゙゚'ω゚'):
ブログのタイトルの順番を変える理由はおかしくないです。
でも、そのタイトルの並び替え方法(タグ)にちょっとだけ問題がありました。

というわけで、ブログタイトルの順番[修正版]を書いておきます。
まずは以前の方法から振り返ってみます。

<title><!--not_index_area--><%sub_title> - <!--/not_index_area--><%blog_name></title>

まぁ、単純にタイトルとサブタイトルの位置を入れ替えただけです。
<!--not_index_area--><%sub_title> - <!--/not_index_area-->で囲んでいる部分は、トップページ以外のページ全てに表示されます。

ここが問題なのです。
つまり、ブログ最下部のページ移動でpage-1とかpage-2に進むと、ブログタイトルの前に「 - 」が表示されてしまうのでした。
(<%sub_title>は表示するものがないので表示無し。)

ブログのタイトル

今まで気づかなかったのが奇跡です。うぅー情けない(;゚∀゚)=3

これはちょっとねぇ。へんてこな感じです。
ですから撤去したいと思います。

私の各ページの希望タイトル表示はこんな感じ。

トップページのタイトル

『Health is better than wealth』

個別記事のタイトル

『個別記事タイトル | Health is better than wealth』

カテゴリページのタイトル

『カテゴリの名前 ☆ Health is better than wealth』

page-1、page-2・・・のタイトル

『Health is better than wealth』

タグはこのようにすればOKでしょう!

<title><!--not_index_area--><%sub_title><!--permanent_area--> | <!--/permanent_area--><!--category_area--> ☆ <!--/category_area--><!--/not_index_area--><%blog_name></title>

まぁ、大した事じゃありませんね。ハッハッハッ
トップページ以外が表示される場所に、個別記事ページにだけ表示させるタグとカテゴリーページだけに表示させるタグをそれぞれ1つずつ設置します。
その中にそれぞれお好みの仕切り(| 、☆)を追加してしまえば良いのです。

かなり簡単なんだけど、最初難しく考えすぎて時間がかかりました・・・
やっぱ変数って嫌いかもー(つд⊂)

これが苦労の結晶です。(一応これでも同じように表示されますです。)

<title><!--not_permanent_area--><!--not_index_area--><%sub_title><!--category_area--> - <!--/category_area--><!--/not_index_area--><!--/not_permanent_area--><!--permanent_area--><%sub_title> | <!--/permanent_area--><%blog_name></title>

余談なんですが、カテゴリーページのタイトルにどうやってカテゴリ名を表示しようか悩みました。
そして変数探してたら、<%category_name>なんていう良さ気なものもありました。
でもこれはダメでした。
<%sub_title> がカテゴリーページではカテゴリ名になるんですね。不思議。

とりあえずこれにて一件落着です!
このブログのカテゴリや個別記事タイトルや一番下の「次項へ移動する」ボタンなど押してタイトルがどのように変化するか試してみてください。
(PV稼ぎではあああありませんよ)

ふぅ、ブログってhtmlやcssだけじゃダメですね。独自の変数もちょっとは知らないと・・・。
というわけで、ブロガーの諸君、気合を入れて頑張ろーう!

(追記)
月毎のアーカイブページの事すっかり忘れてました(゚д゚lll)
何年何月とかいう表記には出来なかったのですが、

200901 : Health is better than wealth

のような感じにしておきました。
仕切りはご自由に替えてみてくださいな。

<title><!--not_index_area--><%sub_title><!--permanent_area--> | <!--/permanent_area--><!--category_area--> ☆ <!--/category_area--><!--date_area--> : <!--/date_area--><!--/not_index_area--><%blog_name></title>

YUI Compressor OnlineでJavaScriptファイルを軽くする

Webページを便利にしたりカッコ良くしたりするのに不可欠なJavaScriptですが、あまりに大きなJavaScriptファイルを読み込ませると、Webページの表示や操作が遅くなってしまします。
でもでも、やっぱり欠かせないーという方も多いはず。

ユーザー側から見れば必要のない無駄なものでも、管理者からみると可愛くって仕方がない機能ってありますよね。たとえそれが原因でWebページ自体が重くなっても・・・。

うちのブログで言えば、slimbox.jsによる画像の演出でしょうか。
Slimbox 1.64で画像表示を素敵に演出!
これは完全に自己満足の世界のような気がします( ´∀`)

でも、ユーザーの事を考えれば出来るだけ軽快なWebページの方が良いに決まってます。
つまりJavaScriptファイルの読み込み時間を出来るだけ短縮できれば良いのです。

JavaScriptファイルやCSSファイルを圧縮して高速化する「YUI Compressor Online」 - GIGAZINE

GIGAZINEさんで紹介されてる「YUI Compressor Online」がいい感じです!

Yahoo!の社員であるJulien Lecomte氏が開発した「YUI Compressor」という有名なJavaScriptファイルとCSSファイルの圧縮を行うJAVAで作られたツールがあるのですが、それをもっと簡単に利用できるようにオンラインで提供する強者が現れました。

YUI Compressorの存在は知ってましたが、面倒なので試してませんでした。
でも、オンラインでチャッチャと出来てしまうならやってみたーい!というわけで試してみたというわけです。

ちなみにYUI(The Yahoo! User Interface Library)は米yahoo!が開発したユーザーインタフェースの機能を多く持つAjaxライブラリです。AjaxライブラリってのはすごーいJavaScriptプログラムの集合です。

うちのブログのヘッダーで読み込んでいるJavaScriptファイルは3つです。

  1. slimbox.js [4.19Kbyte] (画像演出)
  2. mootools.js [45.0KByte] (slimboxで使用)
  3. new.js [184byte] (最新記事に新着マークをつける

大した容量じゃありませんのであまり効果ないと思いますが、今回はYUI Compressor Onlineのお試しなので少しでも軽くなればOKということで!

YUI Compressor Onlineの使い方

  1. 上記サイトに行き、Javascript fileのところの[参照]ボタンでスクリプトファイルを選択し、[compress]ボタンを押します。
  2. すると、「Download generated file」というリンクが表示されるのでクリックします。
  3. JavaScriptのコードが表示されましたね。
    あとはページのソースを開いて、「ファイル」-「名前を付けてページを保存」で任意の場所に保存しましょう。
    出力されたファイルの名前は、元の名前に-minが付きます。

compression ratioは圧縮率ですので数字が大きい方がファイルがより小さくなったという事です。

実際に3つのファイルやってみた結果はこちら。

  • slimbox.js [4.19Kbyte → 3.95Kbyte]
  • mootools.js [45.0KByte → 45.0KByte]
  • new.js [184byte→ 157byte]

mootools.js以外は小さくなってます。
mootools.jsが小さくならなかったのは、元から圧縮済みだったということでしょう。
(Minify only, do not obfuscate(難読化)をすると少し軽くなりましたよ。)

ファイルの中身が気になったのでテキストエディタでのぞいて見ました。
(new-min.jsの中身)

var today=new Date();function nw(E,D,C,B) {var A=24; var F=new Date(E,D-1,C,B);if (today-F<3600000*A*2) {document.write('<span class="new">New</span>')}};

元のJavaScriptファイル(new.js)はこれです↓

var today=new Date(); 
function nw(u1,u2,u3,u4) { 
var nt=24; var c=new Date(u1,u2-1,u3,u4); 
if (today-c<3600000*nt*2) { 
document.write('<span class="new">New</span>')} 
} 

JavaScriptファイルの圧縮前と圧縮後の違い

  1. 改行が無くなる
  2. コメントが無くなる
  3. 変数名が置き換わる

ほぇ~これだけでも結構軽くなるんですね。
YUI Compressorは無駄なものを極力無くす作業をやってくれていると言う事かな。
凄く見づらくなるから、元ファイルもバックアップしておいた方がよいですね。

あと、コメント消えちゃまずいものもありますよね。
slimbox.jsもMIT-style licenseですけど、コメント部分が無くなるとダメな気が・・。
実行する際には気を付けなければいけませんね。

slimbox-min.jsにコメント部分だけ戻すと[4,09KByte]ですから、これでも少し軽くなるのでOKだと思います。

YUI Compressor Onlineを通じて、これからスクリプトを書く時に少し気をつければちょっとは軽くなる事がわかりました。
ちょっくら調べたら、凄く参考になる記事があったので貼っときます。

第30回 JavaScriptの動作を軽くするための工夫:ITpro

いやーJavaScriptって楽しいけど、すぐ重たくなっちゃうからこういうのあると便利ですね。
JavaScript使い過ぎでやたら重たいWebページのオーナーさんはぜひお試しあれ。

FC2ブログの重複するメタデータ 『descriptionの問題』

Googleウェブマスターツールでこのサイトを診断すると問題有りと言われます。
その問題とは、メタデータ(descriptions)の重複です!
メタデータのdescriptionは、そのページの説明文が書かれているタグです。

テンプレートの<head>と</head>の間にあるこのタグがそのdescriptionです。

<meta name="description" content="<%introduction>" />

<%introduction>はFC2ブログの変数で「ブログの説明」を表示します。

私のブログの場合、

『インターネットで思った事や学んだ事などを気楽に綴ったブログです。』

という説明文が入ります。
でも、これって個別ページだと変ですよね。
個別ページにはそのページの内容の説明が入らなければなりません。

でも、FC2ブログではそんな事出来ません。
FC2ブログでは各ページ毎にこのメタタグを変える事が出来ないので、メタデータ(descriptions)の重複が起こってしまうのですね。
他のブログはどうしているのだろう?ちゃんとしているブログもあるのかな。

まぁそんなわけで、とりあえずあなたのGoogleウェブマスターツールで「診断」-「コンテンツ分析」を見てみてください!
たぶんあなたのブログもなっているはず・・・。

今回はメタデータ(descriptions)が重複しない事を重点に置いてタグを変更してみます。
良いのか悪いのかよくわからないですので、ご自分で判断してください。

<!--index_area--><meta name="description" content="<%introduction>" /><!--/index_area-->
<!--not_index_area--><meta name="description" content="<%sub_title>" /><!--/not_index_area-->

まずFC2ブログの変数の説明しときます。(テンプレート用 変数一覧|FC2ブログ公式マニュアル

<!--index_area-->~<!--/index_area-->
ブログトップの時のみ表示するブロック。
<!--not_index_area-->~<!--/not_index_area-->
ブログトップ以外の時に表示するブロック。
<%sub_title>
ブログサブタイトル(記事タイトル)を表示します。

つまり、トップページでは通常通り<%introduction>の内容が表示され、それ以外では<%sub_title>の内容が表示されます。
これでメタデータ(description)が重複せずに済みます。
でも、サブタイトルは記事のタイトルなので説明とはちょっと違いますがどうなんでしょ。

さらに同じメタタグを2つも書いて良いのかわかりませんが、実際にhtmlとして出力されるのは片方のタグなのでOKかな、なんて(*´Д`)
もしダメなら下のタグだけ無くせば、トップページのみ説明文(description)が表示され、その他のページでは説明文(description)を表示しないように出来ます。
たぶん同じ説明文が重複するよりは良いのではないでしょうか。

あと、カテゴリページを表示した場合は、そのカテゴリの名前が表示されますのでOKです。
ただ、page-1とかpage-2のようにベージ単位で移動した場合は、説明文が中が空になってしまいます。
(<meta name="description" content="" />)

Googleウェブマスターツールの説明には以下の様に書かれています。(引用)

サイトのクロール時に、ページのコンテンツに関する問題が検出されました。これらの問題により Google の検索結果にサイトが表示されなくなることはありませんが、問題に配慮することで Google に詳細な情報を提供することができ、サイトのトラフィック増加にもつながります。たとえばタイトルタグとメタデータ (descriptions) のテキストは検索結果に表示される場合があり、内容を表す有益なテキストはユーザーがクリックする可能性を高めます。

ちょっとはアクセス上がるかな?ワクワク((o(´∀`)o))
Googleのウェブマスター ツールは便利だから登録した方が良いですよー!

モニタの右上にあるアナログって・・・。

最近、テレビモニタの右上にアナログって表示が出るみたいです。
何じゃろかと適当に調べてみたら、さっさと地デジにしなさいっていう無言の圧力みたいですね。
テレビも安いもんじゃないので、買い替えの時期はよく見極めなければなりませんね。

大体、最初の方に買うといい事ないし。
なんてたまにはパソコンから離れた話をしていたら、PCのモニタの右上にも・・・。

アナログですかー?

こんなところでも地デジ移行への催促ですかぁ?
プンプンッヽ(`Д´)ノ

・・・という、ネタフリはこれくらいにしてと、
あまり意味のないサイドバーガジェット「アナログ」のご紹介です。
(作者様ごめんなさい。)

Windows Live Gallery - アナログ

ただ、アナログと表示されます。それだけです。
別に右上でなくてもOKです( ´∀`)つ

意味無いし、便利でもないけど、こういうの好きです。
私と同じ事して一人でニヤッっとしたい方は、「アナログ」ガジェットを右上に配置して、サイドバーの右クリックメニューから「サイドバーを閉じる」を選択して閉じておきましょう。

ちなみに地デジ移行期限は、2011年7月24日です。
この日以降はアナログテレビ放送が終了して、デジタルテレビ放送になります。

地デジに移行する理由についてはこちらをご覧ください。
地上デジタルテレビ放送のご案内 - よくある質問

電波が目いっぱい使われていて、地デジにするとチャンネルに余裕ができるからだそうな。
それに加えて、世界的にもデジタル化の波が来ているのだそうな。
まぁ、確かにアナログよりは多様なサービスが実現できそうな雰囲気があるので期待して良いのかな。
正直、私にゃよくわからないですけどね。

地デジに移行した方は、アナログ時代を懐かしんで、
また、まだアナログ派の方はモニタ右上に表示して2011年に備えましょう!

全国のライブカメラ画像と天気予報が見れる『Catonwall』

全国各地のライブカメラ画像と天気予報が見れるサイドバーガジェットのご紹介です。
名前はCatonwallです。
全国各地のライブカメラ画像が見れるので一度は試してみましょう!
ってそこまで凄い画像ではありませんけどね・・・。

Catonwallのダウンロードはこちら。
Windows Live Gallery - Catonwall

初めてCatonwallを起動すると「設定を行ってください」となりますので、スパナアイコンをクリックしてセッティング画面で都市などにチェックを入れます。
(セッティング画面は省略しました。)

Catonwall

週間天気も表示されるので便利です。(でも、実は6日分)
天気予報(RSS)の場所というところをお好きな都市に設定して使います。
アイコンをマウスオーバーする事によって、天気予報を文字で表示してくれます。

Catonwall

ライブカメラ画像は北海道から沖縄まで全国28カ所から複数選択可能です。
もちろんライブカメラの全選択も可能です。
更新間隔は30分毎です。一応、全国各地の夜景が見れちゃいます

カメラの切り替え間隔(巡回間隔)も5秒から15分までの範囲で設定可能です。
マウスオーバーすると、下記のボタンが現れるので強制的に次の都市に移動する事も出来ます。

Catonwall
(左から順に、「前のカメラに戻る」、「次のカメラに進む」、「最新の映像に更新」です。)

巡回順序は北東、南西、ランダムの3種類です。
開始位置も全国各地から選択可能です。

デスクトップ上でのサイズは、大、小、ドック内と同じの3種類。
画像が重たく感じたら、サイズを「小」にするか、「小サイズの画像を使用する(ナローバンド向け)」というチェックを付けましょう!このチェックは、画像の解像度が落ちます。あんま良くないよ(゚д゚lll)

このお天気ガジェットは、livedoor 天気情報からお天気情報を持ってきています。
ですので、左上の都市名をクリックするとWebブラウザが立ち上がってlivedoor 天気情報のページにジャンプします。(IEです。)
livedoor 天気情報では、気温、 降水量、風向、風速、日照時間、積雪深、防災コメントなどの詳しい情報も見れるので、気になったらクリックしてジャンプしましょう。

livedoor 天気情報

次世代OSのWindows7でもサイドバーガジェットは採用されてますので、もうちょっと盛り上がる事を密かに期待しています。高速化とか、メモリ重視の方には邪魔な存在ですけどね。
とかいう、私も最近はめっきりサイドバーを立ち上げていないのでした・・・。
ガジェットクリエイターさん頑張ってくらはいー!

CSSのpositionプロパティを使って表示位置を調整する。

ブログの色に合う紫色の丁度良いRSSアイコンが見つかったので、フッター(ブログ一番下)に付けました。見てくれればわかると思いますが、動きがでるようにちょっと上にズラしてます。
このアイコンが通常表示される場所は、紫色の帯の中です。

こういう時はCSSのpositionプロパティを使います。
ちょっと難しいんですが、とても便利なプロパティです!

positionプロパティ

relative
通常表示される位置を基準として相対的に位置を配置します。
top、bottom、left、rightなども合わせて指定して、相対的な位置を決めます。

positon:relative; と書きます。
absolute
親要素を基準として絶対的に位置を指定します。
親要素にstatic以外のプロパティが指定されていない場合、ウィンドウの左上が基準になります。
親要素にstatic以外のプロパティが指定されている場合は、その親要素の位置が基準になります。

top、bottom、left、rightなども合わせて指定して絶対的な位置を決めます。

position:relative; と書きます。
static
配置方法を指定しないpositionプロパティです。
何のためにあるのかいまいちわからない・・・。
位置指定しないので、top、bottom、left、rightは使いません。

position:static; と書きます。
fixed
absoluteと似ていて絶対的な位置を指定します。ウィンドウの左上が基準です。
そして、指定した位置でボックスが固定されます。
つまり、スクロールしても位置が固定されたまま・・・。
top、bottom、left、rightを指定して、固定する位置を決めます。

position:fixed; と書きます。

上記のpositonプロパティに加えて基準の位置からの上下左右の距離を指定すればOKです。

例)
position:relative;
top:100px;
left:100px;

これで通常表示される位置を基に上から100px、左から100px移動して表示されます。
まぁ、こんな説明じゃたぶんわからないので、下記サイトを参照してください。

スタイルシート[CSS]/ボックス/ボックスの配置方法を指定する - TAG index

positionプロパティを使ってアイコンを配置してみよう!

ここからは実際にRSSアイコンを設置した時のお話です。
簡単簡単と思って、単純にposition:relative;で設置しました。

position:relative;
top:-120px;
left:700px;

top:-120pxが味噌です。
topというのは通常あるべき位置からどれだけ移動するかを設定するものですから、マイナスを設定すると逆に通常あるべき位置より上に移動します。裏ワザみたいなもんですね。

「よし!出来たー!」と思って確認したら、ちゃんと上方向にはみ出てました。
・・・が、紫色の帯(フッター)の部分がRSSアイコンのサイズ分だけ高くなってしまいました。
アチャー(ノ∀`) 我慢できるレベルだけどね。

position:relativeの弊害

これはposition:relative;の仕様らしいです。
position:relative;は移動する前の位置の大きさがそのまま確保されちゃいます!
難しいのねぇ

それでpositionを諦めて、ネガティブマージンでやってみました。
ネガティブマージンはマイナス方向にmarginをとる方法です。

例)
margin-top:-100px;

Firefox3ではOKだったんだけど、Google Chromeなどでは変になっちゃった。

アイコンが欠けてます。

ダメだなぁーと思ったので、初心にかえってpositionプロパティの見直しです。
そしたら、position:absolute;だと移動する前の位置の大きさが確保されないとの事。

じゃぁ、position:absolute;を使いましょう。
フッターのdiv要素にposition:relative;を設定して、RSSアイコンを囲むdiv要素には以下の様に設定しました。

position:absolute;
top:-120px;
left:700px;

positon:absolute;は通常、ウインドウの左上が基準になりますが、その親要素にpositon:relative;などを設定してあげるとその親要素が基準の位置になる、という事なのでした。
これで無事フッター部分が膨らむ事なく、RSSアイコンをズラして設置できました。
あースッキリ(゚∀゚)

テストしたWebブラウザ

Firefox3、Google Chrome、Safari3.2.1、Opera9.6、Internet Explorer7

あとIE6だとアルファチャンネルを含むPNG画像の透明部分が表示出来ないのでアイコンが変になっちゃいます。他のWebブラウザでは薄い水色の部分が透明になります。
IE6の方は見なかった事にしてください(・´з`・)
(その後、CSSハックでIE6の時だけアイコンを少し上にずらす事にしました。)

ちなみにRSSアイコンはこちらの海外サイトからお借りしました。
色がピッタリだっちゃ!!
40 Vector Translucent 3D Look RSS Icons

ブログのトップ画像にリンクをはる方法

今回、ブログのトップ画像を変更する際にブログタイトルもその画像に含めました。
よって、元からあったタイトルの文字が要らなくなりました。

ブログタイトルというのはタグで言うとこの部分。

<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>

(『Health is better than wealth』と表示されます。)

さらに、ブログの説明文も画像に入れちゃったんですよね。
タグでいうとこの部分。

<p><%introduction></p>

(『インターネットで思った事や学んだ事などを気楽に綴ったブログです。』と表示されます。)

これらのタグをほおっておくとトップ画像の上に表示されてしまいます。
下の画像自体にもブログタイトルと説明文があるので、ハチャメチャな状態になってしまいました。

『じゃーこのタグを削除しちゃおう(゚∀゚)』と思うかもしれませんがそうはいきません。

  • スタイルシートをきった場合にブログタイトルと説明文が表示されない。
  • タイトルがブログの重要なキーワードの場合、SEO的に損します。
    (私のブログはお構いなしですが・・・。)

<h1>タグは見出しの一番重要なタグですからね。
それを無くすのは何となくいけない気がしますでしょ。

というわけで、タグを残したままCSSで文字列の表示を消しました。
こういうのを画像置換とか言ったりします。方法はいくつかあります。
text-indentで遥か彼方へ吹っ飛ばす方法やdisplay:noneで非表示にする方法など。
どちらもCSS(カスケーティングスタイルシート)で該当するタグに設定します。

私は、text-indent:-9999px;で非表示にしました。

text-indentはインデント)を指定するプロパティです。
それを利用してあり得ない数値を入れる事で画面の外に追いやります。
アクセシビリティ上良くないとか、SEOスパムになる?など色々な情報もありますが便利なので使っちゃいました。

ちなみにdisplay:noneはdisplay(表示)をnone(無くす)というプロパティです。
ソースにはあるけどCSSで消されちゃうわけです、やるなぁCSS君ヽ(´∀`)

スタイルシート(CSS)の該当箇所にtext-indent:-9999px;を加えれば完了です。


div#header h1 a{
       text-indent:-9999px;
}

div#header p{
       text-indent:-9999px;
}

(他のプロパティは省略してます。)

これでトップ画像のみの表示になりました。
前置きが長くなりましたが、ここからが本題です。

ブログのトップ画像にリンクをはる方法です。

タイトル文字はどのページからもすぐにトップページへジャンプできるリンクになっていたのでとても重要なものでした。
文字をCSSで消しているのでリンクも無くなっちゃいました。
さぁ、困った困った。

トップ画像を<img>タグで表示しているならば、その<img>タグを囲むようにして、トップページへのリンクを張ればOKです。
例えばこんな感じで、

<a href="http://miracleblues.blog46.fc2.com/"><img src="画像のURL" alt="" border="0"><a>

これで、トップ画像をクリックすればトップページへジャンプします。

でも、私の場合ダメなんです。
なぜなら、トップ画像を背景として設定しているから・・・。
(imgタグではなく、backgroundで表示してるのです。)

背景の設定はCSSで管理しています。
ソースに画像のタグが無いのでリンクタグで囲みようがありません。
アー困った困った。

こういう時に活躍するのがJavaScriptです。
トップ画像を背景画像として表示している場所は、<div id="header">~</div>ですので、このdivタグに細工をします。
(ちなみにこのdiv内に<h1>と<p>が含まれていますよ。)

<div id="header" onclick="location.href='http://miracleblues.blog46.fc2.com/'" style="cursor:pointer">

onclick="location.href='http://miracleblues.blog46.fc2.com/'"
意味は、onclick(クリック)で、location(場所)のhref(アドレス)が「http://miracleblues.blog46.fc2.com/'"」になるよ~みたいな感じです。

style="cursor:pointer"
こちらはマウスオーバーした時のカーソル(cursor)をpointer(手)に設定してます。
style=""は、タグに直接CSSを打ち込む時のものです。

pointerの部分は、お好みで決めます。
下記サイトで色々なカーソルをお試ししてみましょう。

カーソル変化一覧/HTMLタグ素材集

あまり変なカーソルは設定しない方が良いでしょう。
特にwaitなんかはダーメ。

あとカーソル変更無しでも良いのですが、ここはリンクだよって明示する為にはあった方がよいと思います。トップページに戻る時にそのサイトのロゴやトップ画像付近を探るってのは結構みんなやる事ではないでしょうか?
トップページへのリンクが他にちゃんと用意されていれば別ですけどね。

そんなこんなで現在のスタイルになったというわけです。
トップページに戻れないサイトは作らない方がよろしー( ´Д`)ノ~

ブログのデザインを変えました。

ブログのデザインを変えてみました!まだ所々テキトーですけど・・・。
ピンク色から紫色になりましたが、ダーティーなイメージにしたかったわけではありません。
もうちょっとパンチが欲しいなぁと思ったら、紫色になったとさっc(`・ω´・ c)っ

前からやろうやろうと思いつつもなかなか手が出せなかったんです。
記事書くので精一杯でしたし、優先すべきはそちらだと思ってますので。

でも、新しい年になった事だし少しがんばってみました。ウッシッシ
といっても、デザイン変更は現在進行形ですので暫くはご迷惑をおかけする事があるかもしれません。
その辺はよろしくお願いいたします。
(不具合何かがあれば教えてもらいたいなぁ、なんて。)

今までお世話になったテンプレート japon
(以前のテンプレート。japon)

前回のテンプレートはとても見やすくて好きだったんですが、本文の横幅が狭いような気がしていたんです。(記事本文の横幅:510px)
ですので、今回の本文の横幅は150pxほど長い660px取りました。
ちなみにサイドバーは同じ幅220pxで、全体の幅は900pxです。

横幅って訪問者様のモニタサイズを考えれば、800px位が良いのかもしれません。
でも、最近はワイドモニタも増えてきましたし、Yahoo!Japanも950pxに広げましたので波に乗っかってみました。
(他のポータルサイトはまだ動いてないような気もしますが・・・。)

一応、私のブログのアクセス解析見る限りでは900pxでもOKな気がします。
ディスプレイ:不明ってのもあるので100%ではないですけどね・・。

ブログの横幅については可変幅なども考えましたが、急に固定幅が良くなっちゃいました。
べべべべ、別に面倒くさいからとかじゃないですよ(汗)

デザイン変更は結構簡単です。 一から作るのもめんどくちゃぁだったので、テンプレートをところどころ変更しただけです。
Top画像が変われば大分イメージが変わるもんですね。これから細部もいじる予定です。

ブログのカスタマイズで困ったのは、classやidです。
自分で付けたわけでは無いので、初めのうちは何が何だかわかりません。
こういう時はFirefoxのアドオン『Firebug』の調査が大活躍してくれます。
とても便利ですよ。今度紹介しよっと。

中途半端な状態で新デザインを表示するのはいかがなものかとも思ったのですが、テンプレートのプレビューだけではTop以外のページが確認できないんです。
プラグインなども合わせて変更しないといけないし・・。
というわけで、お見苦しい事もあると思いますがご容赦くださいませ。

新しくなったHealth is better than wealthを今後ともよろしくお願いします(*´д`*)

スタートメニューの不要なプログラムを削除する

Windows Vistaのスタートメニューから、「すべてのプログラム」をクリックするとたくさんのプログラムが表示されます。特にフリーソフトが好きでインストールしまくっている方は、はちゃめちゃな状態だと思います。(私もその一人です・・・。)

何故このような事になるかといえばプログラムをインストールした際、同時にそのプログラムのショートカットが作成されるからなんです。(インストール時に変更出来るものもありますが。)
そして、ここにあるのは全て実行ファイルのショートカットです。

一応、それぞれのファイルのプロパティを見て確認してください。
プロパティ」-「全般」タブのファイルの種類が「ショートカット(.lnk」)になってるはずです。
つまり、ここのプログラムの項目を消したってインストールしたプログラム本体は消えないという事なーのだ(゚∀゚)

スタートメニューのプログラム、項目の数が多すぎるとお目当てのプログラムが見つけづらいですよね?それならば、いっその事スタートメニューの不要なプログラムを削除しちゃいましょう。

スタートメニューの不必要なプログラムを削除する

  1. 削除方法はスタートメニューのプログラム上で右クリック-「削除」をクリックします!
  2. 対象のフォルダへのアクセスは拒否されました」となるので、[続行]をクリックします。

    対象のフォルダへのアクセスは拒否されました
  3. さらにユーザーアカウント制御(UAC)が邪魔をするので、また[続行]をクリックします。
  4. これで、プログラム項目の削除完了です。

でも、こんなに面倒くさいのにここではプログラムを1つずつしか削除できません。
というわけで、たくさん削除する項目がある方にまとめて削除する方法もご紹介します。

スタートメニューの不必要なプログラムをまとめて削除する

  1. [スタート]ボタンを右クリックし、「開く - All Users」をクリックします。
    (ユーザー単位なら、「開く」でOK。)
  2. すると、スタートメニューフォルダが開きます。

    C:¥ProgramData¥Microsoft¥Windows¥Start Menu

    中にはプログラムという名のフォルダと、「Windows Update」のショートカットと「規定のプログラム」のショートカットがあると思います。
  3. プログラムという名のフォルダを開いてみましょう。
    このフォルダの中にはスタートメニューのすべてのプログラムにある項目と同じプログラムがあるはずです。
    ※Internet Explorerと、Windows Media PlayerとWindowsメールはここにはありません。
  4. 削除したいプログラムのショートカットを複数選択し、右クリックメニューの「削除」をクリックします。
    (このフォルダ上ではCtrlやShiftを使ったファイルの複数選択が可能です)
  5. 先ほどと同じように「対象のフォルダへのアクセスは拒否されました」となりますが、少し違いがあります。

    複数選択した場合は「同じ処理を現在の項目すべてに適用」という項目が追加されてますので、チェックが付いているのを確認し、[続行]をクリックします。

    対象のフォルダへのアクセスは拒否されました
  6. こちらもユーザーアカウント制御(UAC)が邪魔をするので、また[続行]をクリックします。
  7. 以上で、不要なプログラム項目の削除完了です。

ちなみに[スタート]ボタンの右クリックメニューには、「開く」と「開く - All Users」の2種類があります。

開く」は、ログイン中の特定ユーザーノスタートメニューフォルダを開きます。
※たぶんInternet Explorerと、Windows Media PlayerとWindowsメールのショートカットはここにいます。

開く - All Users」はすべてのユーザーのスタートメニューフォルダを開きます。

ですので、上記の『スタートメニューの不必要なプログラムをまとめて削除する方法』を実行すると、PCの全ユーザーに適用されますのでご注意ください。

また、削除したいプログラムが見当たらない場合は、単純にスタートメニューの項目から削除しましょう。スタートメニューの項目に表示されてるプログラムは必ずこの2つの場所のどちらか一方、もしくは両方にいると思いますけどね・・・。

それから、逆にスタートメニューのすべてのプログラムに表示するには、先程のスタートメニューフォルダの中に登録したいファイルやフォルダのショートカットを放り込めばOKですよ!

私がスタートメニューのプログラムを削除した時は、一度もクリックしてないようなプログラムもたくさんありましたので、そういう不要なものを削除したらお目当てのプログラムが探しやすくなりましたよ。

デスクトップが机の上なら、スタートメニューは机の引き出しのようなものです。
たまには使いやすくお手入れしましょう♪
いやー整理整頓って本当に大事ですねー!(=゚ω゚)ノジャ、マタ!!

明治神宮へ初詣に行ってきました。

今年の初詣は明治神宮に行ってきました。(1月3日)
明治神宮は東京都渋谷区代々木神園町1-1にある木に囲まれた神社です。
毎年、日本一の参拝者数を集めて話題になっています。

明治神宮

今年も当然混んでいましたが、そこまで窮屈な感じはしませんでした。
この南神門前に着くまでに結構時間かかってます。

明治神宮の行列

ふう、やっとこ南神門の入口です。
木々に囲まれているので、結構ひんやりしています。
風が吹くとさっぶい!ヘックシー

明治神宮南神門前

警察の方が、入場規制してますから多少安心です。
これだけの人が押しくらまんじゅうしあったら・・・ゾォー(゚д゚lll)

明治神宮の本堂前

あとは目の前に見える建物の前まで牛歩です。
そして、白い布のようなものが下に敷かれているので、そこにお賽銭を投げいれるわけです。
が、そこからが大変!!

左右にはけようとしている間も後ろからはどんどん前に進む参拝者がいるわけですから、当然ぐちゃぐちゃになります(;゚∀゚)=3
ここが一番きつかったなぁ~

お賽銭が頭に直撃する事もなく、無事お参りを終わらせる事ができました。
やはり初詣の後は清々しい気持ちになります。
神社にくると正月だなぁって実感が沸いてきます、日本人だぁわ。

明治神宮の東神門

参拝後は、東神門をくぐり、お楽しみのおみくじ挑戦です。
明治神宮のおみくじには大吉とか吉とかは書かれてませんでしたが、有難いお言葉が書かれていましたので厳粛に受け止めようと思います(*´д`*)
本当は昨年のリベンジをしたかったんだけど・・・(昨年:凶)

帰り道の一角には、屋台村のようなものがあるのでそこでワイワイやって温まれますよ。
コロッケが凄い人気だったなぁ、食べなかったけど。

そして、パペポは明治神宮をあとにして表参道の街へと消えていったのでした。 日陰が多いから明治神宮の参拝は暖かい格好で行きましょうー!

こちらは明治神宮の地図です。
森しかみえてませんね・・・。
でも、「-」とか押せば、周辺の地図見れますのでどうぞ!


大きな地図で見る

明けましておめでとうございます。

丑年

明けましておめでとうございます。
昨年の3月から始めたこのブログも、おかげ様で何とか年を越す事ができました。
ご訪問&コメント下さった方々、本当にありがとうございました。

今年も面白い情報や役立つソフト、Tipsなどを中心に書いていけたら良いなぁと思ってます。
マイペースでやっていきますので、これからもよろしくお願いいたします。
ウッシッシ(´∀`∩)

2009/1/1 元旦 パペポ