タイトルをタップするとリンク先にとぶ仕様がうまくいきません。

ヘッダーに「(サイト名)+ロゴ」という形で表示されています。
現在の状態ですと、ロゴをクリック（またはタップ）するとホーム画面に移動しますが、サイト名はクリック（タップ）しても白くなるだけでそれ以外の変化はありません。
ロゴだけでなく、サイト名もクリック（タップ）することでホーム画面に移動するような仕様にしたいです。

コードを見たところ、以下のように組まれていてサイト名（ミニフクロウの知恵袋）にリンクが指定されているようにみえますが、実際にはクリックしてもうまくリンク先に飛びません。

今、cssやhtmlを勉強中で恐らく基本的なことなことであることは十分承知なのですが、何時間いじってみてもうまくいかないため、恥を承知でわかる方が入ればご教示いただけますと幸いです・・・。
宜しくお願いします。

サイトURL：https://mini-owl.com/

html
1<li class="logo-menu-button menu-button">
2  <a href="https://mini-owl.com" class="menu-button-in">
3          <img class="site-logo-image" src="https://mini-owl.com/wp-content/uploads/2020/03/IMG_4512-e1583111903996.png" alt="ミニフクロウの知恵袋">
4      </a>
5</li>

行動規範の内容に同意します

回答3件

ベストアンサー

前回の質問のやり取りから、下記の記述でモバイル版にテキストを表示していることを前提に回答します。

css
1@media screen and (max-width: 768px){
2  .logo-menu-button::after {
3  content:'ミニフクロウの知恵袋';
4  font-size: 18px;
5  color: #fff;
6  }
7}

以下の様に直してみてください。

css
1@media screen and (max-width: 768px){
2  .logo-menu-button a::after { /* 前回の回答に合わせると画像テキストの順なのでafter。テキスト画像の順ならbeforeに。 */
3    content:'ミニフクロウの知恵袋';
4    font-size: 18px;
5    color: #fff;
6  }
7}
8/*もしくは以下*/
9@media screen and (max-width: 768px){
10  .menu-button-in::after {
11    content:'ミニフクロウの知恵袋';
12    font-size: 18px;
13    color: #fff;
14  }
15}

前回の質問のhwatarigさんの回答によるとPC版とモバイル版は何かしらの方法（調べてないのでこの書き方になります）で別のHTMLを出力しており、PC版でうまくいったのはaの中のspanに対して文字列を表示させたため、その部分もリンク内に入っていたからです。
モバイル版で同じようにやろうとしてもlogo-menu-buttonのクラスがついているのはaよりも上のliのため、そこにはリンクの設定がありません。
logo-menu-buttonの中のa、もしくはaにつけたクラスsite-logo-imageにテキストを表示するような指定で実現できるかと思います。

投稿2020/03/02 05:08

dit.

総合スコア3235

mona1230

2020/03/02 05:47

dit.さま回答ありがとうございます。 aをいれることで解決しました＞＜レベルに合わせた回答くださりありがとうございます！独学で学んでる途中でしたので、アドバイスいただきとても勉強になりました！

dit.

2020/03/02 06:52

解決したようで何よりです。以下、説教ではなくアドバイスとして読んでいただければと思います。今回の質問だけを見ると、maisumakunさんが指摘した通りサイト名は画面上に表示されていない状態が普通です。実際のサイトや前回の質問を見たので推測の上で回答しましたが、今後質問の際は「前提」をなるべく詳しく記載するようにしてください。 WPを使っているのか、使っているならテーマは何か、カスタマイズしたならその内容、PCやモバイルで動作は違うのか　などなど…。できればこの質問だけを読んでも完結するような書き方が望ましいかもしれませんが、関連する質問をリンクするだけでもだいぶ違います。回答者にとっては質問に書かれていることがすべてです。「目の前で同じものを見ているわけではない人に物事を正しく伝える」というのはすごく難しいのですが、そこを意識して質問していただくと望む回答が得られやすいと思います。

行動規範の内容に同意します