[WordPress] 追加CSSで本文を装飾

[WordPress] 追加CSSで本文を装飾

  October 23, 2022    はな

---

※本ブログは Blogger by Google で作ってありますが、こちらは別サイトで使っている Wordpress 関連の記事になります※

ーーー

WordPress で作ったサイトをもっと綺麗にしたい！そのために CSS を使いたい、と思って調べていたら、なかなか上手く行かなくて…引っかかるのは断片的な情報ばかりで、しかも途中でエラーも出るし、完結までに何ステップか検索しなければならなかったんですよね。そこで、プラグインの使い方からページへの CSS 適用方法までの覚書を残します。

結論的には私の場合、プラグインを使うことで上手く行きました。

Contents
• CSS の編集ごときで、サーバのセキュリティ設定をいじるのは嫌
• Simple Custom CSS and JS が簡単だったよ
  • CSS の追加
  • CSS の適用
• プラグインを使う意味
• おまけ：色見本に使えるサイト

CSS の編集ごときで、サーバのセキュリティ設定をいじるのは嫌

まずはプラグインを使って簡単にやろうと思い、よく使われているプラグイン『AddQuickTag』をインストールしてみました。

だけど、私のブログを置いているロリポップでそのプラグインを使おうとすると、403 エラー(Forbidden) が出るんですよね・・・それを回避するには、サーバのセキュリティ設定(WAF)をいじらなければならず。

WAF はサイトへのウェブ攻撃をブロックするファイアウォール。そんなもん、サイトの装飾ごときでいちいち ON/OFF していられないよ。デザイン ＜ セキュリティでしょ。

ということで、このプラグインは削除。

Simple Custom CSS and JS が簡単だったよ

https://wordpress.org/plugins/custom-css-js/

ロリポップ × WordPress という自分の環境だと、このプラグインが簡単でしたよ。

上記プラグインを使った CSS 追加方法

1. ダッシュボードから [プラグイン] → [新規追加]
2. 上のプラグインを検索し、インストール
3. 「有効化」をクリック
4. 「設定」へ移動
5. 追加したい CSS を書き込み、「更新」。タイトルは任意

↑編集するのはこの CSS のコードだけ。

ページに CSS を適用する

1. 適用させたい投稿や固定ページを開く
2. [ブロック] → [高度な設定] → [追加 CSS クラス]
3. 適用させたい CSS のクラス名を書く
4. 「公開する」

できた〜

HTML を表示すると、追加した CSS が適用されていました。要はこのタグを自分で書かなくて良くなるっていうのが、このプラグインの機能なわけですね。

ただ複雑な CSS は、「高度な設定」欄で追加しただけでは正常に表示されないので、結局「カスタム HTML」上で編集して整える必要がありましたが。

たとえば下のような「タイトルつき囲み枠」とか、「リスト先頭の点を装飾する」とかですね・・・

プラグインを使う意味

え？

「これって別に、プラグイン要らなくね？」

ですよね。私もそう思いました。

だって普通にダッシュボードから、[外観] → [カスタマイズ] → [追加 CSS] というメニューがありますよね。そこに書くのと、このプラグインの設定画面に書くのと、やることは同じ・・・。

なのですが、

ダッシュボードから普通に行けるカスタマイズ画面だと、上手く行かないことが色々とあるんですよね…バグというか、機能が不完全…？環境との相性もあるのだろうか？

たとえば私の環境だと、コメントを書くと「何かが上手く行きませんでした」とう謎のエラーが出て保存できなかったり。あと、特定のプラグインを入れるとカスタマイズ画面の動きが怪しくなったり。

私はコード内にコメントを書きたいので、WordPress のカスタマイズ画面ではなく、プラグインが必要でした。

これから CSS を使って、サイトをキレイにして行きますよ〜！

おまけ：色見本に使えるサイト - W3Schools

ちなみにここで使ったコードは以下ですが・・・

.bluebox {
padding: 20px;
margin: 20px 0;
background: #e6f2ff;
border-radius: 8px;
}

ステキな色の組み合わせサンプルを自サイトに設定してみたら、「あれ？雰囲気が違う…」ということも結構ありますよね。そんな時に色選びに便利なサイトがあります。

無料学習サイトの記事 にも載せた W3Schools なのですが、ここの Color Picker が使いやすく、私はよく見ます。

ベースにしたい色を決め、その色コードをここに入力すると、Hue (色相) や Saturation (彩度)、Lightness (明度) が表示されます。その中から色を選んでサイトに合わせてテストします。

他にもColor Names やら Color Theory やら、色に関するコンテンツがたくさんあります。

色だけでなく、HTML や CSS、Web に関するプログラミング言語が学べるコンテンツもあり、無料で使えるので、有料サービスを試す前にこういうサイトで勉強してみるのも良いかと思います。