taeさん

投稿者:: @tae

↑

文字の大きさ、太さは反映されたのですが色が反映されないです。

.navi a {
font-weight: 600;
 font-size: 15px;
letter-spacing: 0.05em;
color: #262626;
}
.navi a:hover {
color: #e60023;
}

現在、hoverの方はないみたいですけれど。

簡単に言えば、負けてしまっているんだと思います。
（CSSには勝ち負けがある。正確には「詳細度」と言います）

詳細度については、以下をご参考に。
（他に、もっと分かり易いサイトもあると思いますので、検索して探してみてください）

CSSセレクタ詳細度の理解を深める
https://qiita.com/ryokkkke/items/ec1ca2baebe4a984f7a6

実際の状態は以下です。
（デベロッパーツールで、確認したものです）

#navi .navi-in a {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.05em;
    color: #262626;
}
#navi .navi-in a:hover {
    color: #e60023;
}

なお、「font-size」に関しては、前に不正な文字コードがあり、エラーになっています。
（taeさんがフォーラムに貼りつけたものも、位置が右にずれていますよね）

こういう感じのものが、分かり易いのかも・・・。

CSSが効かない・反映されないときの対処法まとめ
https://saruwakakun.com/html-css/wordpress/cant

ぜひ、ご覧になってください。

丁寧に教えて頂き、ありがとうございます！！
やっと反映されました。

開発者ツールのことも教えて頂きありがとうございます。
ビックリマークが7つも・・・。
全部英語でハードルが高そうですが、読み方勉強していきます。

taeさん

投稿者:: @tae

↑

ビックリマークが7つも・・・。
全部英語でハードルが高そうですが、読み方勉強していきます。

この上5つは、私が以下に描いたものです。

投稿者:: @mk2_mk2

↑

その他にも、「Mixed Content（混在コンテンツ）」の警告が出ています。

 

サイトはSSL化（https）されているのに、非SSL（http）で画像を読み込んでしまっています。

（おそらく、サイトをSSL化（https）する前に、画像をアップロードなさったのでは？）

 

対象の画像は以下でした。（直リンクにならないように、途中にスペースを入れています）

 

http ://patthai.xyz/wp-content/uploads/2025/06/rogo-tetu.png
http ://patthai.xyz/wp-content/uploads/2025/06/2000top.jpg

 

「https」に修正なさることをお勧めします。
（アップロードし直し、再設定が、簡単かもしれません）

スマホからなもので、あまり書けません。

すみません、もう一つ教えて頂きたいです。
hoverの赤色設定が意図せず、トップページのほかのリンク（例えば「新着記事」）にも反映されてしまっているのですが、他のリンクも↓

#navi .navi-in a

このグループに入っているということでしょうか？

ほかのリンクには反映させたくないのですが・・。

taeさん

そういうものも、デベロッパーツールで調べましょう。
（そのためのデベロッパーツールです。今回のものは、練習にちょうど良いと思います）

taeさん

投稿者:: @tae

↑

hoverの赤色設定が意図せず、トップページのほかのリンク（例えば「新着記事」）にも反映されてしまっている

これ、「ボタン」ブロックですよね？

本来、「ボタン」ブロックは、ボタンですから、ユーザーに押してもらうためのものかと思います。
（つまりリンクとして使うことが多い）

WordPressの説明にも、以下のように「ボタンスタイルのリンク」とあります。

いろいろ丁寧にありがとうございます。

ご指導いただいたように、開発者ツールで「あーそこはそのCSS使われているのねー」っていうのはどこでわかるでしょうか？
リンクボタン部分クリックして、ソースコードはここだよ、って右側に表示されていると思うのですが、そこからどう探っていくのか・・？可能でしたらご教授ください。

またリンクボタンは、YouTubeの初心者向けにトップページ型サイトの作り方を見ながら作ったもので、デザインがいいなと思ってリンクないのに作りました。
リンクをはるか、そのほかの表示方法にするか。考えます。
ボタンでリンク張らない形にできればいいのですが・・。

taeさん

先にリンクした以下に、CSSが当たらない時どうやって調べるのか、ということが書いてあります。
（別に当たらない時だけの話ではありませんね、確認方法ですね）

投稿者:: @mk2_mk2

↑

こういう感じのものが、分かり易いのかも・・・。

CSSが効かない・反映されないときの対処法まとめ
https://saruwakakun.com/html-css/wordpress/cant

ぜひ、ご覧になってください。

上記には、以下のようなリンクがあり、デベロッパーツールの使い方にも、触れられています。

先にリンクした解説サイトのような手順でやってみると、以下のような感じではないかと。
（Edgeでやりました）

ありがとうございます。非常に勉強になりました！というか、これから開発者ツールについて知らなきゃということがわかりました。
また行き詰まったら訪問させていただきます。よろしくお願いいたします。

taeさん

一般的には「デベロッパーツール」と呼ばれますし、それで通っていると思います。
日本語にしただけですが、「開発者ツール」では伝わらないこともあるかもしれません。

「デベロッパーツール」という言葉を覚えておいた方が良いと思います。

そして、CSSを書く場合、「デベロッパーツール」なしには、書けないと思います。
覚えておく方が良いではなく、必須です。
私もなかったら、書けないです。
（頑張ってHTMLソースとにらめっこすればできると思いますが、したくないです）

投稿者:: @tae

↑

デザインがいいなと思ってリンクないのに作りました。
リンクをはるか、そのほかの表示方法にするか。考えます。

「ボタン」ブロックは、aタグでHTML出力されます。

aタグは、以下にあるように、リンク先を示すべきみたいです。
（aタグのaは、anchor）

<a>: アンカー要素
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/a

<a> の内容は、リンク先を示すものであるべきです。

デザインのためだけに、「ボタン」ブロックを使用することは、間違っているように思います。

投稿者:: @tae

↑

ボタンでリンク張らない形にできればいいのですが・・。

これはもう、「ボタン」ブロック以外のものを使うということだと思います。

ブロックは、用途通りに使う方が良いと思います。

例えばですが。
ブロックエディタであれば、自分でCSSを書かなくても、以下まではできます。
（ブロックエディタが、設定に従い、CSSをインラインで書いてくれる）

今回はとりあえず、「段落」ブロックを使ってみました。
（手頃でしたので。比較のために「ボタン」ブロックも置いてあります）

ブロックエディタで、上記のように設定するだけで、以下のようにはできます。

（自分でCSSは書いていません）

 

あとは、width:50%; margin: 0 auto;をあてれば、以下のようにはできます。

 

少し角丸の部分が違いますけれど、それも、値を変えるだけですし。
他の部分も、値を変えるだけで、調整できます。

 

せっかくのブロックエディタを、使えていないと思うんですよね。
（CSSを書かなくても、ある程度自由にできるはずなのに）