@ridicule さん
はじめまして。
画像に関しては、前の記事・次の記事にアイキャッチ画像を設定していただければ、ヘッダー画像の代わりに表示される仕様かと思います。
テキストの色に関しては白色で固定のようなので、以下のような追加CSSでカスタマイズすることになるかと思います。
#nav-below .nav-previous a,
#nav-below .nav-next a {
color: #ff0000; // ←ここでリンクテキスト色を指定
}
お早いご返信ありがとうございます、早速明日試して見ます。
色というのはテキストのカラーではなく、ヘッダーの画像が全体的に透過で赤黒く表示されており、アクセントカラーが赤なのでそれが反映されたものかと予想して書きました。
代わりのアイキャッチ画像を設定して赤くならなければそれで解決なので、そうなってくれれば助かるのですが。
cssも徐々に慣れて行きたいところだったので教えてくださりありがたいです。
いずれにせよまずはアイキャッチを試してみたいと思います。
@ridicule さん
調べた所、前後記事画像に「アクセントカラー＋黒のグラデーション」が重なっているようです。
アクセントカラーとは別に色を設定したい場合は、以下のようなCSSが必要かと思います。
#nav-below .nav-previous::after,
#nav-below .nav-next::after {
background-color: #ff0000; // ←ここに前後記事画像に重ねたいカラーを指定
}
グラデーションでなくしたり、透過率を変えたりと色々なカスタマイズは可能ですが、まずは上記手順をお試し下さい。
やはり勝手にそうなってしまっていたのですね。
本日試したところ、教えていただいたコードでアクセントカラーの変更はできました。ありがとうございます。
次は黒のグラデーションを無効化したいのですが、どのようにすればよいでしょうか？
また、コメントフォームにマウスカーソルを乗せるとアクセントカラーで真っ赤になってしまい非常に見にくいのですが、マウスカーソルを乗せた時のカラーも変更できるのでしょうか？
@ridicule さん
こんにちは。
次は黒のグラデーションを無効化したいのですが、どのようにすればよいでしょうか？
以下で消せると思います。
#nav-below .nav-previous::before,
#nav-below .nav-next::before {
content; none;
}
また、コメントフォームにマウスカーソルを乗せるとアクセントカラーで真っ赤になってしまい非常に見にくいのですが、マウスカーソルを乗せた時のカラーも変更できるのでしょうか？
以下で変更出来ると思います。
.comment-form-author input:hover,
.comment-form-email input:hover,
.comment-form-url input:hover,
.comment-form-comment textarea:hover,
.comment-form-author input:focus,
.comment-form-email input:focus,
.comment-form-url input:focus,
.comment-form-comment textarea:focus {
// ここでスタイルを指定
}
また、今後もスタイルを変更したい箇所は多々出てくると思いますので、「Chrome CSSセレクタ 調べ方」などで調べていただいて、色々ご自身で試してみる事をおすすめします。
分からないことだらけで手探りの状態なのでコードを教えていただけるのはとても助かります。
単純に貼り付けただけではうまくいきませんでしたが、爽やかなカラーリングにしようとしているのにデフォルトで黒のグラデーションが入っているのは本当に嫌なので、諦めずに試行錯誤してみようと思います。
色々と質問に答えてくださり、学ぶ手がかりを与えてくださりありがとうございました。
