ワードプレスのヘッダー領域の画像にトップページへのリンクを貼りたい

Question

ワードプレスのヘッダー領域に、CSSをいじって画像を入れました。その後、入れた画像ともともとあったサイトタイトルの文字が被り邪魔であったので、タイトルの文字をdisplay: none;で非表示にしました。そうしたら、当たり前ですがタイトルの文字にかかっていたトップページへのリンクが消えました。

このとき、どのようにしてヘッダー画像自体にリンクを貼れば良いのでしょうか？

.mh-site-logo {
    padding: 36px;
    overflow: hidden;
    background-color: #08085C;
    text-align: center;
    background-image: url();
    background-position: top;
    background-repeat: no-repeat;

.mh-header-title
{
	display:none;
}

使用しているテーマ：
https://www.mhthemes.com/themes/mh/magazine-lite/

Comments

[kei344]

WordPressテーマはテーマ名だけではなく取得したURLを質問文に追記ください。（URLにはリンクを張ることができます）

[lino]

https://www.mhthemes.com/themes/mh/magazine-lite/

[lino]

こちらです。

[kei344]

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文を編集することをお勧めします。また、CSSの変更箇所も提示されたほうがよいです。

[momosiri]

同じテーマ入れてみましたが、ロゴで画像を設定しても、ヘッダー画像で設定してもきちんとトップページへのリンクができるようになっています。そして、いずれの場合も画像の下にタイトルが表示されるので被る感じにはなりませんでした。有効な回答を得るならどのようにCSSを記述したのかなど書く必要があるかも知れませんね。

[lino]

momosiriさん。それは外観→カスタマイズでの操作でしょうか？

Answer 1

CSSの中にサイトのURLがあったので見てみました。

要するに背景色指定したところに小さい画像を入れて真ん中に表示したい、しかもトップページリンクにしたいということと認識しました。

画像の大きさなどの関係等ありますので参考までに・・・

無理に画像をCSSで読み込ませず、小さいロゴ画像をカスタマイザー上でロゴ画像とし、それをセンター揃えする、しかもヘッダー内にあるタイトルや抜粋も非表示にするという感じで表示するとすれば

な感じになるようなCSSの例です（ヘッダー背景は赤、黒い四角の部分が画像）

.mh-site-logo {
    padding: 20px;
    overflow: hidden;
    background-color: red;
    text-align: center;
}

.mh-header-title {
    /* font-size: 32px; */
    /* font-size: 2rem; */
    /* line-height: 1; */
    display: none;
}

.mh-header-tagline {
    display: none;
    /* font-size: 14px; */
    /* font-size: 0.875rem; */
    /* line-height: 1; */
    /* color: #e64946; */
    /* padding-top: 10px; */
    /* margin-top: 10px; */
    /* border-top: 1px solid #e5e5e5; */
}

この方法でも画像の部分（真ん中の小さいところ）以外はリンクではなくなってしまいますので、単純にサイト幅のロゴ画像を用意してアップロードした方が簡単でしょう。

環境によっても違いますし、これでレスポンシブ表示でモバイル表示したら・・・などは何も考えずに設定した例ですので参考程度に見てくださいね（これ以上の回答はできません）。

Comments

[lino]

やはり、そうした方が簡単ですよね・・・。本当に困っていたので、助かりました。ありがとうございました。またご縁がありましたら、宜しくお願い致します。