WordPress(賢威6.1)のHタグ(見出しH3,H4)デザインを変更する方法

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

こんにちはFPヒデです。
今回はWordpress(賢威6.1)のHタグ(見出しH3,H4)デザインを変更する方法をお伝えしますね。
 
見出し(h3やh4)とは

<h3>見出し</h3>

上記のように<h>で挟まれたテキストを見出しとして認識するように初めから定められています。
 
<h1><h2><h3><h4><h5><h6>など基本的にたくさんありますが、<h1><h2>は既にテンプレートで既にサイト内に予め表記されるように作成されている場合が多いため、<h3><h4>などと下の数字のタグを投稿記事などは使用することが多いです。
 
さらに<h5><h6>にもなると細かい見出しになるため、あまり使用する機会は少ないかも知れません。
 
早速、デザインの変更をしていきましょう!
 

変更前と変更後のイメージ

 

変更前の設定はこのような感じでした

midashi0
 

変更後パターン①

midashi11
 

変更後パターン②

midashi
 
今回はパターン①のようにしていきます。
 

実際の変更方法

変更したいデザインのコードが必要になりますのでまずは、お好きなデザインとコードの取得を行います。

参考にしているサイトがありますので今回はこちらから入手してみます。

デザインとコード取得ができる参考サイトはこちら
※ご自身でお気に入りのデザインを他のサイト等で探してコード取得しておいてもOKです。
 
上記の参考にさせていただいたサイトから、下記の「見出しサンプル8」を使用させて頂きました。
 
midashi4
 

実際の見出しタグは以下になりますので、こちらをコピー&ペーストして頂いてもOKです。
 

h3{
    position: relative;
    color: #111;
    font-size: 1.143em;
    font-weight: bold;
    margin: 0 0 1.5em;
    padding: 0.5em 0.5em 0.5em 1.7em;
    border-bottom: 3px solid #B92A2C;
}

h3:before{
    content: "";
    position: absolute;
    background: #48789;
    top: 0;
    left: 0.4em;
    height: 12px;
    width: 12px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

h3:after{
    content: "";
    position: absolute;
    background:#d26466;
    top: 1.0em;
    left: 0;
    height: 8px;
    width: 8px;
    transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
}

 
使用したいデザインのコードをコピーしたら、次はご自身の『管理画面』⇒『外観』⇒『テーマ編集』⇒『design.css』を選択します。

現在の『design.css』をコピーしてPCの「メモ帳」などのバックアップ(保存)しておいてください。
記述や貼付けを間違えてしまった時に元に戻せるようにするためです。

 

そしてH3タグの部分を探して、そこに新しいデザインのコードを貼り付けます。
 
midashi3
 
h3{~ }でくくられている記述を全て消して貼り変えます。
 

貼り終えたら『ファイルを更新』をクリックします。
 
実際にサイトを見てみるとこのようになります。
midashi12
 
そして今回は、まるく囲っている部分の色を変更してみたいと思います。
 
下記画像の赤い四角枠の中の「カラーコード番号」を変更するだけですのでやってみましょう。
カラーコードを簡単に確認できて、選択したカラーのコードを確認できるサイトがありますので、こちらも参考にしてみてください。
 HTMLカラーコード
 

「HTMLカラーピッカー」で好きなカラーを選択して新しいカラーコード番号を記述します。
midashi14
 

先ほどのh3記述部分を探して、赤枠の箇所に新たな「コード番号」を記述します。
midashi2
 
併せてh4とh5のカラーも変更してみましょう。
midashi1
 

変更後はこのようになります。
 
midashi11
 

以上で見出しHタグの設定は完了です。

コメントを残す

サブコンテンツ

このページの先頭へ