WordPress上でHTMLとCSSを編集する方法

スポンサーリンク

こんちは。ワタナベです。
今日はwordpress上で自分が書いた記事のHTML・CSSを編集する方法について解説したいと思います。
HTML・CSSが出来れば例えば目次を作ることができます。
シンプルな目次の作り方も記事に書いています。↓

こんにちは。 本日はブログ記事で初めて「目次」をプラグイン無しで作成してみたので手順を紹介します。 そんなに大変ではないですし、HT...

1.HTMLとCSSてなんやねん知らんねん

本当に何も知らない人はこの記事を見ないと思うのですが一応前知識として解説しておきます。
HTML:サイトを構成する言語。サイトはその言語の命令に従って動く。
CSS:HTMLが指定した箇所の機能を細かく設定する言語。サイトのデザイン面に寄与することが多い。
イメージは下の図になります。

HTMLが指定した箇所にCSSで書いた詳細が反映されるといったイメージです。
では、実際にそれぞれの編集方法を紹介します。

2.HTMLを編集する

まずは記事のコアとなるHTMLですが、投稿の編集>「テキスト」タブで編集中の記事をHTMLの形式で見ることができます。

HTMLを編集したい場合はここをいじっていくわけです。
逆に、「テキスト」タブでは完成形がわからなくて嫌だという人は、完成形の記事を見ながらHTMLがどうなっているのか確認することもできます。

公開した記事、または「変更のプレビュー」をクリックして出てきたページ上で右クリック>「検証」です。

すると画面右側になにやらゴチャゴチャした英語だらけのタブが出てきます。これがその記事のHTMLです。

スクリーンショット 2019-01-21 0.15.44

(↑英文だらけのタブ)

ここまでゴチャゴチャしていると一気に全部のHTMLを確認できませんよね。

そこで記事上で、HTMLを見たい部分をドラッグして選択>右クリックして「検証」を押してみましょう。その部分のHTMLに飛ぶことができますよ。

(↑HTMLを見たい場所の上で右クリック>検証)

(↑該当箇所のHTMLが青くライトアップされます。)

※今回は対象外ですが、サイトの記事全てに対して変化を加える、サイト全体の設定に関わるHTMLを編集する場合はダッシュボード>外観>テーマの編集でサイトテーマのHTMLをいじれますよ。
※サイトのシステムをイジりたい!ってなったら自分が契約しているサーバーのFTP(File Transfer Protocol)を調べましょう。FTPはサイトに関するファイルが全て入っているサーバー上の場所です。ただしシステムをいじるとサイトが壊れる可能性があるので、慎重にやり方調べてからにしましょう。

3.CSSを編集する

次にCSSです。デフォルトでは記事にCSSは何もありませんので、自分で何かデザインを変更したい、追加したい時にCSSを用います。
CSSを追加するためには、(ダッシュボード>外観>)カスタマイズにまず移動します。

すると、左側にタブ、右側に記事といった画面になります。
左側のタブを下にスクロールしていくと・・・

スクリーンショット 2019-01-21 0.22.34

ありました。「追加CSS」を選択します。

すると、このように今まで書いてきたCSSが表示されます。
ここに、HTMLで指定された箇所についてCSSを書き加えると記事に反映されるというわけです。
具体例はこの記事で書いています。↓

こんにちは。 本日はブログ記事で初めて「目次」をプラグイン無しで作成してみたので手順を紹介します。 そんなに大変ではないですし、HT...

ちなみに、「投稿の編集」画面で「変更をプレビュー」>「カスタマイズ」>右クリックで「検証」
こうするとCSSを編集しながらHTMLを確認できます。

スクリーンショット 2019-01-21 0.27.21

しかもHTMLの各行左側についている3つの点のマーク(・・・)>Edit as HTMLで一時的にHTMLを編集でき、このページ上では記事にも反映されます。

スクリーンショット 2019-01-21 0.29.50
スクリーンショット 2019-01-21 0.30.31

ただし実際に反映するためには投稿の編集>「テキスト」タブにて書き換える必要がありますので注意してください。

私はいつも「投稿を編集」画面と「カスタマイズ」画面を行ったり来たりしてHTML・CSSを編集しています。笑

まとめ

超初心者の方は「ドットインストール」等無料の学習動画でざっとHTMLとCSSの基礎を学ぶとなんとな〜くこれらがなんなのかわかってきますよ。動画を全部見てもいいとは思いますが、そんなに人生長くないので基礎編だけ見てブログの編集に取り掛かった方がいいです。

HTML、CSSとはどういう役割を持つのかざっくり理解→自分のブログをこうしたい→HTML、CSSのコードをググる→自分のブログに反映
このような順序でどんどんアウトプットしていくのが近道なのではないかと思います。

一緒に頑張りましょう。ではでは。

コメント

  1. […] WordPress 上で HTML と CSS を編集する方法 | ワタナベ君の見解 […]