【Simplicity2】記事下の「日付とカテゴリ」を小さくする方法

Simplicity

Simplicityでは、記事タイトルの下に「日付」と「カテゴリ」が表示されます。

今回は、デフォルトよりも表示を小さくして、すっきり見やすくしてみましょう。

具体的には、次のようなカスタマイズをします。

文字(フォント)のサイズを小さくする

文字(フォント)の色を変える

カテゴリの下の線を消す

日付とカテゴリの主張を控えめにして、見た目をすっきりとさせるのがねらいです。

 

たとえば、文字を小さく&薄くして、カテゴリの下の腺を消すとこんな感じになります。

Simplicity 日付とカテゴリを小さくした例

もちろん、フォントサイズやフォントの色、背景色はお好みでカスタマイズできますよ。

さっそく手順をみていきましょう。

カスタマイズの手順

手順は簡単、紹介するコードをコピペするだけですよ!

コードを貼る場所は、子テーマの「style.css」になります。

「style.css」は、WordPressのダッシュボード画面から「カスタマイズ」→「テーマの編集」にすすむとありますよ。

Simplicityの子テーマにCSSを追加

コードは、特別な理由がない限り、後ろに追加していけばOKです。

文字(フォント)サイズ、色を変える

では、文字の大きさや色をかえてみましょう。

CSSのコードをコピペする

手順1

次のコードをコピーします。

/*  日付・カテゴリの文字 */
.post-meta {
 font-size: 14px;
 color: #777777;
}

 

手順2

コピーしたコードを子テーマの「style.css」に貼りつけます。これで、文字のサイズと色が変わります。

文字(フォント)のカスタマイズのヒント

各項目の設定を解説します。お好みでアレンジしてみてくださいね。

文字(フォント)について

「font-size:」の後ろにある数字が文字サイズを表しています。数字を小さくするほど、文字のサイズが小さくなります。

「color:」の後ろにあるのが、文字の色です。色は「WEB色見本」を参考にすると、選びやすくなります。

バーの背景色も変えられます

上で紹介したコードに少し書き加えると、バーの背景色を変えることができます。

/*  日付・カテゴリの文字、背景色 */
.post-meta {
 font-size: 14px;
 color: #777777;
 background-color:#ffffff;
}

「background-color:」の後ろが、背景の色になります。この例では、背景を白にしています。「WEB色見本」を参考にすると、決めやすいですね。

カテゴリの下の線を消す

今度はカテゴリの下の線を消してみましょう。さらに、ポインタをのせた時に色が変わるようにしてみましょう。

CSSのコードをコピペする

手順1

次のコードをコピーします。

/*  カテゴリの下の線を消す */
.post-meta .category a {
 color: #777777;
 text-decoration: none;
}

.post-meta .category a:hover {
 color: #CC0033;
}

 

手順2

WordPressのダッシュボード画面から「カスタマイズ」→「テーマの編集」とすすみます。

コピーしたコードを子テーマの「style.css」に貼りつけます

これでカテゴリの下の線が消え、さらに、マウスのポインタを乗せると色が変わるようになります。

カテゴリのカスタマイズのヒント

各項目の設定を解説します。お好みでアレンジしてみてくださいね。

色について

最初の「.post-meta .category a」のところにある「color:」は、リンクをクリックしたあとに、どんな色にするかを指定しています。

上のコードでは、クリック後も色が変わらないように、フォントの色と同じにしています。

ポインタをのせた時の反応

次の「.post-meta .category a:hover」のところにある「color:」は、カテゴリの部分にポインタをのせた時の色です。

ポインタをのせた時に下の線も出したい時は、次のようにします。

.post-meta .category a:hover {
 color: #FF5252;
 text-decoration: underline;
}

これで、ポインタをのせると、色が変化&下の線が出るようになります。

まとめ

今回は、Simplicity2の記事タイトルの下に表示されるメタ情報、「日付」や「カテゴリ」のカスタマイズでした。お好みでアレンジしてみてくださいね。

 

Simplicity、こんなカスタマイズもありますよ!
【Simplicity2】スマホでみた時の「ヘッダー下の空白」を消す方法
Simplicity2で作ったサイトをスマホやタブレットでみると、ヘッダー画像の下に広めの空白ができていることがあります。 上の画像では、ヘッダー画像とパンくずリストの間に、広い空白ができていま...
【Simplicity2】記事やサイドバーの枠線を消す、色を変えるカスタマイズ
今回は、WordPressテーマ「Simplicity2」の枠線部分のカスタマイズ方法です。 Simplicity2は、デフォルトだと記事のまわりに枠線が入ります。 この枠線を消し...
Simplicity2の固定ページで日付(投稿日・更新日)を非表示にする方法
Simplicity2の固定ページの日付表示(投稿日・更新日)を消してみました。 消したのはこの部分です。 というわけで、その方法を書いてみます。 Simplicity2の固定ページ...