どうも、著者です。
今回はワードプレスのデザインテーマ「Simplicity2」を使っている方に向けて、見出しのデザインを変更する方法をお伝えします。
というのも、見出しを変更する方法については、調べればいくらでも出てくるのですが、Simplicity2では、度々CSSの更新が出来ない、などの情報があるからです。
目次
このような見出しにするにはどうしたらいいか。
上の見出しデザインをご覧ください。
皆さんが使っているであろう、初期のものに比べて凝ったデザインになっていますよね？
僕自身、少し前までは初期のデザインのまま使っていました。
「SEO的には大して変わらないでしょ」
という考えからだったのですが、よくよく考えたら見栄えって大事ですよね。
そういうわけで、僕はつい先日、見出しデザインを変更することにしました。
まず、必要なプラグインを紹介
必要なプラグインは2つになります。
先ほども言ったように、CSSの更新ができない、という不具合が報告されているSimplicity2ですが、以下のプラグインを併せて用いれば、そのような心配もありません。
というわけで、今回必要なプラグインについて、軽くご紹介します。
AddQuicktag
このプラグインは、予め登録しておいたタグを簡単な操作でテキストに挿入できる優れものです。
快適な操作性を実現するためには不可欠になりますので、必ず入れておいてください。
ちなみに、例外はあるかもですが、僕の場合は、他のタグ拡張系のプラグインとは干渉しませんでした。
Simple Custom CSS
本来であれば、こちらのプラグインはなくても、見出しデザインの変更は可能なのですが、前述した「更新できない不具合」を回避するために必要なものになります。
プラグインの入手方法についても一応説明します。
ワードプレスのメニューのプラグインより新規追加を選択
右上の検索窓からAddQuicktagを検索し、赤枠で囲ったプラグインをインストール、有効化してください。
できたら、同じようにAddQuicktagも検索し、インストール、有効化します。
ちなみに、AddQuicktagは、こんな感じの見た目です。
CSSの更新ができない条件とは？
さて、何度もお話ししている更新ができない不具合についてですが、こちらは直接、ワードプレスの外観の設定からCSSをいじった場合、更新が完了されないというものです。
なので、前述のSimple Custom CSSなどの、プラグインを介せば、しっかり更新することが可能になります。
まずは、好きな見出しデザインのCSSコードを探そう！
見出しデザイン自体は検索すればいくらでも出てきます。
個人で配布されている人も多いので、是非活用しましょう！
ちなみに、僕の場合は見出しジェネレーターを使用しました。
ということで、今回は見出しジェネレーターを使った方法についてご説明します。
まずは、ページ下部のほうにある
ここをいじっていきましょう。
変える部分は基本的にカラーチャート部分だけでいいかと思います。
見出しのサイズはタグとして使用したときに自動的に調整されるので、あまり気にしなくても大丈夫です。
下の文字関係は使用しませんので、デフォルトのままで構いません。
ジェネレートを押すと、CSSのコードなどが記述された画面が表示されます。
画面にはCSSコードとHTMLコードが表示されますが、今回使用するのはCSSコード部分のみになります。
ここからは、個人的な方法の違いになりますが、僕の場合は、こちらのCSSコードをテキストなどに一旦貼り付けます。
今回はh2～h4見出しの3種類をいじりますので、3種類のCSSコードが必要になります。
この作業については、先にやっても、後でまとめてしてもかまいませんが、先ほど作成したCSSコードの一部分を、別の文字列に置き換える必要があります。
デフォルトでは「.sample2」になっている部分全てを
h2#danraku2
h3#danraku3
h4#danraku4
の何れかに変更していきます。
h2に使用するならh2#danraku2、h3に使用するならh3#danraku3……
というように記述を変更してください。
今回はh2～h4のデザインを変更しますが、これを応用すれば、他の見出しも変更できますね。
次にプラグインを設定する
AddQuicktag
次に、最初にインストールしたプラグインの設定をいじっていきます。
まずはAddQuicktagの設定をしましょう。
ちなみに、設定については、管理画面左側のメニューより、設定にカーソルを合わせてAddQuicktagから行ってもいいですし、プラグインからでも変更できます。
ｔとりあえず、画像にあるように空欄を埋め、チェックを入れてください。
察しのいい方はお気づきかと思いますが、こちらの記述に合わせるために、先ほどのCSSコードの「.simple2」を「h2#danraku2」などに変更したワケです。
設定を終えたら、必ず更新しましょう！
Simple Custom CSS
次にSimple Custom CSSの設定を変更します。
Simple Custom CSSについては、設定から飛ぶわけではなく、左側のメニューの外観から変更をしていきます。
最初の段階で有効化を済ませていれば、外観にカーソルを合わせると「カスタムCSS」という選択肢が現れると思います。
そちらを選択すると、このような画面になると思いますので「カスタムCSSをここに入力してください」というデフォルトの表記の下に、先ほど作成したCSSコードをそのまま貼り付けていきます。
h2#danraku2～h4#danraku4
まで全て貼り付けることができたら、更新してください。
これで、作業は終了です。
あれ、更新できないんだけど？
ここで、何割かの人が更新できないという事態に陥るかと思います。
アクセス権限がありません。
というようなエラーが出て、先に進めない……ということが起こる可能性があります。
ちなみに僕もそうなりました。
これはなぜかというと、どうやらサーバーにロリポップを使っている場合に起こるエラーのようです。
ロリポップサーバーにはWAFというセキュリティ機能があるのですが、これがあまりに強力すぎて、管理者だろうとロリポップちゃんが「変更させへんで！」とアホの子のように、お構いなしにブロックしてしまうようです。
なので、こうなってしまったら、まずはロリポップのユーザーページにログインしてください。
ログインしたら、左側のメニューのWEBツールにカーソルを合わせてください。
下のほうにWAF設定という選択肢がありますので、こちらを選択してください。
ドメインの一覧が表示されると思いますので、とりあえず、全て無効にしてください。
こちらはCSSに変更を加える場合のみ、無効になっていればいいので、セキュリティが気になる方は、終了次第有効にしてもらって構いません。
設定の変更に5～10分程度かかりますので、お茶でも飲んで待っていてください。
しばらくしたら、もう一度、CSSを更新します。
すると、正常に更新できるはずです。
最後に
長くなりましたが、これで設定は終了です。
見出しが変われば、各段に見た目はよくなります。
見やすくもなりますので、是非活用しましょう。
では～