ホームページビルダー
HTML5で廃止された要素を使わない

HTML5では廃止されている <font>タグをいまだに使っていました。

ホームページビルダー21のクラシックを使って、ページ編集やソース編集をしている時、カラー設定アイコンで書式設定すると廃止された<font>が勝手に使用されています。
Ver 22 では<span>設定を使うように改善されました。

HTML5で廃止された要素関連メニュー

  1. HTML5で廃止された要素一覧
  2. 廃止された要素 font を使わず、style で色指定する方法
  3. すでに作成したホームページの
    <font color... を <span style... に自動置換する方法
  4. (参考)
    上部メニューのツールバーに自分用のコマンドを追加する方法

HTML5で廃止された要素一覧

fontタグに限らず、HTML5で廃止された要素を使い続けるのはまずそうなので、使ってはいけないタグを一覧表示しました。

HTML5で廃止された要素

  • acronym〔頭字語〕
  • applet〔Javaアプレットの埋め込み〕
  • basefont〔ページの基準フォントサイズ〕
  • big〔フォントを大きく表示〕
  • center〔要素の左右中央揃え〕
  • dir〔ディレクトリ型リスト〕
  • font〔フォント装飾(色・サイズ・種類)〕
  • frame〔フレームの定義〕
  • frameset〔フレーム(frame要素)の構成〕
  • isindex〔キーワード検索入力欄の埋め込み〕
  • noframes〔フレーム未対応ユーザー向けの代替テキスト〕
  • s〔テキストに取消線を引く〕
  • strike〔テキストに取消線を引く〕
  • tt〔テキストを等幅フォントにする〕
  • u〔テキストに下線を引く〕

HTML5で廃止された要素 font を使わないで色指定する

ホームページビルダー21を使ってページ編集やソース編集をする時、文字のカラー設定が簡単にできるようになっているので、つい使っていました。

色を指定したい文字を選択反転し、メニューのカラー指定ボタンを押すだけ。

しかしこの場合は下記のようなソースとなる。

 <font COLOR="#ff0000">色を指定した文字</font>

font はHTML5では廃止された要素なので極力使用しないほうが良い。

使用しない設定は<span を使って

 <span style="color : blue;">色を指定した文字</span>

となります。

ホームページビルダー22では改善され<span を使ってセットされます。

ホームページビルダー21で<span>を使った色指定の手順は

  1. 「ページ編集」画面でカラー指定したい文字を選択反転した状態にします
  2. 選択反転した文字上でマウスを右クリック
  3. 表示されたメニュー内の「スタイルの設定」をクリック
  4. 「スタイルの設定」画面が開きます
  5. 「色と背景」のタブをクリック
  6. 「前景色」でカラーを指定して「OK」を押せば選択反転した文字のカラー設定ができます
  7. 当然カラー設定だけではなく、色々なスタイルの設定も出来ます

上部メニューに「フォントスタイルの設定(span)」を追加すればワンクリックで「スタイルの設定」画面が開くので多少便利に使用できます。
(下記のコマンド追加方法へジャンプ

上部メニューのツールバーに自分用のコマンドを追加する方法

「フォントスタイルの設定(span)」を上部メニューに追加する方法

  1. ホームページビルダー上部メニューの「表示」をクリック
  2. 「表示」>「ツールバー」 >「ユーザー定義の設定」
  3. 「ユーザー定義の設定」をクリックして「設定画面」を開く
  4. 「ユーザー定義ツールバー」のタグをクリック
  5. 「新規作成」をクリックし好きな名前を入力して「OK」
  6. フォーカスを画面上に移すために、ツールバー上をクリックします
  7. ホームページビルダーの画面上を探すと小さな窓が出来ているので、クリックして上部のツールバーの配置したい場所にドロップすると自分用のメニュー領域が出来る
  8. 次に「設定画面」の「コマンド追加」タブをクリック
  9. 「分類」の選択窓で「書式」を選択
  10. 「コマンド一覧」の選択窓で「フォントスタイルの設定(span)」を選択し、ドラッグしたまま、自分用のメニュー領域にドロップすれば追加されます
    表示させるアイコンや文字を選択指定できます
  11. 時々表示位置が画面右端に移動するので、先頭の区切り部分をクリックして移動させます
  12. 次回からは、メニューバー上の「フォントスタイルの設定(span)」をクリックするだけで使用出来るようになり非常に便利です

MultiReplace を使って
<font color... を
<span style="color... に自動置換する方法

font要素をstyleを使って書き換えました。

すでに作成したホームページが500ページを超えている為、一つ一つ手で変更すると膨大な時間がかかるので、アプリMultiReplace を使って一括で置換しました。

  • 今までの color を使った色指定の部分
    <font COLOR="#0000ff">色々な説明文</font>
    これを
  • インラインで style を使った色指定の
    <span style="color : #0000ff;">色々な説明文</span>
    に置換しました

正規表現を使った置換で簡単に一括変換できる方法がわかりましたので、ここで整理しました。

検索・置換には アプリ MultiReplace を使用させて頂きました。


アプリ MultiReplace を使った検索・置換の設定と使用方法

アプリ MultiReplace の設定と使用方法

  1. アプリ MultiReplace のオプションを変更
    オプション→置換後のファイル名→●サブフォルダに保存する
  2. 画面下の設定を使いやすく変更する
     区切り文字を「/」から「@」に変更
     ●正規表現を使用する
     □大文字小文字を区別しない
     ●単一行モード
  3. 画面右側の「A」「B」・・・の好きなタブを選択し、
    〇1、〇2・・・の中から記録したい場所を指定
  4. 左側の窓枠の中に検索@置換の設定を記入します
    設定方法は下記の検索と置換の設定の説明を確認して下さい
    行先頭に@を2個並べ@@と記入するとコメントとなります
  5. 検索・置換したい対象ファイルを画面左上の「ファイル名」の上にドロップします
    エクスプローラー等を使って、複数のファイルを選択しドロップすることもできます
    フォルダをドロップすることはできないようです
  6. 右上の「置換」をクリックすると変換が実行されます

検索部分と置換部分の設定例

  1. 基本的な書き方は、@の両側に
     検索部分の設定@置換部分の設定
    のように記入します
  2. 検索したい部分は下記のようになっています
    <font COLOR="#0000ff">色々な説明文</font>
    #0000ff の部分はすべて7文字になります
    色々な説明文 の部分は色々な長さの文字列があります
  3. 正規表現を使った検索部分の設定
    <font COLOR=¥"(.......)¥">(.*?)<¥/font>@
    • #0000ffは7文字なので (.......)のように . を7個並べる
    • 色々な説明文 の部分は文字数が異なるので (.*?) とする
    • () の中はそのまま、左から順に $1、$2 に代入される
      $1=#0000ff、$2=色々な説明文 となります
    • $1、$2 は置換先で使用できる
    • " や / を検索したい時は ¥ を付けて ¥" や ¥/ とする
    • 行末の @ の左側は検索設定、右側は置換設定となります
    • その他 正規表現一覧のルールを確認して記入します
  4. 正規表現を使った置換部分の設定
    4. の行末の区切り @ に続けて記入します
    <span style="color : $1;">$2</span>
    $1 と $2 の部分は検索時に代入された文字列が使用されます
  5. 置換を実行すると結果は
    <font COLOR="#0000ff">色々な説明文</font>

    <span style="color : #0000ff;">色々な説明文</span>
    となります

他にも色々なアプリがあると思いますが、このアプリも便利です。