ブログ

【WING】AFFINGER5で記事一覧の文字色を変える方法

いざアフィンガーを購入したものの、カスタマイズできる機能が多すぎて使いこなせない…

記事一覧の文字色はどうやって変えるの?

方法はいろいろありそうだね
anc88
どこを探しても文字色を変えられるようなところがないけど?
大丈夫!今回は追加CSSにコードをコピペして簡単に記事一覧の文字色を変える方法を紹介するよ
anc88

AFFINGER5の記事一覧の文字色を追加CSSで変える

wing AFFINGER5の記事一覧の文字色を追加CSSで変える

AFFINGER5の初期の記事一覧の文字色はグレー

背景の色によっては変えたくなりますよね。

下の画像は変えてしまったあとの画像ですが…お許しください!

affinger 記事一覧 文字色

さっそくやってみましょう!

まずは外観のカスタマイズをクリック

外観のカスタマイズをクリック

画面が切り替わったら左側に表示される項目を下にスクロール

追加CSSという項目があるのでクリック

追加CSSをクリック

画面が切り替わったらコードを入力します。

画像の下にコードを用意していますので

コピーして貼り付けてください。

追加CSSにコードを入力
 css
/* 抜粋文字 */
.kanren:not(.st-cardbox) .clearfix dd .st-excerpt p,
.kanren:not(.st-cardbox) .clearfix dd p {
font-size: 13px;
color: #111 !important;
line-height: 1.8;}

コピーした内容だと、一覧記事の文字色は黒に近い黒(#111)に変わります。

#○○○ の ○ の数値で色を変えることが出来るので、お好きな色の番号を入力してください。

色のコードは3桁でも6桁でもオッケーです。

参考までに色の見本がわかるサイトをご紹介します。 WEB色見本

ちなみに #900 だと  になります。

記事一覧 赤

#○○○ ではなく、直接色の名前を入力しても変わります。

例として green と入力すると  になります。

記事一覧文字色緑へ

ちなみに上記CSSの

,.kanren:not(.st-cardbox) .clearfix dd p (カンマ , とピリオド . を抜き忘れると機能しません

を除いてあげると

記事一覧 文字色黒へ 更新、投稿日時を除外

上の画像のように、更新や投稿日時の文字色の変更は除外されます。

【WING】AFFINGER5で記事一覧の文字色を変える方法 まとめ

紹介したCSSのコードをコピーして

追加CSSに入力

色を指定してあげる

たったこれだけ!

難しそうに見えて意外とそうでもないですよね!

それでは今回は以上です!

最後までお読みいただきありがとうございました!

スポンサーリンク

-ブログ
-,

Copyright © anc88.blog , All Rights Reserved.