WordPressを扱う上で幸せになれるプログラミング知識（HTML/CSS）

4月20日〜6月末（76期）までテックキャンプ エンジニア転職コースを受講し、現在IT企業へ転職活動中のまさひで(@john01tgmck)です。

テックキャンプ の学習環境や、受講して感じたこと、転職活動等をブログにまとめています。

ブログを運営する上で、プログラミング知識があると幸せになれると感じました。

masahide（筆者）

WordPressってコード書けなくても良いんじゃないの！？

確かに「コードは書けなくても良い」でも、『書けた方が良い！』

最低限あると嬉しいコードの知識

WordPressを触っていて、「この要素消したいなー」「ここの枠線の色変えたいなー」と思ったことはありませんか？

そんな時にCSSの基礎知識があると、編集が楽にできるようになります。

CSSで枠線の色を変えてみる

枠線の色を黒色にしたいけど、どう変えたら・・・

masahide（筆者）

その悩み解決します！

まずは、どのようなコードが生成されているか見てみます。

検証ツールを開くと、コードがズラーーーーっと出てくるので、拒否反応してしまうかもしれませんが、大丈夫！

赤丸で囲っているElementsというタブをクリックして、探したい要素（今回は赤枠部分）をクリックすると、どのようなCSS（修飾）がされているのか調べることができます。赤四角部分参照

そしてなんと、赤四角部分を変更することで、要素がどのように変化するかお試しすることができます。

では、枠線の色を変えてみましょう。

そうすると、このように枠線の色が変わったことが分かります。

大丈夫です！検証ツールはあくまでただの『検証』なので、自分しか見えていません。

それにサイトをリロードすると元に戻りませんか？？

masahide（筆者）

これでどこを変更すると枠線の色が変えられるかわかったと思います

Classic Editorで変更してみる

Gutenberg（グーテンベルク）を使用している方はこちらのプラグインをインストールしてみてください。

ボタンやボックスを挿入すると、先ほどみたプログラミングコードのような記述が出てくると思います。

そのコードを変更することで、自由に色や枠線の太さを設定することができます。

例えば、先ほど使っていた赤いボックスはこのように表示されます。

テーマの違いにより表示されないことがあります。（筆者：AFFINGER５使用）

先ほどの枠線（bordercolor)をblackに変えてしまいましょう。

このように枠線が変わったと思います。

カラーコードの調べ方

blackやredではなくて、コードで細かく指定したいときは、こちらのサイトで検索します。

WEB色見本 原色大辞典

また、「この色何色？？」という疑問を抱いたときはGoogleChrome拡張機能である『ColorPick Eyedropper』をインストールします。

カラーコードやrgbの値を入手することができます。

注意ポイントの背景色が＃FFECEEであることがわかりました。*若干のズレがあります。

追加CSSからの変更方法（注意点あり）

最後に『外観』→『カスタマイズ』からの追加CSSを使って変更する方法です。

ちょっとややこしい操作をしますが、考え方としては、どの要素（classやid）にどんなCSS（修飾）をするかというイメージを持ってください。

下記画像では赤いボックスの中の文字色を変更しています。

検証ツールを使用して、クラス名を取得します。（今回の場合は .st-mybox）

そしてそのクラスに対して、修飾を行います。

このコードはどういう意味だろうと疑問に思ったら『言語使用サイトMDN』で検索すると出てきます。

おまけ：要素の消し方

WordPressを使用していて、フッターにしか要素を表示したくないのに、ヘッダーにも表示されることがありました。

masahide（筆者）

そうだ！display: none;使おう

display:noneを使用して特定の要素を非表示

検証ツールを起動してclassを取得し、追加CSSにdisplay: noneを追加しました。

これでヘッダーがスッキリ、フッターにお知らせも残っています。

しかし、クラスが違ったので、WordPressの設定で変更できたのかも・・・と後々思いました（汗

以上でWordPressを使用する上で多少のプログラミング知識があると幸せになれる理由の解説を終わります。

ここまで読んでいただき、ありがとうございました。

WordPressで細かい設定変更をしたい方の参考と慣れば幸いです。