Simplicityを久しぶりにカスタマイズ!見出しを変更したので方法をご紹介!

はてなブログからWordPressに移ってきて一ヶ月ほどが経過しました。

個人的にはやっぱり、こっちのほうが楽しいです。今まで色々なブログサービスを使ってきましたが、やっぱりかスタスタマイズ性とかあるのでWordPressのほうが愛着のあるブログになる気がします。

今日はそんなWordPressの大人気テーマである、Simplicityの見出しをカスタマイズしました。その方法とソースを残しておきます。

 

WordPressテーマをカスタマイズする前に

WordPressをカスタマイズするときに親テーマのcssに直接カスタマイズしたいコードを叩くことはやめたほうがいいです。知識がないとバグってサイトが飛ぶ可能性があります。

ですのでテーマをカスタマイズする際は、WordPressの公式サイト(WordPress Codex)でも推奨されているとおり、WordPressテーマに対応する子テーマを作成して、カスタマイズに当てるのが正しい方法です。

このブログでも子テーマについてのエントリーがあるので、「【WordPress基礎】サイトのカスタマイズに欠かせない子テーマについて」をご覧ください。

https://www.tomx234.com/blog/wordpress/child-theme

WordPressの子テーマが準備できたら、実際にカスタマイズしていきましょう。

 

WordPressのテーマをカスタマイズする

特に大それた作業ではないので気楽に構えていてくださいね。

まずはダッシュボード画面より「外観」→「テーマの編集」を選択します。

customize

すると画面が変わり、コードを書き込むスペースが表示されるので、あとはその画面に直接コードを叩くだけです。

customize2

ね、簡単でしょう?

実際、カスタマイズはとても簡単にできてしまいます。cssの記述方式に慣れてしまえば、いつでも気軽にデザインの変更ができます。WordPressでブログを運営する際には、簡単なHTMLとcssの知識を身につけることをオススメします。

もちろん、WordPressのカスタマイズだけでもcssの知識を、ある程度は身に付けることができます。僕がそうでしたからね。

 

Simplicityの見出しをカスタマイズ

それでは実際にカスタマイズしていきます。cssの編集画面から先程のスペースにコードを叩いていきます。

customize3

個人的な意見ではありますが、カスタマイズする際は「見出し」というのをコメントアウトして、カスタマイズした部分を分かりやすくしておくのがオススメです。

コメントアウトとは、指定された方法でコードを記述することで、特定の部分が単なるコメントとしてソースに反映されなくなります。cssでは「/* ~~~~~~*/」がコメントアウト用の記述方式です。

/*ここはコメントです。反映されません。*/

という訳で、早速見出しをカスタマイズしていきます。

 

見出しのカスタマイズ方法

カスタマイズしたいデザインのソースコードを探してきましょう。

最近ではウェブサイト上に様々な見出しのソースコードが公開されているのでググって見つけてきます。「WordPress ブログ 見出し」とか「ブログ 見出し」で検索すれば色々なデザインのソースコードを見つけることができます。

今回はNexWorldさんの「シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50」を参考にさせて頂きます。

 

h2の見出しタグをカスタマイズ

今回先程のウェブサイトを利用して見出しをデザインしていきます。とりあえずこちらのデザインをお借りします。

customize4

Simplicityのデフォルトの見出しはこんな感じ。シンプルで楽しみも無いけど、別に飽きも来ないデザインです。customize5

ブログを書くときに使うのは見出しの2と3が多いので、今回はこの2つの見出しのみをカスタマイズすることにします。新規のタブで先程ご紹介したcssのテーマ編集ページを開きつつ、カスタマイズの作業を進めていきます。

まずは真似したいデザインのコードを恐る恐るコピーさせて頂きます。

そしてとりあえず、先程のcss編集画面にコピペして貼り付けますが、気をつけなければならないのがカギ括弧の外側。現在のソースはh1になっていると思うので、こちらを.article h2に書き換えます。

.article h2 {
        padding: 0.9em 0.75em;
        background-color: #f6f6f6;
        border-bottom: 1px solid #ccc;
}

Simplicityにおいて記事内の見出しはすべて「.article h1~6」で展開されています。このコードで書かないと、意図しない場所がカスタマイズされてしまいます。

上記のコードを書いて「ファイルを更新」すると下の画像のように変更されます。

customize6

左側に細い棒線が残ってしまっています。これはどうやら、親テーマのcssを引き継いでしまっているようです。この線を消したい人は背景と同色の線を重ねて挙げましょう。

先程のカギ括弧の中に下の一行を追加して更新します。

        border-left: 1px solid #ccc;

これはcssで、カラーコードがcccである1ピクセルの棒線を左側に配置する、ということが書かれています。ここでは深入りせず、別の本やエントリーにcssの知識はお任せすることにします。

今回はこのままでも良いかな〜と思ったので放置します。以前より、少しおしゃれな見出しになったでしょうか。

では、次にh3の見出しをデザインしていきます。

 

h3の見出しをカスタマイズ

h3もブログを書くときに重宝するタグなので、カスタマイズするときには一緒にしておきたいです。

カスタマイズの方法はh2タグのときと同様なので、そこまで準備等は必要ありません。まずはh2タグと同様にカスタマイズしたいデザインのソースを見つけて来ましょう。

今回も先程と同様のウェブサイトよりデザインをお借りしました。

customize7

デフォルトでは水色の線ですが、導入する際には色を変更して黒色に変えています。今回使用したソースコードは下に記載しておきます。

.article h3 {
	position: relative;
	padding-bottom: .5em;
	border-bottom: 4px solid #ccc;
}
.article h3::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	z-index: 2;
	content: '';
	width: 20%;
	height: 4px;
	background-color: #000000;
}

このコードでは薄い灰色の部分を.article h3{}が、黒色の太線を.article h3::after{}の部分が指定しています。太線の色を変更したい場合は、.article h3::after{}内側にある「background-color」というプロパティの#の後のカラーコードを書き換えるだけです。

また、灰色の棒線部分を変更したい場合は、やはり同様に.article h3{}内にある「border-bottom」、#の後ろ部分を変更するだけで色が変えられます。

カラーコードは「HTMLカラーコード」や「WEB色見本 原色大辞典」から探すのがオススメです。色々変更していて、ビビッと直感で感じる色を探してみてください。

今回カスタマイズした後はこのようになりました。

customize8

シンプルでいいかな、と感じています。何もない普通の見出しタグよりは目立つと思うので。

 

とはいえ、ここに挙げてきたように、テーマの編集を選択してcssを書き加えるだけでWordPressテーマの見出しはとっても簡単に変更できるのです。

もちろん他のブログサービスでも同様ですが、カスタマイズ方法は覚えたもの勝ちです。自由度の高いWordPressで、楽しくブログライフを送ろうではありませんか。

 

まとめ

以上、SImplicityで見出しのカスタマイズ方法を解説しました。Simplicityはデザインもシンプルで使いやすく、様々な機能が盛り込まれた優秀なWordPressテーマです。

テーマ製作者である寝ログのわいひらさんもSImplicityのアップデートや情報のリリースをなさっていて、カスタマイズの方法やテーマの使用方法のサポート記事も充実しています。

ブログ初心者にオススメできる優良テーマですので、ぜひとも使ってみてください。

これからもSImplicityを使用したカスタマイズなどを随時更新していきます。快適に、楽しく、満たされたブログを送りましょう!

Pocket

コメントを残す

メールアドレスが公開されることはありません。