ブログのトップ画像を替えました(2)

2022/02/23 09:00

ブログのヘッダ画像変更の続き

前回の、ブログのヘッダ画像を替えたという記事の続きです。
さらに、もう少しだけ、いじってみると・・

ここで少し大きくしたい

　どうせなら、もう少し海を見せたいなと思い、タテ方向に下へ伸ばして表示させられないかと、画像を拡大。アップロードしてみると・・見事に「ずれた〜」。テキスト文字とヘッダ画像がずれました。

▲見事にずれました！

　しかも、拡大して伸ばした分さえも、すべて表示していない様子。
あと二回りぐらい、下側の海を広げたのですが、切られています。

タイトル文字と紹介文は、ブラウザで表示する純粋なテキスト属性なので、普通のユーザーが位置などをコントロールするのは難しい。完全にカスタマイズして、スタイルシートでも使えばいいかもしれないが、自分の半端な知識でこのあたりをヘタにいじると崩れたりしそう・・・。

拡大表示は諦めて

ヘッダ画像の、さらなる拡大はきっぱりと諦める！（笑）
ここで時間かけてたら終わらない予感だし・・。
それならば、ブログタイトルに合わせて、「画像」を調整することでビタビタにしてみたい。
　スクリーンショットから、ヘッダのタイトル文字のだいたいの場所を検討をつけてみました。後はひたすら1ピクセル単位で上下左右に移動を繰り返して、アップして文字と画像が合うか、何度も試行錯誤したものが現在のヘッダ画像です。

合わせてスマホ用のヘッダも変更。

ムラゴンのヘルプでは、スマホ用のヘッダ画像はスマホからしか追加変更できないようです。
とりあえずパソコンで、適当なサイズで作って、スマホへブルーツゥース共有で送り、編集画面に入って、アップしてみました。

▲最初に作ったもの。かなり大きめでしたが、サーバへ転送すると・・

結構いい感じ！

すると結構いい感じ！自動的に縮小してくれました！

▲なんかバチッと決まって嬉しい！

　写真は、ほぼ一発で決まり。文字はこのままだと、縮小されると小さすぎるので、少しずつ大きくして、見やすいサイズ感になるまで繰り返しました。JPEGに保存した状態では約500kbですが、勢い余って編集時のデータの容量が9MBを超えてました（ひぃー）。

▲文字はこのぐらいの大きさじゃないと読みづらい・・

　最近のスマホだと、本体の通信量の節約設定や、サーバやブラウザの設定などで軽くしてくれるので、いいかな〜とも思いましたが、それにしても重すぎるので、フォトショップでドキュメントサイズを変更（ピクセルサイズも追随して変更）し、約2MBまで縮小（笑）。文字の下のボカシのかかり方を少し調整して再度アップ。
画像をタップするときちんとトップページへも移動してくれました。リンクも自動でついて嬉しい限り。