【ブログ】background-positionで上手くいかないので・・・。

f:id:Kawan0116:20210429112827p:plain

皆さんは、ブログのアイキャッチ画像がない場合、どうしますか?

空白にしますか?

僕は空白にしていましたが、トップページに統一感がありません。

何故なら、画像があるのとないのとでは、トップページの印象が変わるからです。

なので、自作で画像を作りました。

背景画像の位置を調整したかった

サクッと作ったのですが、トップページで見ると文字の左右の余白が一定ではないのです。

なので、background-positionで調整しようと思いましたが無理でした。

1時間くらい対応しましたが無理でした。

「なんでやねん!」って思ったのですが、もう、background-positionで背景画像の調整は諦めました。

1時間くらいかかっても解決出来なかった

先ほど書いたように、1時間くらいかけても無理でした。

うーん・・・。

おかしいなぁ~。

サクッと出来るはずなのに・・・。

一応、寄せることは出来ましたが、思う通りの位置になりません。

コーディングに問題あるのか・・・。

ちょっと良く分からないですけどね。

いい感じに画像を作ることにした

左右の余白はわずか数センチですが、background-positionで上手くいかない・・・。

そこで「画像を作り直そう!」って思いました。

保存してある画像を引っ張りだしてきて、調整を開始。

何とかうまくいきました。

トップページで見たとき、文字の左右の余白がほぼ同じです。

全て目分量なので、実際は異なるかもですが、まぁ、ぱっと見問題ないので、これで良しとしました。

30分くらいかかった

制作時間は30分です。

楽しかったですね。

とりあえず、当ブログは「coool.blue」。「blue」なので青色でいい感じのモノを設定しました。

色選びで迷いましたね。

まぁ、現状でベストの色という事で、この色を使うことにしました。

ただ、ヘッダの色と微妙に異なるので、画像の色と同じにしました。

この色の方がいいと思いましたね。

僕、色系は結構こだわるほうなので、とても満足しています。

気に入った

とても気に入っています。

テンション急上昇(笑)。

世界に1つだけのモノ。

生み出すのは難しいですが、完成出来たときは嬉しさ倍増です。

ネットで様々なサンプル画像がありますが、僕はあえて、オリジナルを作成しました。

参考になる画像も確認しなかったですね。

思うままに制作。

とても満足しています。

background-positionを使いたかったけど

とは言え、background-positionを使いたかったですね。

目分量よりbackground-positionでいい感じに配置したかったと思っています。

まぁ、ちょっとまた取り組むかもしれませんが、まぁ、あまりこだわる必要が無くなりました。

何個もあるなら1つずつ作っていく必要がありますので手間がかかります。

background-positionであれば、いくつか手間が省けますのでいいかなと思いますけどね。

ちょっと、もうちょい格闘しようかと思ってみたり。

まぁ、考えます。

さいごに

background-positionはとても便利ですが、僕の場合は無理でした。

しかし、再度挑戦しようと思っています。

それで上手く行かなければ諦める(笑)。

という感じです。