パソコンの有効活用で、ホームページの作成を始めました。
自作パソコンや周辺機器、スマホに関する話題です。
root化 や 部品交換等の改造もメモしています。
使用している気に入ったアプリの紹介・・等々。
   

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

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

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

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

  1. HTML5で廃止された要素一覧
  2. 廃止された要素 font を使わず、style で色指定する方法
  3. すでに作成したホームページの
    <font color... を <span style... に自動置換する方法

HTML5で廃止された要素一覧

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

HTML5で廃止された要素

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

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

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

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

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

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

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

使用しない設定は

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

となります。

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

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

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

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

  1. ホームページビルダー上部メニューの「表示」
  2. 「ツールバー」
  3. 「ユーザー定義の設定」をクリックして設定画面を開く
  4. 「ユーザー定義ツールバー」のタグをクリック
  5. 「新規作成」をクリックし好きな名前を付けて「OK」
  6. 画面上に小さな窓が出来るので、クリックして上部のツールバーにドロップすると自分用のメニュー領域が出来る
  7. 次に設定画面の「コマンド追加」タブをクリック
  8. 「分類」の選択窓で「書式」を選択
  9. 「コマンド一覧」の選択窓で「フォントスタイルの設定(span)」を選択し、ドラッグしたまま、自分用のメニュー領域にドロップすれば追加されます
  10. 次回からは、メニューバー上の「フォントスタイルの設定(span)」をクリックするだけで使用出来るようになり非常に便利です

すでに作成したホームページの
<font color... を <span style... に自動置換する方法

すでに作成したホームページが500ページを超えている為、面倒なので color を使ったままにしておくか、<span style を使って変更置換するか迷っていました。

  • 今までの color を使った色指定の場合は
    <font COLOR="#0000ff">最近の更新</font>
  • インラインで style を使った色指定の場合は
    <span style="color : #0000ff;">最近の更新</span>

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

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

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

  1. アプリ MultiReplace の設定を変更
    オプション→置換後のファイル名→サブフォルダに保存する
    区切り文字を「/」から「@」に変更
    正規表現を使用する、大文字小文字を区別しない
  2. 検索・置換したいファイルを画面左上のファイル名の上にドロップします
    複数のファイルをドロップすると一括で変換できます
    フォルダをドロップすることはできないようです
  3. 私の今までの color を使った色指定は下記のようになっています
    <font COLOR="#0000ff">最近の更新</font>
    #0000ff の部分はすべて7文字になります
    最近の更新 の部分は色々な長さの文字列があります
  4. 正規表現を使った検索設定部分は
    <font COLOR=\"(.......)\">(.*?)<\/font>@
    #0000ff は7文字なので (.......)のように . を7個並べる
    最近の更新 の部分は色々な文字列があるので (.*?) とする
    () でくくった中身は、順に $1 $2 に代入される
    " や / を検索したい時は \ を付けて \" や \/ とする
    行末の @ は検索と置換の区切り文字です
  5. 正規表現を使った置換設定部分は
    4. の行末の区切り @ に続けて記入します
    <span style="color : $1;">$2</span>
    $1 と $2 の部分は検索時に代入された文字列が使用されます
  6. 置換を実行すると結果は
    <span style="color : #0000ff;">最近の更新</span>

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