spring-treeでは、カメラを持ってフラフラ・パシャパシャと撮った写真や、今までに制作した、WEBサイトなどを随時紹介していきます。

記事を追加したら、twitterへつぶやく…はず！

Internet Explorer6で任意のテキストを表示

元ネタ…CSS HappyLifeさん

Internet Explorer6以下で任意のテキストを表示させるプラグイン

ダウンロード
IE analogue ZIP(2.7KB)

インストール方法
上記のダウンロードよりデータをダウンロード後
wordpress > wp-content > plugins
の中にアップロードして、管理画面より有効化してください。

各種設定方法
プラグインを有効化すると、WordPressの設定の項目に「IE analogue」という項目が出ているので
そこから、各種設定ができます。

設定可能項目

• 枠内テキスト
• 表示位置
  • 上
  • 右
• 枠線の色
• 枠線の種類
• 枠線の太さ
• 余白
  • 上
  • 右
  • 下
  • 左
• 文字サイズ
• 文字の太さ
• 文字の装飾
• 文字色
• 背景色
• 不透明度
• マウスオーバー時のテキスト

※Internet Explorer6以下でしか、確認できません。
※ご使用は自己責任にてお願いいたします。

以前に「IE6で見ると「アナログ」と表示される編」で
書いた記事の応用編です。

phpの勉強がてらに、WordPressのプラグインを作ってみた。
phpの知識なんてほとんどなけれど、すんなり作れちゃったりしました。

このプラグインを有効化すれば、ＩＥ6で閲覧した場合に画面の右上に「アナログ」と表示されます。
元ネタCSS HappyLife

こんな感じ

IE6で閲覧すると「アナログ」と表示する

導入方法は、プラグインフォルダに解凍してできた「ieanalogue」のフォルダをアップロードして、管理画面より有効化してください。

ダウンロード

って、こんなもの使えるのか？

-追記-
cocoa*lifeさんが、一足先に制作されてたみたいです。

ブラウザのFirefoxであれば、ちょっと便利なアドオン集。
独断と偏見によります。

新しいパソコンに導入する際に、毎回探しまわるのでメモ。

Context Search
[mozilla]
https://addons.mozilla.jp/firefox/details/240
[制作者]
http://www.cusser.net/
webページのテキストを選択した状態で右クリックすると各種検索サイトで
検索ができる。
webページをみて気になった単語などを調べるのに重宝しとります。

様々な検索サイトで検索可能

Web Developer
[mozilla]
https://addons.mozilla.org/ja/firefox/addon/60
[制作者]
http://chrispederick.com/work/web-developer/
[日本語化]
http://lab.tubonotubo.jp/tools/webdeveloper/
表示しているwebページの様々な情報が確認できたり、
ウィンドウを登録したサイズにワンクリックで変更できたり、
便利なアドオンです。

要素の内容が視覚的に確認できる

Firebug
[mozilla]
https://addons.mozilla.jp/firefox/search?q=firebug
[制作者]
http://getfirebug.com/jp.html
こちらも、表示しているwebページのHTMLソースやスタイルシートが確認できます。
気になったコンテンツ上で右クリックし、「要素の調査」を選択すると、
該当箇所のHTMLソースやCSSが確認できます。

気になるところのソースがひと目でわかる

FireFTP
[mozilla]
https://addons.mozilla.org/en-US/firefox/addon/684
[制作者]
http://fireftp.mozdev.org/
[日本語化]
http://norahmodel.exblog.jp/1405872/
2カラムのFTP！
なかなか便利なアドオンです。
転送速度も、結構速い気がする…。気のせいかな？

2カラムが何気に嬉しい

Google Toolbar for Firefox
[配布元]
http://www.google.com/tools/firefox/toolbar/FT3/intl/ja/index.html?utm_source=ja-et-more&utm_medium=et&utm_campaign=ja&tbbrand=GZEZ
言わずと知れた、Googleツールバー。

メール・カレンダーのアクセスに便利

GooglePreview
[mozilla]
https://addons.mozilla.jp/firefox/details/189
[制作者]
http://ackroyd.de/googlepreview/
Googleの検索結果に、そのページのサムネイルを表示してくれます。
検索結果のページがパッとみ華やかになります。

Googleの検索結果が華やかに

Pencil
[mozilla]
https://addons.mozilla.org/ja/firefox/addon/8487
[制作者]
http://www.evolus.vn/Pencil/
webサイト制作の際のモックアップを作れます。
日本語にも対応。手ラフでもいいんだけれど。あると便利かな。
PNGで書き出しができます。

モックアップの制作に重宝します

Screengrab
[mozilla]
https://addons.mozilla.org/ja/firefox/addon/1146
[制作者]
http://www.screengrab.org/
[日本語化]
http://coxcafe.net/download-of-firefox-extensions/screen-grab/
webページのスクリーンショットを撮ってくれます。
ウインドウ内に表示されている範囲・ページ全体を選択可能です。

すこし面倒なスクリーンショットを簡単に保存

Speed Dial
[mozilla]
https://addons.mozilla.org/ja/firefox/addon/4810
[制作者]
http://speeddial.uworks.net/
[日本語化]
http://haebaru06.seesaa.net/article/76807201.html
よく見るwebサイトを登録して一覧で表示します。
Operaの機能と同じ感じ。

毎日チェックするページへのアクセスが、簡単に

Splash!
[mozilla]
https://addons.mozilla.jp/firefox/details/2995
[制作者]
http://www.mrtech.com/extensions/#splash
起動がちょっと遅いFirefoxにスプラッシュページを表示します。
少し起動が短く感じます。（俺だけか？）

起動時間を短くする（気分的に）

TwitterFox
[mozilla]
https://addons.mozilla.jp/firefox/details/5081
[制作者]
http://twitterfox.net/
Twitterの投稿をFirefoxからおこなえる便利なツールです。
ふとした、つぶやきを投稿するのに便利。

ウインドウ下部から投稿と閲覧が可能

おまけ
中止ボタンがしいたけに見えて困る
[mozilla]
https://addons.mozilla.org/ja/firefox/addon/4298
[制作者]
http://hadakadenkyu.flnet.org/blog/index.html
ページの読み込み中に表示される「中止ボタン」がしいたけになります。

いや、そんなこともないこともない……か？

しいたけに…

こんな感じでFirefoxを使っております。（しいたけは使ってません。）

Flashを使用しているページに、Lightboxなどを使用している場合、
Flashが前面にきてしまい、グレーの背景に隠れないってことがあります。

こんな感じに

Flashが前面にきてしまう

結構、自分なりに悩み四苦八苦した結果…
検索すると、
小粋空間さんの「Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す」という記事で紹介されていました。

object要素に下記を追加

<param name="wmode" value="transparent">

さらに、embed 要素に wmode 属性を追加

wmode="transparent"

結果

正常に背面に表示されました

このサイトをInternet Explorer 6以下で表示すると
画面の右上に「アナログ」って表示されてます。

元のネタはCSS HappyLifeさんが記事に書いていたものです。
面白そうなので、やってみました。

Internet Explorer 6以下で表示した場合

ちみにcssコードは

.analogue {
 display: none;
 }

*html .analogue {
 display: block;
 position: absolute;
 top: 30px;
 right: 15px;
 background: #ffffff;
 padding: 8px 10px;
 border: 1px solid #333333;
 font-size: 12px;
 font-weight: bold;
 color: #333333;
 filter:progid:DXImageTransform.Microsoft.
Alpha(Enabled=1,Style=0,Opacity=60);
 }

filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=60);
上の記述で不透明度を60%に設定してます。

でもってHTMLには

<div class="analogue" title="アナログ">アナログ</div>

完成！

そろそろ、部屋のテレビも買い替えなきゃなぁ。