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]フォーカスされたらinputのvalue値を消す

検索とかURLのテキストエリアなんかで使われることが多い。 マウスフォーカスで、あらかじめ表示してあるvalueを非表示にするスクリプト。 このブログテーマの検索で使われてます。 value="Keyword( … 続きを読む

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

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

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

続きを読む

[JS]ロールオーバースクリプト(ソース変更なし)

HTML側の変更なしで、メニュー内の画像を全部ロールオーバーさせるスクリプトを作ってみた。
relにしろclassにしろイベントハンドラにしろ、ロールオーバーさせるためだけに追加するのは嫌、という時に良いかも。

続きを読む

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

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

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

続きを読む

[JS]クリックで表示・非表示を切り替える

クリックで指定した要素の表示・非表示を切り替えるスクリプト。 表示エリアを稼ぎたい時に便利。 <strong onclick="Toggle(‘A’)">Sample</strong … 続きを読む

3Column 5box Elastic TopExtra

3Column 5box Elastic TopExtra

  • 3Columun 5BOX
  • #header>#extra>#menu(wrapper)>#content(wrapper)>#footer(wrapper)
  • XML宣言あり
  • 文字コード:UTF-8

続きを読む

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

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

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

»サンプル

続きを読む

3Column 5box Fixed

3Column 5box Fixed

  • 3Columun 5BOX
  • #header(wrapper)>#content(wrapper)>#menu>#extra>#footer
  • XML宣言あり
  • 文字コード:UTF-8

続きを読む

[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だけ背景なしにしてもよいが、そういうわけにもいかんという場合は、以下の方法で修正が可能。

続きを読む

ColorMe!ShopProでLightboxを使う

カッコイイ写真表示の代名詞といったらLightbox系のAjaxライブラリですけど、
ColorMe!ShopProはヘッダが操作出来ないので、Usage通り<script>をヘッダに入れて~ということは出来ない。

なので一見使用不可能に見えるけど、結構あっさり使えます。



続きを読む

[AS]FLVPlayBackでループ

FlashのコンポーネントFLVPlayBackでループさせる方法について。
自動再生と自動巻き戻しはあるがループさせるものではないので、延々リピートさせたい場合はActionscriptを使わないと出来ないらしい。

続きを読む

3Column 5box Elastic

3Column 5box Elastic

  • 3Columun 5BOX
  • #header>#content(wrapper)>#menu>#extra>#footer(wrapper)
  • XML宣言あり
  • 文字コード:UTF-8

続きを読む

2Column 6box Elastic LeftExtra

2Column 6box Elastic LeftMenu 2Halves

  • 2Columun 6BOX
  • #header>#menu>#content(wrapper)>#extra>#other>#footer
  • XML宣言あり
  • 文字コード:UTF-8

続きを読む

2Column 4box Fixed L-hlv

2C_4box_ Fixed_LeftMenu

  • 2Columun 4BOX
  • #header>#content(wrapper)>#menu(wrapper)>#footer
  • XML宣言あり
  • 文字コード:UTF-8

続きを読む

2Column 5box Elastic TMLE

2Column 5box Elastic TMLE

  • 2Columun 5BOX
  • #header>#menu>#extra>#content(wrapper)>#footer(wrapper)
  • XML宣言あり
  • 文字コード:UTF-8

続きを読む