久しぶりのカスタマイズが

今晩は～。

昨日に事務所のデスクトップＰＣで意気揚々とアップした作業、帰宅後に家のノートＰＣから見ますと

この有様でした笑

理由はモニターの大きさの問題で、ＣＳＳの画像位置に関する部分が「右から○○px」となっていた所為ですね。これはこれで悪くないのかもしれないですが、また凝ってしまいそうですので直しました笑。

/* ヘッダー背景 */
.skin-bgHeader {
background-color: #ffffff;
background-image: url(https://stat.blogskin.ameba.jp/blogskin_images/20200507/12/00/C7/p/o02500167tulonnote1588823042168.png);
background-repeat:no-repeat;
background-position: 65% 90%;
}

この「％」は 上下 左右 の順のようで 50% 50% で中央に来ます。こっちの方が移動させ易いですね。

↑自宅15インチ

事務所19インチ↓

悪くはないですが、やはり少し差が出ます。私のイメージとしては「タイトル・説明文・画像の配置は固定されて欲しい」ということなんですね。検索しながらたどり着いたものがこちら

/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
background-color: #ffffff;
background-image: url(https://stat.blogskin.ameba.jp/blogskin_images/20200507/12/00/C7/p/o02500167tulonnote1588823042168.png);
background-repeat:no-repeat;
background-position: calc(50% + 200px) calc(50% + 60px);
}

これも 上下 左右 の順で 50% 50% が中央、＋と－で方向を変えられるので中央からの絶対値で配置出来ます。つまりモニターの大きさに左右されなくなるということですね。昨日の続きでした～。