ヘッダ内の画像とタイトル文字の位置変更について。

ヘッダへの画像挿入後の、画像とタイトル文字の位置変更について悩んでおりましたが、ある程度目処がついてきました。

以下は昨日までに実施したことです。

画像を挿入すると、画像自体は中央に配置され、タイトル文字などは位置はそのままですが、白抜きの影付き文字に。

これをCSSを追記することによって、タイトル文字の影付きを削除し、普通の黒色にし、画像を小さくしました。

以下は、本日実施したことです。センタリングされていた画像を左端に移動させました。

.header-image-enable #blog-title #blog-title-inner {

background-position: left  center;    /* ←この行が効いてくれない  */
height: 100px;
background-size: contain;
}

実は、画像の位置指定は、HTML内にて設定されており、こちらの設定が優先されるため、後で、CSSによる設定をしても無視されてしまっていたのでした。

<div id="blog-title-inner" style="background-image: url(’ｈｔｔｐｓ://***.jpg’);
background-position: center 0px;">

この background-position: center 0px が 優先して使用されていました。

そこで、 !important 

という文字をつければ、最優先してくれるということを知り、実際にやってみました。

.header-image-enable #blog-title #blog-title-inner {

background-position: left  center !important ;    /* ← !important を追加した！  */
height: 100px;
background-size: contain;
}

このように書き換えたところ、画像が、左端に移動してくれました。

画像とタイトル文字が重なっていますので、タイトル文字を右に移動させます。

タイトル文字部分のHTMLを確認すると

<h1 id="title"><a href="https://www.mypath-as-variant.com/">自分方位研究所</a></h1>

となっていましたので、以下のCSSコードを追加しました。
画像の横幅が100pxなので、それを目安に現状の位置から100px余白を設定しています。

h1#title {margin-left: 100px;}

これで、画像とタイトル文字が重ならないようになりました。

これでとりあえずいいような気もしますが、「日々の活動記録」の文字をタイトルの下に移動させたい気もします。これについては、後日考えたいと思います。