Dreamweaverの正規表現置換サンプルと解説

Dreamweaverの検索と置換って何気に凄い。
色々出来る中でもかなり便利だと思う正規表現を使った置換のサンプルを挙げてみる。
スパゲッティなソースの修正も、これと特定のタグ検索知ってれば作業スピードが格段に上がるかも。
「特定のタグ」で出来るじゃんというのも中にはありますが、正規表現を使うことに意味があるので突っ込みは受け付けませんw
微妙に間違ってたところ修正入れつつ加筆。

Dreamweaverで正規表現を使うには?

Ctrl+F(コマンド+F)押して表示されるダイアログの右下にある正規表現を使用にチェックを入れるだけです。

検索および置換ダイアログ

テキストを維持したままタグを減らしつつ変更

HTML→XHTMLで一番多い作業がこれだと思う

置換対象:

<td width="397"><font size="2">テキスト</font></td>

置換後:

<th scope="row">テキスト</th>

検索パターン:<td width="397"><font size="2">(.+)</font></td>
置換パターン:<th scope="row">$1</th>

fontタグに挟まれてる文字列を記憶して、置換で記憶した文字列を変更したタグに出力しています。
記憶と置き換えについては最後の方で説明いれてるのでここでは省略。
ドットとプラスの意味はそれぞれ、

  • ドット→新行 (改行) 以外のすべての単一文字
  • プラス→直前の文字の 1 回以上の繰り返し

なので、『改行以外の文字を何文字あっても記憶』という意味になります。
この場合プラスはアスタリスク*でも構いません。アスタリスクは「直前の文字の 0 回以上の繰り返し」という意味です。

続きを読む

[JS]季節で画像を変更するスクリプト

季節(4カ月おきくらい)でイメージ画像を自動更新するスクリプトのサンプル。
しかしこの間隔ならスクリプト使うこともない気がする。

<img src="images/00.png" alt="季節で変わります" id="change" width="500" height="200" border="0"/>

変更したい画像にIDをつける。サンプルではchangeとつけた。

続きを読む

[JS]ページが開いたら自動でフォーカスを合わせる

お問い合わせフォームの先頭のテキストエリアとかに、ページが開いた時フォーカスを合わせる方法について。
name、ID、配列の各サンプルを挙げてみる。

name値の場合

window.onload=function(){document.formID.inputName.focus()}

formIDがフォームタグのID値
inputNameがフォーカス合わせるフォームのname値。

bodyでイベントハンドラでもいい。

<body onLoad="document.formID.inputName.focus()">

続きを読む

[JS]ステータスバーテキストを非表示にする

通常ステータスバーにはリンク先のURLが表示されるが、それを表示しないようにするスクリプトのサンプル。
事情はどうあれ、フィッシングに使われる手法なので使用には注意が必要。

昔リンクの説明などをステータスバーに表示させたり、ムダにスクロールするようなエフェクトつけるのが流行ったが、
ツールチップが広まった現在はセキュリティが下がるとして敬遠されるテクニックになっている。

なおステータスバー関連のスクリプトは、ブラウザのセキュリティ(Javascript詳細)設定で
「ステータスバーのテキストを変更しない」というものがONになっていると、スクリプトの内容に関係なくスルーされる。

IE系はOFF(設定すら存在しない)。
FireFoxは上記設定がデフォルトでON。
SleipnirもたぶんON(スルーされる)
GraniはOFF。
OperaはOFFだが挙動がちょっと違う(テキスト変更は出来るが、URLが表示されてから指定したテキストが表示されるので完全非表示にはならない様子)
Safariもスルーされる。

続きを読む

[JS]ロールオーバースクリプト(画像名のOn/Offで判別)

前の記事はオーバーの画像だけonを追加するものだったが、
この記事ではオーバーの画像にON、アウトの画像にOFFをつけて、ONとOFFの部分だけで判別する。

ページ内の画像でoffが付いてるもの全てロールオーバーさせる、ということも可能。

続きを読む

[JS]見てるページのメニューを変更する(ボタンが画像の場合)

前に書いた記事のクラスを追加するタイプの場合だと、リンクしてるものが文字じゃなくて画像だったりすると画像そのものが変更出来ない。
そんな質問を見つけたので、画像ボタンの場合のものを作ってみた。

基本の判定は同じ(ファイル名とリンクのsrc一致)で、一致した場合クラス追加じゃなくて画像のsrcに_onを追加します。

続きを読む

[JS]見てるページのメニュースタイルを変更する-HighlightNavigation-

特にタブっぽいつくりをしてるメニューなんかだと、表示してるページのナビゲーションメニューを別のスタイルにしたいという場合がある。
開いてるページのボタンにだけclass=”current”とかつければ出来るんだけど、メニューをテンプレートやライブラリにしちゃうと手書きでは無理。

そういう状況がまさに今日あったので勉強がてら作ってみた。

»サンプル

続きを読む

[JS]擬似クラス:hoverをtrに適用するjavascript

IEだと擬似クラスの:hoverがaタグにしか適用されないので、aタグ以外のものに:hoverつけたいときに困ることが多い。
:hoverをつける要素にaタグが入って、それがリストのように1行(ないし1ブロック)しかないのなら、aをブロック要素にすることで回避も可能だ。
でもそれだとtrでtdが2つ3つ並んでる状態になったりすると不可能になる。
というわけで、手っ取り早くいくならやはりjavascriptになると思う。

参考にtrの背景色を:hoverで変更するスクリプトを2つ紹介。

続きを読む

[CSS]fieldsetにbackground指定するとIEではみ出す

fieldsetにbackground指定(color等)をしたとき、IEだけ上方向にはみ出して表示される。
原因はlegendにまで背景が適用されてしまうため。これはIEのバグらしい。

IEだけ背景なしにしてもよいが、そういうわけにもいかんという場合は、以下の方法で修正が可能。

続きを読む