ブログのヘッダに画像挿入。四苦八苦。

chromeの検証モードを見ながら色々やってみました。

とりあえず、タイトル文字のもやもやの解除と、大きすぎるアイコンを小さくしました。

タイトル文字とアイコンの位置を入れ替えたいのですが、

background-position: left  center; 

の命令が 効いていないようで、今後の課題です。

変更前

変更後

画像部分が収まる範囲のサイズが高さ200px となっていましたので、100pxに縮小し、その大きさに自動で合わせるように画像のサイズ指定を  background-size: contain; としました。

ブログタイトルとブログの説明文は、color プロパティにて、文字の色を白からブラックに変更し、 text-shadow プロパティにて、文字列の影を無しにしています。

追加したCSS

/* ヘッダ画像部分の調整用 2021/02/11 追加 */

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

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

.header-image-enable #blog-title #title a {
color: #000;
text-shadow: none;
}

.header-image-enable #blog-title #blog-description {
color: #000;
text-shadow: none;
}

 引き続き努力してみます。