WordPressログイン画面をカスタマイズ

WordPressのログイン画面は

ノーマルログイン画面

こんな感じなのだけど、このデザインをカスタマイズできないかな・・・
と思っていたら、こんなプラグインがあった。
BM Custom Login Plugin

[http://www.binarymoon.co.uk/projects/bm-custom-login/]
上記ページの「Download the plugin」からダウンロードできます。

  1. ダウンロードする
  2. ファイルを解凍
    「bm-custom-login」フォルダが生成されます。
    格納されているファイルは以下の通り
    ・readme.txt
    ・bm-custom-login.php
    ・bm-custom-login.css
    ・bm-custom-login-2.css
    ・「images」
    ・「image-templates」
  3. イメージ画像作成
    「image-templates」フォルダの中に
    「login-bkg-tile.psd」「footer.png」と、サンプルファイルがあるので
    それらを参考にデザインをカスタマイズすれば良いと思います。出来上がった画像ファイルを「images」フォルダに移動させますが
    スタイルシートで何も変更しない場合は、ファイル名は以下の通りです。
    タイトル、背景画像:login-bkg-tile.jpg
    ログインエリアの下の画像:login-bkg-bottom.gif
    「images」フォルダに元々入っている「login-bkg-tile-SAMPLE.jpg」は削除しても問題無いです。
  4. 必要に応じてスタイルシートを変更
    画像関係は「bm-custom-login.css」、それ以外は「bm-custom-login-2.css」に書かれています。
  5. FTPでアップロード
    「bm-custom-login」を「wp-content/plugins」にアップします。
    この際ですが、「readme.txt」や「image-templates」はアップする必要は無いと思います。
  6. 管理画面にて「bm-custom-login」をアクティブして、設定完了

自サイトでやる分には、ただの自己満足ですw
でも、お客様へ納品する場合などは使えるのじゃないかなーと思っています。

ちなみに、カスタマイズした感じはこんな感じです。

ログイン画面 カスタマイズ後

Safari 4 Beta

CNET JAPANの記事に、「Safari 4のパブリックベータ版」の記事があったので、早速Appleのサイトへ行き、入れてみました。

CNETの記事を引用すると

新しいNitroエンジンの搭載により、JavaScriptの実行速度がSafari 3の4.2倍、IE7の最大30倍、Firefox 3の3倍以上速くなっているという。またHTMLウェブページの読み込みも、IE7の3倍以上、Firefox3のほぼ3倍の速さだという。

ということらしいですが、体感的にはまだハッキリわからないのが正直な所です^^;

とりあえず、一番驚いたのは、 Top Sitesという機能。
頻繁に訪れるページをプレビューで表示して、ワンクリックで好きなサイトにジャンプできる機能で、表示も大中小選べる。
要はiTunes等のアートワークを表示した状態と同じ感じになるので、視覚的にサイトがわかる。
先日紹介した「Firefoxオススメアドオン Bookmark Previews」 と同じ感じだけれども、最近はコレが流行っているのかもしれないですね。

http://www.apple.com/jp/safari/

Top Sites

でも、こんだけ見た目を派手にしても、速度感にストレスを感じないということは、かなりパワーアップしているということですね。

とりあえず、不具合点としては、この記事を書いている時に「Ajax」の機能を使ったら、そのまま記事が書けなくなったところですかね・・・。
ということで、Firefoxで書き直しています;;

まだまだ使いこなしてはいませんが、個人的にはオススメブラウザです。

EI6で透過PNGを表示させる方法

最近はgif画像よりもpng画像を使う事が多くなったけれども、IE6では透過PNGを表示させるのは面倒くさい・・・。

てなことで、何か簡単な方法は無いかと探したら、「IEPNGFix v2.0 Alpha」なる便利な物があった。

以下のページにある「「IEPNGFix v2.0 Alpha — with background position/repeat!」をクリックすると、ダウンロードできます。」
http://www.twinhelix.com/test/

さっそく使ってみたら、かなり便利な代物で、設定もそれほど難しく、簡単な設定方法は以下の通りです。

  1. 解凍後に「iepngfix.htc」、「blank.gif」、「iepngfix_tilebg.js」を任意のフォルダにコピーする。
  2. cssに「img, div { behavior: url(iepngfix.htc) }」を追記。
    要素は増やしても問題ないですが、url(iepngfix.htc)はcssからのパスではなく、該当htmlファイルからのパスなので注意。
  3. HTMLのヘッダに「<script type=”text/javascript” src=”iepngfix_tilebg.js”></script>」追記。

とりあえず、このサイトで使用しているけど、現時点では問題は見当たらないかも?

訂正
ブログ詳細の所で透過されていない!
ということで、また調整してみます。