スポンサーリンク

ワードプレスでHTMLやCSSを編集する方法

ワードプレス

ワードプレスを使っていると「ここをもう少し変えたい」「HTMLが書き換えられるといいんだけど」「CSSを直接書き換えたい」といったことが私はありました。

 

そこで今回は、ワードプレスでHTMLやCSSを直接書き換える方法を紹介いたします。

※HTMLやCSSを編集することでページが表示できなくなることもありますので自己責任でやるようにしてください。(編集前に必ずバックアップを取りましょう)

手順① 編集したいHTMLの場所を確認

HTMLやCSSの編集したい場所を適切に把握しなければいけません。そのためにまずは、編集したい場所がHTMLのどの場所なのかを確認します。

今回は、タイトルとキャッチフレーズの部分をもう少し中央に寄せたいと思っており、中央に寄せるためにCSSを編集する方法と例に書いていきます。

 

GoogleChromeブラウザの場合は、画面上でマウスの右クリックを押し、出てきたメニューの検証をクリックします。

ワードプレス HTML 編集

検証で出てきたウィンドウの左上の矢印マークをクリックします。

ワードプレス HTML 編集

編集したい場所、今回は「タイトルとキャッチフレーズ」の部分を編集したいので、「タイトルとキャッチフレーズ」の部分にマウスを合わせ、ハイライト表示されたらクリックします。

ワードプレス HTML 編集

すると、検証で出てきたウィンドウのHTMLコードが書いてある部分に、クリックした部分、今回は「タイトルとキャッチフレーズ」のところでクリックしたので「タイトルとキャッチフレーズ」の部分のHTMLコードのところがハイライト表示されます。ここまでで、今回編集したいHTMLの部分がわかりました。

ワードプレス HTML 編集

今回編集したいのは、<div class="header-titles">であることがわかりました。

CSSはclass="header-titles"なので、このクラスを編集したらよさそうですね。

手順② ワードプレスで編集したいファイルを確認

続いては、ワードプレスの管理画面側から先ほど見つけたCSSのクラスheader-titlesの書いてあるファイルを探していきます。

ワードプレスの管理画面の「外観」にある「テーマエディター」と選択します。

ワードプレス HTML 編集

すると「注意!WordPress ダッシュボードでテーマを直接編集しているようです。直接編集しないようお勧めします。直接テーマを編集するとサイトの崩壊につながるおそれがあります。また将来の更新により変更が失われる場合があります。」と表示されますが、適切に編集すれば何も問題はありません。(自己責任ですが笑)

ワードプレス HTML 編集

そしたら、HTMLコードが編集できる画面が表示されます。そこで先ほど調べたCSSのクラス名header-titlesを探します。

(このとき、macであれば【command】+【F】、Windowsであれば【Ctrl】+【F】header-titlesと入力してエンターキーを押すことで簡単に場所を検索することができます。それでもヒットしない場合はないということです)

ヒットしない場合は、このファイルではない可能性があります。HTMLコードの書いてある右側に「テーマファイル」というものがあり、いくつものファイルが書かれておりますので、対象のファイルを探しましょう。

ワードプレス HTML 編集

今回はこのあたりが対象のクラス名のところ、編集したいCSSのところということがわかりました。

手順③ ワードプレスの編集ファイルのバックアップ

編集したい場所、ファイルがわかったところで、確実にファイル、コードをバックアップしておきましょう。

壊れてから戻すのは大変なのですが、バックアップがあればとても簡単です!

 

私の場合は、いちいち別ファイルで作ってといったバックアップは面倒なので、編集前にコードを全部コピペしてメモ帳、エディターに貼り付けてバックアップを取っています。

 

そのため間違えてしまった場合などは、メモ帳にコピペしたコードに書き換えて更新し直せば簡単に戻すことができます!

手順④ ファイルを編集して更新

あとは、実際に編集をしてみましょう。

今回は、このキャッチフレーズの文字をもう少し大きく、さらに太字にしたい場合を想定して進めていきます。

ワードプレス HTML 編集

ということだったので、header-titlesのところに左側の余白を今以上に取るように書き換えていきます。(今回は、コードの最下部に追記して反映されるようにします)

これできっとCSSが更新されたと思われるため、画面で確認していきます。

手順⑤ 更新されたことの確認

ブラウザでの表示、ブラウザのリロードなどを行ってみるとレイアウトが変わっていました。

このようにして、ワードプレスではHTMLやCSSの編集が可能です。また、ワードプレスはPHPで構成されており、PHPファイルに対しても編集をすることが可能です。

最後に

ワードプレスで作ったはいいけど、「ここをもう少し変えたい」などといったとき、ワードプレスは意外と自由にデザインが変えられるのだと思いました!

HTMLやCSSを勉強したことのある人であれば、簡単に書き換えられるのでぜひチャレンジしてみてください!

※必ずソースのバックアップを取った上で。

コメント