【WordPress】追加CSSで本文を装飾

本件について調べていたら、引っかかるのはバラバラの情報ばかりで、しかも自分の場合、途中でエラーも出るし、完結までに何ステップか検索しなければならなかったんですよね。

そこで「WordPress でブログを作ったサイトをもっとキレイにしたい!WordPress でCSS を使うのが初めて」という方へ、「プラグインの選び方」「プラグインを使う意味」「CSSを書く場所」「投稿への CSS 適用方法」までの覚書を残します。

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

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

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

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

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

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

Simple Custom CSS and 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 に関するプログラミング言語が学べるコンテンツもあり、無料で使えるので、有料サービスを試す前にこういうサイトで勉強してみるのも良いかと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA