WordPress 賢威6.2(6.1)で見出し(H2・H3・H4)のカスタマイズその2

この記事は約4分で読めます。

こんにちはFPヒデです。
今回は、WordPress 賢威6.2(6.1)で見出し(H3・H4)のカスタマイズの方法をお伝えしますね。

以前もH3の変更方法をお伝えしましたが、今回は実際にオリジナルで作成して採用する方法になります。
以前のものと併せてご覧いただければと思います。

以前お伝えした、H3・H4タグのカスタマイズはこちら

このサイトで現在採用しているような内容にする方法になるのですが、WordPressも段々慣れてきて、以前よりも理解度が高まってきた方にはすんなりとカスタマイズ出来るかと思います。
もちろん、理解度が足らないと思う方でもこの記事を読みながら出来るように説明していきますのでご安心下さい。

まず、以前の「見出しタグ」はこんな感じです。賢威の初期設定に色を変更したものになります。
wakusen0

 
それを下記のような立体間のある見出しに変更して見ました。
少し見栄えが良くなっているかと思います。
midashi00
 
上記の見出しのデザインから作成して採用して見ました。難しそうに見えるかもしれませんね。しかし、画像編集ソフトをお持ちの方なら簡単にできます。

私は、フォトショップを使用しましたが、無料ソフトGIMPを使用してももちろん作成可能です。
 
GIMPのインストールはこちらのサイトを参考にしました。

今回はフォトショップで作成してみました。
賢威2カラムを使用している場合ですと「635PX」の横幅ですので、「635×65」で作成してみます。
画像の加工方法についてここでは割愛させていただきますね。
midashi01
 
実際に下記のようなグラデーションをかけたデザインを作成しました。
midashi02
 
この様に作成した画像をCSSを書き換えて見出しにしてみます。
 

まずは、作成した画像を『ダッシュボード』⇒『メディア』⇒『新規追加』しておきましょう。
midashi03
 
H2タグを変更する方法をやっていきます。
『外観』⇒『エディタ』⇒『design.css』を開きます。
下記のコードをコピー&ペーストしていただいてもOKですが、4段目のbackground: url(作成した画像をアップロードしたURL) left center no-repeat #FFFFFF;の赤字の部分を、先ほどメディアに新規追加した時のURLを挿入します。

#main-contents h2 {
margin: 0 0 1.5em;
padding: 1.9em 0.2em 0.9em 2.5em;
background: url(作成した画像をアップロードしたURL) left center no-repeat #FFFFFF;
font-size: 1.3em;
font-weight: bold;
color: #EBEBEB;
height: 45px;
}

 
H3とH4やH5も同様に『design.css』で書き換えてあげることでカスタマイズが可能となりますので、是非トライしてみてください。

そして、実際にカスタマイズした際に見出しの背景部分に文字が書かれているかと思いますが、思ったとおりに位置が定まらず、微調整をしたくなる場合があります。

その際にとても重宝するツールがあります。
それはブラウザで「GoogleChrome」を使用している人限定の『デペロッパーツール』です。

CSSの微調整に便利な『デペロッパーツール』

「GoogleChrome」を使用しているなら、こちらで微調整ができますので是非試してみてください。

実際になれると非常に重宝するツールです^^。

まず、サイトを開いて調整したい部分の上にマウスポインターを乗せて左クリックします。
midashi05
 
次に『要素を検証(N)』を選択します。すると下記画像のように下欄にコードが現れます。
※画像クリックで拡大してみれます。
midashi06
 
今回、見出し部分の文字位置や、見出し背景のサイズ変更をしてみます。
元がこの画像↓
midashi07
 
そしてサイトを見ながら右下のCSSコードの見出し部分に該当するところの数字を変えてみます。
midashi09
 
このように画面(サイト)をみながら、文字位置を変更出来てしまいます^^。

そして画面を見ながらイジったのがこちらです。
文字の左マスを少しあけて、上段寄りの文字にしてみました。
midashi08
 

もちろん、アップロードしている訳ではないので、数字を間違え元に戻らなくなってしまったり、その状態で画面を閉じたりしても、最初にサイトを開いた元の状態に戻りますので安心してくださいね。

この作業をすることで、望ましい調整位置がわかれば、その変更した数値を記すなり、覚えておくなりして、実際に『外観』⇒『エディタ』で編集する際に役立ち、作業効率アップできるというものになります。

是非、挑戦してみてくださいね。

コメントを残す

サブコンテンツ

このページの先頭へ