hタグを使って、WordPressの記事に個性的な副見出しを表示する


hタグとはなんでしょうか。

例えばこのような見出しのことです

小見出しにはこれを使います

副見出しとして、これを用いることもあります

これらは一度設定しておけば、投稿記事を書く際、ビジュアルエディタの「段落」のところから自由に使うことができます。以下、設定方法を解説します。

スポンサーリンク

設定は比較的簡単です。まず、style.cssの子テーマを作ります。作り方はこちらを参照してください。

次いで、ダッシュボードの「外観」→「テーマ編集」と進み、先ほど作ったstyle.cssを選びます。そこに以下のコードを記述します。

/* 見出し */
.entry-content h1 {
font-size: 1.3em;
color: #333333;
padding: 3px 0px 3px 20px ;
font-weight : bold ;
border-left: solid 10px #8EB8FF;
border-bottom: solid 1px #8EB8FF;
background: #e1e9f4;
}

このコードの内容は、このブログでの設定です。

font-size 文字の大きさ
color 文字の色
padding 上右下左の間隔
font-weight 文字のスタイル
border-left 左の縦線の太さと色
border-bottom 下線の太さと色
background…文字の背景色(無色にしたい場合は、ブログ背景と同じ色を記述)

他の要素も指定できますが、一般的な見出しであれば、これだけで十分です。CSSのおける色コードは、「CSS 色」などで検索すれば色見本を探せます。

さらに別の見出しを設定したい場合は

.entry-content h2 {…}

.entry-content h3 {…}

のようにして同様に記述していけばOKです。

Twenty Elevenの場合、.entry-content というクラスで記事内の見出しが修飾されていますが、他のテーマだと必要ないかもしれません。記事タイトルの場合は

.entry-title  {…}

になります。

ウィジェットの見出しを設定する

このブログでは、サイドバーなどのウィジェットのタイトル部分も、副見出しと合わせた配色にデザインしています。設定の仕方は、記事の見出しの場合と同様で、CSSに以下のように記述します。

/* ウィジェットのタイトル */
.widget-title {
margin:0 0 10px 0;
padding:2px 8px;
border-width: 0 2px 2px 5px ; /* 枠線の太さ。上右下左 */
border-color: (枠の縦・横線の色);
border-style:solid;
background: (文字の背景の色);
color: (文字の色);
line-height:140%;
font-weight:bold;
}

この部分は、以下のブログを参考にさせていただきました。

Twenty Eleven デザインカスタマイズbaby-kidslove Diary | baby-kidslove Diaryはてなブックマーク - Twenty Eleven デザインカスタマイズbaby-kidslove Diary | baby-kidslove Diary

 

スポンサーリンク

スポンサーリンク
WordPress