賢威7の各種文字の大きさ行間の変更方法をご紹介します。

当サイトはSEOに強いWordPressのテンプレート「賢威」のバージョン7(スタンダード版)を利用しています。

カスタマイズは子テーマで運用しているため、特に注意書きがなければ子テーマのファイルを編集しています。

サイトタイトル

子テーマの「base.css」に以下を追記。

.site-title {
font-size: 1.5em;
}

フォントサイズを若干小さ目にしました。

パンくずリスト

子テーマの「base.css」に以下を追記。

.breadcrumbs{
font-size: 0.8em;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
line-height: 1.25em;
}
.breadcrumbs a{
text-decoration: none;
}

フォントサイズを小さ目にして、デフォルトだと欧文が太い感じなので、メイリオを指定。行間も詰めました。

また、リンクの下線も表示させないようにしました。

h2~h4の見出しタグ

子テーマの「base.css」に以下を追記。

h2タグ

下に三角をつけて、吹き出し風にしました。

関連記事賢威7の見出しにCSSで下向きの三角を付ける方法

.article-body h2{
font-size: 1.2em;
font-weight: bold;
color: #333;
background-color: #E7EAE6;
position: relative;
line-height: 1.5em;
padding: 0.85em 1em;
}
.article-body h2:before{
content: "";
position: absolute;
bottom: -23px;
left: 10%;
border: 12px solid transparent;
border-top: 12px solid #E7EAE6;
}

h3タグ

背景に「Data URI scheme」を利用して、画像ファイルを使わずに装飾しています。設定も簡単で、データ量も減らせるので便利です。

.article-body h3{
font-size: 1.1em;
font-weight: bold;
color: #333;
line-height: 1.5em;
background: rgba(0, 0, 0, 0) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQImWO4evXqfwZkAAA19AN/FhPClgAAAABJRU5ErkJggg==") repeat scroll 0 0;
border-bottom-style: none;
border-bottom-style: none !important;
border-left: 1px dotted #333333;
padding: 0.65em 1em;
}

h4タグ

線(border)のみで装飾。

.article-body h4{
font-size: 15em;
font-weight: bold;
color: #333;
line-height: 1.5em;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #666;
border-bottom-color: #666;
padding: 0.65em 1em;
}