エンジニア引き止めセミナー資料
エンジニア引き止めセミナー資料

WordPress(ワードプレス)見出しの変え方(テーマカスタマイズ)

ひろゆき

Wordpress見出しの変え方(テーマカスタマイズ)

今回はWordpressのテーマを編集して見出しをアレンジする方法を紹介したいと思います。具体的にはテーマの中にあるスタイルシート(CSS)をいじって見た目を変えます。
記事を少しかっこよくしたい方にオススメです。

概要

まずはCSSをいじります。
cssの編集はWordpressのダッシュボードから直で書き換えるか、ftpでファイルを落して編集することもできますがそのことに関しての説明はまた別の機会にしたいと思います。今回はCSSを編集できることを前提に話を進めたいと思います。

また、既存のテーマをいじるので全て同じ方法で見た目を変えられる訳ではないです。ちなみに今回実際に使ったテーマはsimple balance です。

で、実際にどんな感じになるかというと

テスト

こんなかんじです。

どのようなことをしているかというと、見出しに背景をつけてテキストを背景とかぶらないように少し右にずらしています。

具体的な方法

では、まず背景にする画像を用意してください。ためしに見出しを変えてみたいという方はとりあえず

これを使ってもらっても構いません。これをテーマフォルダのimgフォルダの中に入れます。

次にCSSを編集します。simple balanceの場合見出しは

.postContent h~ という名前で指定されています。

今回はh3に書き加えてみたいと思うので

赤線がある部分を追加してください。動きとしては上から

・背景画像の指定

・画像を左によせる

・背景画像を繰り返し表示しない

・文字を右にずらす

ということをやっています。背景画像を自分で用意した場合はファイル名を変えてください。

これで記事のなかで見出し3に指定したテキストに背景が表示されるはずです。

見出し指定はビジュアルモードで左下にある「段落」をクリックすると出てきます。

3 0 0 0