公開日: 更新日:

【webデザイナーも知っておきたい】DreamWeaverで初めての正規表現

【webデザイナーも知っておきたい】DreamWeaverで初めての正規表現

どうも!ヤマダカイト(@slash_kaito)です。
今回は正規表現に助けられたお話。

公式からyahooショッピングへのLPの移し替え作業で…

ある日降って湧いた、公式サイトからyahooショッピングへのLPの移し替え作業。
手順としては、公式のほうから画像引っ張って、価格を差し替えて、Yahoo!トリプルのサーバーに上げて、公式のHTMLを引っ張ってパス変えて〜という感じです。
さーてザクザクやっていきますか〜と思っていたところ、これは・・・

独自CMSの文字数制限で、altタグをとる必要が

楽天やyahoo!ショッピングなどの独自CMSには、文字数制限があります。

またこれが絶妙な文字数でして、ヤフーの場合は、ひとつの枠で5000文字。

それが一商品あたり3つあります。

yahooのフリースペース

5000文字というと画像に長めのaltタグを入れてたら、すぐに超えてしまいます。

残念なことに、公式から引っ張ってきたHTMLには全画像にaltタグが入っていました。

これを手打ちで消していくのは、乗車率200%の満員電車に乗るよりも嫌です。

面倒くさがりのヤマダは「いかに楽してaltタグの中身だけ消すか」を探し始めます。

すると、ありました。ご存知の方もいるでしょう。

その名も「正規表現」。

簡単なところから始めていきます。

 

初心者のための正規表現

正規表現の使い方

DreamWeaverでの正規表現の使い方を解説します。
まず検索画面を出します。Macなら⌘F、WIndowsならControl+Fですね。
すると、フィルターと書かれたところに「.∗」のマークがあります。これにチェックを入れれば、正規表現での検索が可能です。

大量のaltタグの中身だけを指定する正規表現

長いaltタグを全部一気に取ってしまいたい。
そんな時は、

正規表現1

 

検索画面でMacなら「.∗」マークをチェック、Windowsならアンテナマークをチェックして「正規表現を使用」にチェック。
検索窓に「alt=”.∗“」を指定してください。
すると、、、

正規表現2

 

alt内の文言のみ、ズバッと全て指定してくれます。
あとは、空白で置換するなり、alt=””で置換するなりご自由に。

「すべて置換」で一気に変わります。あ、試しにひとつだけ置換してみるのがオススメです。

正規表現3

 

スッキリ!!!!!

その他の正規表現もあるのですが。。。

まだまだ覚えたてなので、全然わかりません(汗
正規表現の詳しい仕組みについての解説は、web屋の芝生DIYさんのこちらの記事や、吉川ウェブさんのこちらの記事にくわしく書かれていますので、ご参考ください。

 

本日のまとめ

先日覚えたての正規表現についてのお話でした。
どうやらDreamWeaverでなくとも、テキストエディットなどでも使えるようです。
要は「.*」が異なる文字列でも選択してくれる魔法のキーワードだということです。
その他にも便利な使用方法がたくさんありそうです。

使いこなして「◯◯さん仕事早いですねっ!」なんて言われたいですね。

ヤマダ
この記事が役に立ったら、シェアorはてブしてくれるとメッチャ喜びます!

この記事が気に入ったら
いいね ! をお願いします

Twitterでもデザインや日々のことをつぶやいています。

webデザインカテゴリの最新記事