賢威7.0クール版 投稿記事のH3タグ文字色・背景色・枠線変更方法



どうもスイクンです。サイトをご覧頂きありがとうございます。

今回は賢威7.0クール版の「H3タグ文字色・背景色・枠線変更方法」をご紹介します。

H3タグ部分文字色変更方法

変更前

2016y02m05d_003829061

変更後 文字色を黄色にしました。

2016y02m05d_004743612

賢威7.0クール版では、外観>テーマ編集>base.cssの以下の部分コードが関係しています。

.main-body h3{
margin: 60px 0 30px;
padding: 5px 15px;
font-weight: bold;
font-size: 1.5em;
position: relative;
border-bottom: 3px solid #006a6c;
background:#d4e3e3;
}

以下の太文字を追加します。

.main-body h3{
margin: 60px 0 30px;
padding: 5px 15px;
font-weight: bold;
font-size: 1.5em;
position: relative;
border-bottom: 3px solid #006a6c;
background:#d4e3e3;
color: #ff0;
}

H3タグ部分背景色変更方法

変更前

2016y02m05d_004743612

変更後 デザイン的にはおかしいですが、わかりやすいようにしています。背景を白くしました。

2016y02m05d_004921038

賢威7.0クール版では、外観>テーマ編集>base.cssの以下の部分コードが関係しています。

.main-body h3{
margin: 60px 0 30px;
padding: 5px 15px;
font-weight: bold;
font-size: 1.5em;
position: relative;
border-bottom: 3px solid #006a6c;
background:#d4e3e3;
}

 

H3タグ部分枠線変更方法

変更前

2016y02m05d_004921038

変更後

2016y02m05d_005022165

賢威7.0クール版では、外観>テーマ編集>base.cssの以下の部分コードが関係しています。

.main-body h3{
margin: 60px 0 30px;
padding: 5px 15px;
font-weight: bold;
font-size: 1.5em;
position: relative;
border-bottom: 3px solid #006a6c;
background:#d4e3e3;
}

 

参考

  • solidは実線です。他にも、double(二重線)やdottedなどもあります。
  • 3pxの部分は、線の太さを示しています。
  • #f00は線の色を意味しています。カラーコードを使います。
  • これらの組み合わせで好きなように枠線を変更可能です。
  • また、border-top;のように指定すると、上だけに枠線がひかさるようになります。
    • border-left;
    • border-right;
    • border-bottom;
    • などもあります。
  • border;とすると四方に線が引かれます。
    • 以下のようになります。

2016y02m05d_005252972

上の画像のコードはこうなっています。

.main-body h3{
margin: 60px 0 30px;
padding: 5px 15px;
font-weight: bold;
font-size: 1.5em;
position: relative;
border: 3px solid #006a6c;
background:#d4e3e3;
}

以上でH3タグのカスタマイズ説明は終わりです。

特化型トレンドアフィリエイト レンタルサーバーの使い方
賢威6.2カスタマイズ WPの使い方
Twitter凍結基準まとめ 外注サービス比較


お名前
メール

コメントを残す

サブコンテンツ

このページの先頭へ