ウェブサイトを構成するソースの編集方法

ソースを編集したい

ソースを編集したい

ウェブサイトを構成する主な技術はHTMLとCSS(スタイルシート)です。主にマウス操作で簡単に作成できるサービスやソフトウェアも多々ありますが、自力でソースを編集できるようになれば自由度は格段に向上します。

そこで本記事では、HTMLソースやCSSソースを編集したくなった際の最初のステップとして、現在お使いの作成環境に合わせたソース編集方法をご紹介いたします。


 
【本記事の目次】
 

作成環境別の、HTMLソースやCSSソースの編集方法

ウェブサイトを作る4つの方法

ウェブサイトを作る4つの方法

HTMLソースやCSSソースを記述したいと思った背景によって、ソースを編集する方法は異なります。記事「ホームページの作り方:4通りの作成方法から選ぶ」では、ウェブサイトの作り方には主に4つの方法があるとご紹介いたしました。ここではその4種類を基準にして、ソースの編集方法をご紹介いたします。


 
  1. 作成ソフトを使って作ったサイトのソースを編集したいと思ったとき
  2. CMSツールを使って作ったサイトのソースを編集したいと思ったとき
  3. ウェブ上の作成サービスを使って作ったサイトのソースを編集したいと思ったとき
  4. イチからウェブサイトを作ろうと思ったとき
  5. 誰かが作成した(どうやって作成されたのか分からない)サイトの運営を引き継いだとき

1. 作成ソフトを使って作ったサイトのソースを編集したいと思ったとき
ホームページ作成ソフトを使って作った場合

ホームページ作成ソフトを使って作った場合

ホームページ・ビルダーなどに代表される「ホームページ作成ソフト」を使って作っている場合は、そのソフトにソース編集機能があればソースの編集が可能です。

ソース編集機能のないソフトを使っている場合でも、HTMLなどの構成ファイルがローカルPC上にあるのなら、テキストエディタを使って編集可能です。また、そのソフトを今後は使わないのであれば、別のソフトへ移行する(※)などの方法でもソースの編集はできます。

[選択1] 作成ソフトを使いたい場合 → 作成ソフトでソースを編集する方法
[選択2] テキストエディタを使いたい場合 → テキストエディタでソースを編集する方法

※ローカルで動作するソフトであっても、アップロードできる場所が専用のサービスサイト内に限定されているような場合は、他のソフトに引き継げない可能性もあります。


 
2. CMSツールを使って作ったサイトのソースを編集したいと思ったとき
CMSツール(ブログツール)を使って作った場合

CMSツール(ブログツール)を使って作った場合

WordPressやMovable TypeなどのCMSツール(ブログツール)を使ってウェブサイトを作っている場合は、ソース編集画面を出したり、テンプレートの編集画面を出したりすることでソースの編集が可能です。

ただし、レンタルブログサービスなどを使っている場合は、ソース編集機能が制限されている場合もあります。その場合でも、データを一括バックアップ(ダウンロード)した上で、別の場所に自前で設置したCMSツールなどに引っ越せば自由にソースを編集できます。

[選択1] ソース編集の自由がある場合 → CMSツールでのソース編集方法
[選択2] ソース編集の自由がない場合 → 諦めるか、自前で設置したCMSへ引っ越す


 
3. ウェブ上の作成サービスを使って作ったサイトのソースを編集したいと思ったとき
ウェブ上のホームページ作成サービスを使って作った場合

ウェブ上のホームページ作成サービスを使って作った場合

ブラウザ上だけで簡単にウェブサイトを作成できるサービスを使っている場合は、そもそもソースの編集ができない場合や、編集できても一部分に限られる場合も多々あります。その場合は、簡易な作成機能が利用できる代償だと考えるしかありません。

ただし、そのソースを一旦PC内に保存(ダウンロード)した上で、ソースに編集を加えて、まったく別のサイトとして作り直すことはできる場合もあります。別のサイトとして作り直してでも「ウェブ上の作成機能」を超える範囲の部分で自由にソースを編集したい場合には、後述の一括ダウンロード方法を試してみて下さい。


 
4. イチからサイトを作ろうと思ったとき
テキストエディタでイチからソースを作成

テキストエディタでイチからソースを作成

この方法が採れる方々はそもそも本記事を読んでいないでしょうが、選択肢の1つとして一応紹介しておきます。

HTMLもCSSも実体はテキストデータですから、テキストエディタがあればイチからでも作成可能です。すべてのソースを自力で記述する方法が最も自由度が高いでしょう。記事「ホームページの作り方:4通りの作成方法から選ぶ」も参考にしてください。この場合は、次の方法があります。

[方法1] テキストエディタを使ってソースを作成する
[方法2] ソース編集機能のあるホームページ作成ソフトを使って作成する


 
5. 誰かが作成した(どうやって作成されたのか分からない)サイトの運営を引き継いだとき
既存のウェブサイトを誰がどうやって作ったのか分からないまま、管理を任された場合

既存のウェブサイトを誰がどうやって作ったのか分からないまま、管理を任された場合

会社や組織のウェブサイトで、前任者から引き継ぎ作業を経ないまま、突然ウェブサイトの更新を命じられるケースもあるでしょう。前任者が既に退職していて連絡が取れない場合など、「今までどうやって更新されていなのか?」すら分からない場合もあります。そのような場合は……、

HTMLなどのファイルがある場合:
ローカルPC上にHTMLなどの構成ファイルが存在するなら、上記の「4.イチからサイトを作ろうと思ったとき」の方法を使ってください。ファイルがあるなら、それを直接編集すれば良いので簡単です。前任者が使っていたソフトが不明でも、ファイルがあるなら別のソフトなりテキストエディタなりで編集できます。

HTMLなどのファイルが不明な場合:
HTMLファイルの所在が不明でも、サーバへのアップロード方法が分かっているのなら、そこからファイルをダウンロードすればファイルを入手できます。FTPソフトなどを使ってダウンロードしましょう。FTPソフトの設定方法すら不明な場合もあるかも知れませんが、それが分からなければたとえソースを編集できてもアップロードができません。契約しているレンタルサーバなどに問い合わせて、アカウント情報を調べましょう。

ファイルもサーバも何もかも分からない場合:
HTMLファイルの所在も不明だし、アップロード方法も不明だし、公開先もよく分からないので、「既存サイトを引き継ぎつつも公開場所は新しく用意したい」などという場合は、後述の一括ダウンロード方法を使うこともできます。ただし、この方法はとても手間がかかりますし完全でもありませんから最後の手段とし、もう少しよく調べてみた方が良いでしょう。


編集方法A:テキストエディタでソースを編集する方法

ソースの色分け表示が可能なテキストエディタを選ぶ
テキストエディタでイチからソースを作成

テキストエディタでソースを編集

HTMLソースもCSSソースもテキストデータですから、テキストエディタを使えば編集できます。テキストエディタにも様々な種類があり、フリーソフトとしても多数公開されています。自分の使いやすいテキストエディタを用意すると良いでしょう。「ソースの色分けができるか?」という点を基準にして選ぶのがお勧めです。

Windowsに標準搭載の「メモ帳」もテキストエディタの一種ですから、メモ帳を使って編集することもできます。しかし、色分けがなされないので把握も大変ですし編集ミスも防ぎにくいでしょう。

HTMLソースの色分け表示がない例(左側)と、色分け表示がある例(右側)

HTMLソースの色分け表示がない例(左側)と、色分け表示がある例(右側)


上図は、同じHTMLソースをメモ帳とEmEditorで表示してみた例です。ソースが文法に沿って色分け表示される方が、どこにどのような記述があるのかが把握しやすい上に、引用符の記述漏れなどもすぐに分かります。色分け表示のメリットについては、記事「タグを色分けできるテキストエディタを使う」でも解説していますのでご参照下さい。

なお、上図のようなソースの色分け機能は、高度なソース編集機能を備えたホームページ作成ソフトにもあります。後述の、(B)ホームページ作成ソフトでソースを編集する方法もご参照下さい。


 
テキストエディタで編集する方法(例:EmEditor)
テキストエディタでHTMLやCSSファイルを編集するには、単にファイルを読み込めば良いだけです。特に事前の設定などは不要です。対象がHTMLファイルでもCSSファイルでもJavaScriptファイルなどでも、操作方法はまったく同じです。ここでは筆者も長年愛用しているEmEditorを例にしてWindows10での操作方法をご紹介いたします。

ソースを編集したいファイルを右クリックして「EmEditor」を選択するだけ

ソースを編集したいファイルを右クリックして「EmEditor」を選択するだけ

編集したいHTMLファイルのアイコンを右クリックすると、右図のように「EmEditor」という項目が見えます。これをクリックするだけでファイルを開けます。そこに表示されていない場合でも、「プログラムから開く」項目や「送る」項目などから開けます。

※先にEmEditorを起動しておいてから、メニューやツールバーの「開く」項目を使って望みのファイルを選択して開くこともできます。

どちらの方法でも、HTMLファイルを読み込めばHTMLソースが編集できるようになり、CSSファイルを読み込めばCSSソースが編集できるようになります。そのほかJavaScriptファイルやPHPファイルなどでも同じです。ただ開くだけですぐに編集できるのがテキストエディタの利点です。

HTMLソース・CSSソース・JavaScriptソースなど、それぞれの文法規則に沿って色分け表示される

HTMLソース・CSSソース・JavaScriptソースなど、それぞれの文法規則に沿って色分け表示される


上図のように、HTMLソースを読み込めばHTMLの文法に沿って色分けされ、CSSソースを読み込めばCSSの文法に沿って色分けされます。HTMLソースの中にCSSソースが含まれているような場合でも、正しく色分けされます。色分けの規則や色は設定で自由に変更できます。


 

編集方法B:ホームページ作成ソフトでソースを編集する方法

自由にソースを編集できるホームページ作成ソフトを選ぶ
自由なソース編集機能を備えたホームページ作成ソフトもある

自由なソース編集機能を備えたホームページ作成ソフトもある

ソース編集機能のあるホームページ作成ソフトを使えば、HTMLソースやCSSソースを編集できます。市販のソフトのほか、無料のソフトもあります。

HTMLやCSSのソースを記述する場合、ページの本文内に文章として記述しても意味がありません。お使いのホームページ作成ソフトで、HTMLソースを編集できる状態に切り替えて、「本文の一部として」ではなく「ソースとして」記述する必要があります。

なお、ソースを編集する機能があっても、保存した時点でソースが自動整形されてしまうソフトウェアもあります。ソースを自力で記述したいなら、極力ユーザが記述した内容を勝手に編集してしまわないタイプのソフトウェアを使う方が分かりやすくて望ましいでしょう。

選び方に関しては、記事「ホームページ作成ソフトの選び方」で紹介していますので、併せてご参照下さい。アップロード機能まであるソフトを使えば公開作業も簡単です。

タグや属性・値などの自動補完機能の例

タグや属性・値などの自動補完機能の例

どうせ作成ソフトを使うなら、ソース編集の支援機能があるソフトを使うと便利です。ソースを編集している最中に、要素名や属性名などを自動で補完したり候補を表示したりして、入力の手間を省力化してくれる右図のような機能です。例えば、無料化されたウェブ作成ソフト「Microsoft Expression Web4」の紹介記事もご参照下さい。


 
ホームページ作成ソフトで編集する方法(例:ホームページ・ビルダー)
ソフトウェアによって操作方法は様々ですが、ここでは代表的な作成ソフトである「ホームページ・ビルダー」(Ver.21)での場合を例にしてご紹介いたします。

(1) ホームページ・ビルダー クラシックを使う
HTMLやCSSソースを自由に編集できるのは「ホームページ・ビルダー クラシック」側

HTMLやCSSソースを自由に編集できるのは「クラシック」側

ホームページ・ビルダーには、2種類の作成ソフト「SP」と「クラシック」が含まれています。このうち、HTMLソースやCSSソースを自由に編集できるのはクラシックの方です。

したがって、ソースを自由に編集するには「ホームページ・ビルダー クラシック」を起動して使います。


 
(2) HTMLソースの編集方法

ホームページ・ビルダー クラシックで編集している場合は、ウインドウの上部に「ページ編集」というタブが見えているはずです。その隣に「HTMLソース」という文字がありますので、そこをクリックしてタブを切り替えます(※下図の黄色矢印部分)。

「HTMLソース」というタブをクリックする

「HTMLソース」というタブをクリックする


HTMLソースを編集できるようになった

HTMLソースを編集できるようになった

すると、右図のようにHTMLソースが表示され、自由に編集できるようになります。一部分だけではなく完全なソースが見えていますので、head要素内でもbody要素内でもどこでも自由に書き換えられます。



 
(3) スタイルシートソースの編集方法

「スタイルシート」ボタンをクリック

「スタイルシート」ボタンをクリック

ホームページ・ビルダーの場合、CSSソースは「スタイルシートマネージャ」機能の中にある「CSSエディター」で編集できます。

まず、「スタイルシートマネージャ」を表示するには、ツールバー上にある右図のような「スタイルシート」と書かれたボタンをクリックします。


 
スタイルシートマネージャから編集したいCSSファイル名を選ぶ

スタイルシートマネージャから編集したいCSSファイル名を選ぶ

すると、右図のような「スタイルシートマネージャ」が表示されます。このウインドウの左上にCSSファイルの一覧が表示されていますから、編集したいCSSファイルをクリックします(右図の赤丸1部分)。一覧の下に見える「CSSエディターで編集」というボタンが押せるようになりますので、それをクリックします(右図の赤丸2部分)。


 
CSSソースを自由に編集できる「CSSエディター」

CSSソースを自由に編集できる「CSSエディター」

最後に、右図のような「CSSエディター」ウインドウが表示されます。ここでCSSソースを自由に編集できます。

編集後には上書き保存を忘れないようにして下さい。


 

編集方法C:CMSツール上でソースを編集する方法

既にお使いのCMSツール上でソースを編集するには、編集したい場所によって方法が異なります。 具体的な方法はCMSツールによって異なります。ここではWordPressでの編集方法を例としてご紹介しておきます。

エントリ(記事)のHTMLソースを編集する方法:
WordPressでは投稿欄の右上にある「テキスト」タブをクリックするとHTMLソースを編集できる

WordPressでは投稿欄の右上にある「テキスト」タブをクリックするとHTMLソースを編集できる

エントリ(ブログ記事や固定ページ)なら、その編集画面を出した上でソース編集機能を呼び出します。

WordPressの場合は、投稿欄の右上付近にある「テキスト」タブをクリックすると、HTMLソースを編集できます。

 
サイト内共通部分のHTMLやCSSソースを編集する方法:
共通部分のHTMLやCSSソースを編集するには「テーマの編集」機能を使う

共通部分のHTMLやCSSソースを編集するには「テーマの編集」機能を使う

サイト内で共通する部分のHTMLソースを編集したい場合や、CSSソースを編集したい場合なら、テンプレート(テーマ)の編集機能を使います。

WordPressの場合は、左側のメニューから「外観」→「テーマの編集」を選択した上で、右側のテンプレートリストから編集したい箇所を選択すると、HTMLやCSSソースを編集できます。

※WordPressの場合、多くのテンプレートはPHPで記述されていますから、PHPの文法を知っている必要があります。PHPは、プログラムソース部分以外はHTMLの文法で記述できますから、PHPソースを示す「<?php」~「?>」の外側にあるソース部分は、HTMLの知識だけでも編集できます。


 

CMSツール(ブログツール)を引っ越す方法

いま使っているCMSツール(ブログツール)ではソース編集機能が制限されているために、自前で設置したCMSツールにデータを移行させる(ウェブサイトを引っ越す)場合は、例えば以下のように操作します。
  • Step.1 現行のCMSツール(ブログツール)に投稿した内容を一括バックアップする
  • Step.2 現行のウェブサーバにある画像ファイルを一括ダウンロードする
  • Step.3 新しく用意したウェブサーバに、画像ファイルを一括アップロードする
  • Step.4 新しく用意したCMSツール(ブログツール)に一括インポートする

Step.1 いま使っているCMSツール(ブログツール)に投稿した内容を一括バックアップする
引っ越し用に全投稿をファイルに書き出す

引っ越し用に全投稿をファイルに書き出す

たいていのCMSツールには、全投稿を一括ダウンロードするための「エクスポート」機能があります。例えばWordPressの場合は、左側に表示されるメニューから「ツール」→「エクスポート」とたどると利用できます。ここから、全投稿を含んだXMLファイルをダウンロードできます。


 
Step.2 いま使っているウェブサーバにある画像ファイルを一括ダウンロードする
画像がアップロードされているディレクトリの中身を一括ダウンロードしておく

画像がアップロードされているディレクトリの中身を一括ダウンロードしておく

たいていの場合、CMSツールのエクスポート機能では、過去にアップロードした画像ファイルの一括ダウンロードまではできません。FTPソフトなどを使ってウェブサーバからダウンロードできる場合は、その方法でダウンロードするのが簡単です。

もし、FTPソフトではサーバにアクセスできないサービスを使っている場合は、「Step.1でダウンロードしたXMLファイル内から画像ファイルのURLだけを抜き出す」→「IrvineなどのダウンローダにURLリストを読み込ませてダウンロードする」という方法で一括ダウンロードできます。

Step.3 新しく用意したウェブサーバに、画像ファイルを一括アップロードする
新しく用意したCMSツールに投稿内容を書き戻す前に、まずは画像ファイルを一括アップロードしておきましょう。これはFTPソフトを使って、以前と同じ構造のディレクトリへアップロードすれば良いだけです。※引っ越し先には当然「FTPソフトで自由にファイルをアップロードでき、なんでもソースを自由に編集可能な場所」を選んでおきます。レンタルサーバならどこもそうでしょう。

Step.4 新しく用意したCMSツール(ブログツール)に一括インポートする
元のCMSツール(ブログツール)の種類を選択して全投稿を復元する

元のCMSツール(ブログツール)の種類を選択して全投稿を復元する

最後に、Step.1でダウンロードしておいたファイルを使って、新しく用意したCMSツールにインポート(アップロード)します。

その際、インポート用のツールをインストールしておかなければならない場合もあります。このとき、XMLファイルに含まれる「画像を参照するURL」は新URLに一括して書き換えておく必要がある場合もあります。すべてのファイルが相対参照で書かれていれば問題ありませんが、そうではない場合(=「http」から始まるURLで書かれている場合)は修正が必要です。


 
上記では、手順を簡単に説明しました。詳しい操作方法は、お使いのCMSツールやサービスによって様々です。どこかの段階で手間取った場合は、「お使いのCMSツール名」+「エクスポート or インポート」などの検索語で検索してみて下さい。

補足:ウェブ上のファイルを一括ダウンロードする方法

ホームページ作成ソフトやテキストエディタなどを使ってHTMLやCSSなどのソースを編集するためには、対象のファイルがPC上に存在しなければなりません。しかし、ウェブ上の作成サービスを使って作成した場合など、ローカルにファイルが存在せず、FTPソフトによるアクセスも制限されている場合もあります。その場合で、どうしてもソースを編集するためにファイルをPC上に得たいなら、ウェブページの一括ダウンロードツールを使う方法もなくはありません。

ウェブページを一括ダウンロードできるツールを使う
HTML内のリンクをたどることで、ウェブサイトを構成するファイルを一括ダウンロードする類いのフリーソフトがあります。「ホームページクローン作成」・「GetHTMLW」・「WeBoX」などです。フリーソフトでもたくさんあります。1つ1つURLを指定しなくても、トップページのURLを指定するだけで、リンクを自動的にたどってダウンロードしてくれます。ただし、以下に挙げる問題(仕様)があるので、これは最後の手段だと考えておく方が良いでしょう。

※完全にダウンロードできるわけではありません
HTML内のすべてのリンクをたどっても、CSSソース内から読み込まれている画像があったり、JavaScriptによって生成されるリンクが存在したりする場合には、CSSソースやJavaScriptソースの内容まで自動で解析しないと完全には収集できません。したがって、FTPでサーバからダウンロードするほど完全なダウンロードはできません。

※動的なページのプログラムは得られない
ウェブ上で動的に生成されているページであっても、静的なHTMLファイルとしてしか保存できません。CGIやPHPなどで生成されたページでも(CGIソースやPHPソースの形ではなく)生成後のHTMLソースが得られるだけです。

※編集できてもアップロードできなければ意味がない
この方法では、ローカルにファイルを得ることはできますが、ウェブ上の表示を更新するためには、同じ場所にアップロードできる必要があります。しかし、この方法を使うとそもそも同じ場所にはアップロードできません。他の場所に引っ越す形になっても良いのであればこの方法が使えます。

ソースを編集できない(編集しても意味がない)ありがちなミス

ありがちなミスを2点ご紹介しておきます。

ブラウザで表示したソースを編集したところで意味がない。
IE11ではHTMLソースがメモ帳に読み込まれて表示される場合もあるが、そこで直接編集してもウェブページを更新できるわけではない

IE11ではHTMLソースがメモ帳に読み込まれて表示される場合もあるが、そこで直接編集してもウェブページを更新できるわけではない

ブラウザではソースを表示することができます。このとき、テキストエディタでソースが読み込まれるブラウザもあります。しかし、そのソースを編集したところで意味はありません。一時領域に展開されたHTMLは、変更してもアップロードできるわけではありませんし、そのまま破棄されるだけだからです。


 
本文として記述しても意味がない。
作成ソフト上で、文字としてソースを書いても意味がない

作成ソフト上で、文字としてソースを書いても意味がない

HTMLソースもCSSソースもその他のソースも、本文として記述しても意味がありません。

ホームページ作成ソフトなどを使う場合は、右図のように「ブラウザ上の見た目そのままの状態で編集できる領域」にソースを書いても、単にそのソースが文字としてブラウザ上に表示されるだけです。

これまでにご紹介したように、まずはソースを編集できるモードに変更してから、ソース内に記述する必要があります。


 

こまめな保存と、頻繁な表示確認をしよう

HTMLソースやスタイルシートソースを直接編集する場合は、こまめに上書き保存して、ブラウザでの表示確認も頻繁にしましょう。こまめに保存しておけば、何らかのトラブルでソフトやOSが落ちてもダメージを最小限に抑えられます。エディタ側の自動バックアップ機能などを活用すると便利です。また、頻繁に表示確認をしておけば、記述ミスによって表示が大きく崩れてしまったとしてもUndo機能などを使って元に戻せます。

ぜひソースを直接記述して、自由自在にウェブページを作ってみて下さい。

【関連記事】


※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。