「WordPressで作ったサイトのトップページのHTMLを編集したい！」けど、どこでHTML編集したらいいか分からない…。とお悩みではないですか？
今回の記事ではWordPressのHTML/CSSの編集方法について詳しく解説をしてみました。WordPressはテーマを変更すれば、HTML/CSSを編集することなく、簡単にサイトのデザインを変更することができます。
目次
投稿・固定ページのHTMLを編集する方法
まずは投稿ページと固定ページのHTMLを編集する方法について解説をしていきます。こちらは初心者の方でも簡単に編集することができますので、方法を知っておくと良いでしょう。
投稿ページのHTMLを編集する方法
それでは投稿ページのHTMLを実際に編集していきましょう。まずは、WordPressの管理画面にログインをしてください。
メニュー内の「投稿」をクリック
左側のメニュー内にある「投稿」をクリックしてください。
編集したい投稿ページのタイトルをクリック
編集をしたい投稿ページのタイトルをクリックしてください。新しい投稿ページをHTMLで編集したい場合は「新規追加」をクリックしてください。
「テキスト」をクリック
「テキスト」をクリックするとHTMLが表示されます。編集した内容は「変更をプレビュー」より確認できます。
固定ページのHTMLを編集する方法
続いて固定ページのHTMLを編集していきましょう。編集手順は投稿ページとほとんど同じです。
メニュー内の「固定ページ」をクリック
左側のメニュー内にある「固定ページ」をクリックしてください。
編集したい固定ページのタイトルをクリック
編集をしたい固定ページのタイトルをクリックしてください。新しい固定ページをHTMLで編集したい場合は「新規追加」をクリックしてください。
「ビジュアル」をクリック
「テキスト」をクリックするとHTMLが表示されます。編集した内容は「変更をプレビュー」より確認できます。
テーマのHTMLを編集する方法
それでは次にWordPressで作ったサイトのデザインを編集する方法について解説していきます。
WordPressはテーマを変更することでサイトのデザインをHTMLを編集せずに変更することができますが、100%自分好みのデザインにするには、スペースやフォントサイズなどを細かく調整したくなりますよね。
もちろんWordPressもHTML/CSSを編集することができます。しかし、間違えた修正をしてしまうとサイトのデザインが大きく崩れたり、サイトが表示されなくなたりしてしまいます。最悪の場合、サイトを復旧することができなくなってしまうので、初心者の方にはあまりおすすめいたしません。
WordPressの構造について
WordPressは「動的HTML」という仕組みでサイトを表示しています。上の図の様に複数のphpファイルによって1つのページを表示しており、厳密にいうとHTMLファイルではなくPHPファイルを編集することになります。PHPファイルはちょっとしたミスでもエラーになってしまうので、編集する際は細心の注意をしましょう。
HTMLファイルがある場所について
それではHTMLを編集する方法について解説していきます。WordPressの管理画面にログインし、左側に表示されているメニューの「外観」内にある「テーマの編集」をクリックしてください。
WordPressのサイトを構築しているファイルの一覧が表示されるので、編集したいファイルをクリックして編集を行います。編集が終わったら「ファイルの更新」をクリックすることによりサイトに反映されます。
・page.php：固定ページテンプレート
・single.php：投稿テンプレート
・archive.php：投稿一覧テンプレート
・style.css：メインのスタイルシート
CSSファイルの編集方法
上記で説明した「テーマ編集」内の「style.css」がCSSファイルになります。このファイルにCSSを追記・編集した後に「ファイルの更新」をクリックしてサイトに反映させましょう。
またはメニューの「外観」内の「カスタマイズ」をクリックすると「追加CSS」という項目が表示されます。この機能を使ってCSSを追加することも可能です。この機能なら間違えて元々のCSSを消してしまったなどのミスを防ぐことができます。
「テーマの編集」が表示されない場合
WordPressの管理画面にログインをしても「外観」や「テーマの編集」の項目が表示されない場合は、ログインをしているアカウントに権限が割り振られていない可能性があります。管理者に問い合わせて権限を追加してもらいましょう。
まとめ
何度もお伝えしておりますが、間違えた編集をしてしまうとサイトが表示されなかったり、復旧できなくなる場合がありますので、初心者の方はPHPやHTML/CSSについて知識がある方にお願いをしましょう。
