WordPress賢威7テンプレートで見出しのデザインをカスタマイズする方法

今回はWordPressの賢威テンプレートで見出しのデザインをカスタマイズする方法を紹介します。賢威テンプレートは、サイトを始めて作成する方にもおすすめのテンプレートです。

ここでは見出しのカスタマイズの仕方を紹介していますが、特に変更などを加えなくても問題なく使用することができます。

でも、もう少し個性的なサイトにしたいということなら、見出しをカスタマイズしてみるのも一つの方法です。

この記事では、見出しのデザイン画像とそのためのコードを紹介しています。見出しはタイトルの次に重要な部分になるかと思います。参考にしてみて下さい。

子テーマを準備する

まずは子テーマを準備していきましょう。というのは、親テーマが更新された場合、カスタマイズした部分が消えてしまう可能性があるからです。

子テーマを使えば、親テーマに編集が加えられたとしても、カスタマイズした部分は残ります。なので、テンプレートに編集を加えるなら、子テーマを使用したほうが良いと思います。

これから作成するということであれば、エックスサーバーで賢威の子テーマを作成する方法を下の記事で紹介しています。参考にしてみて下さい。見出しに限らず、テンプレートをカスタマイズするなら絶対に便利です。

⇒ワードプレス初心者向け賢威子テーマの作り方（エックスサーバー編）

見出しをカスタマイズする手順

見出しのデザインを安全にカスタマイズするための手順を説明します。

• 子テーマのbase.cssをダウンロードする
• コードを貼り付ける場所を確認する
• コピペでコードを貼り付ける

子テーマのbase.cssをダウンロードする

見出しをカスタマイズするには、CSSのコードをbase.cssにコピペします。

ただ、失敗することもあるかもしれません。子テーマなので、親テーマを編集するのに比べれば安心ですが、編集を加える前にバックアップをとっておきましょう。これなら上手くいかなかったときでも、すぐに元に戻せます。

ファイルをバックアップを作成するには、FTP接続がおすすめです。なかでもFileZillaという無料ソフトが使いやすいと思います。FileZillaの設定方法と使い方を下の記事で紹介しているので、参考にしてみて下さい。

⇒FileZillaのダウンロード方法と使い方（MACも対応）

コードを貼り付ける場所を確認する

base.cssのバックアップを取ったら、次にWordPressの管理画面の「外観」から「テーマの編集」をクリックします。

賢威の子テーマを作成した場合、画面右側にbase.cssが表示されているのでクリックします。

見出しをカスタマイズするためのコードは、この一番下にコピペして下さい。

もし親テーマにコピペするという場合は、下の部分になります。

ページ別に見出しをカスタマイズする

ランディングページなど、普段とは違う見出しのデザインを使いたいことがあるかもしれません。賢威テンプレートなら、ページ別で見出しをカスタマイズすることが出来ます。

まずは、投稿や固定ページのテキストエディタを開いて下さい。すると、画面の下のほうに「この投稿だけの個別CSS/JS記述欄」があります。

ここに下の画像のようにCSSのコードを＜style＞＜/style＞で囲って記述して下さい。

上の欄に記載したコードはそのページ内でのみ反映されます。

賢威テンプレートのスタンダードの見出しCSS

賢威の見出しCSS一覧です。バックグラウンドのカラー、フォントの色・サイズなど、自由に変更してカスタマイズすることが出来ます。

h2大見出しの画像とコードの紹介

コードをコピペする準備が整ったら、カスタマイズした見出しのコードをコピペしていきましょう。h1が記事のタイトル部分になりますから、h2は大見出しの部分です。ただ、賢威テンプレートの種類によって枠幅の調整が必要になるかもしれません。

色の指定にはGoogle Chrome拡張機能の一つ、ColorPick Eyedropperが便利です。これならパソコンの画面上で色をクリックするだけで、そのカラーコードを簡単に調べることが出来ます。インストールの方法や使い方は、下の記事で紹介しています。

⇒賢威7WordPress版のキャラクターの作り方と使い方

スタンダードの見出し

一般的に使われていることが多いスタンダードの見出しです。角に少しだけ丸みをつけることによって、柔らかい印象になるかと思います。

吹き出しの見出し

ここは吹き出し口の色の部分が分かりにくかったので、色を極端にしていますが、背景色と同じ色にしたほうが良いかもしれません。

上下に実線が入った見出し

実線の色や太さは調整してみて下さい。

上下に点線が入った見出し

賢威のh3をカスタマイズするときの注意点

h3の小見出しは、h2の次に目立つ部分になるかと思います。賢威テンプレートの場合、h3の小見出しのcssはサイトバーのタイトル部分に反映されるようです。

なので、デザインによって記事内の見出しは問題なく表示されている場合でも、サイドバーの表示が崩れているということがあるかもしれません。カスタマイズするときは注意が必要です。

例えば既定の＜h3＞を使用すると、サイドバーのタイトル表示は下の画像のようになります。

これを次のような小見出しにカスタマイズした場合

このようにサイドバーのタイトルにも影がついて、何となく不自然です。

なので、＜h3＞をカスタマイズするときはサイドバーの表示確認が必要です。

＜h3＞の画像とCSSの紹介

枠幅を広く下線を太くした小見出し

文字の色を変更・点線付き小見出し

枠で囲んだ小見出し

先頭にアクセントを入れた小見出し

まとめ

サイトのカスタマイズはWordPressの使い方に慣れてからでもまったく遅くはないと思います。というのは、カスタマイズしたために、表示が崩れてしまったり、気付かない所で不具合が生じているといったことが起こるからです。

私は、カスタマイズにすごくこだわっていた時期があります。でも賢威テンプレートなら、カスタマイズしないほうが良いのでは？と思ったりもしています。というのも、カスタマイズが原因でブログが壊れてしまったことがあるからです。（笑）

なので、初めてサイトを作成される方には、あまりおすすめではありません。WordPressに慣れてきたら、徐々に挑戦してみて下さい。

また、オシャレでかわいい見出しを探している方には、サルワカくんの記事がおすすめです。オシャレな見出しのデザイン例が68個も紹介されているので、きっとあなたのサイトにぴったりのデザインが見つかると思います。