ヘッダーがきれいに表示されるように弄る

ヘッダー変えましたうへへへ!

 

あとついでに…

最近FHD以上の解像度で自分のブログをチェックすることが多くなり

ヘッダー画像(上のタイトル部分の画像)がぼやけるのが気になってきたので

デザインの設定をちょちょっと追加してみることに('ω')

 

 

 

という部分を書いてから二日後にやっと納得がいくものにできたので公開します

(実は最初の方は23日に書いてた)

 

 

こちらをデザインCSSにコピペしてhedder.png部分を任意の画像ファイルのURLと

置き換えれば基本大丈夫

(widthとかheightの値は自分が設定した画像サイズに合わせて適当にいじってネ)

 

ちょっとした解説

・まずデザイン設定の所からヘッダー画像をアップロードすると勝手にgifに変換されて

画質がすこぶる劣化するのでURLを直接指定しました。

・background-size:contain;とすることによって表示するブラウザの大きさが変わっても

縦横比は保持してきれいに表示できるようにしました(4kモニターでもボケない!)

↑ちなみに自分は1790*634pxの画像を使ってます

 

・これだけだと画像の上にブログタイトルが表示されてしまうので

overflow: hidden;
text-indent: 100%;
white-space: nowrap;

…を追加して表示を消します。

ちなみにtext-indent:-9999pxでも消せるのですがどうやらあまりよろしくないとか('ω')

 

 以上解説おしまい

自分も全然cssとか詳しくなかったので

調べて組み合わせて…みたいな感じでやっとこさです(´Д`)

 

まあでもこれで今度ヘッダー変更するときはURL変えるだけだから楽じゃ!

では('ω')ノシ<じゃあの!

 

 

 そういえば…

 

https://twitter.com/sa9u/status/922388470542213120

 iPhone6Sちゃん復活しました!!!()

 

(追記)その後

 右上のグラデーションも消えて完全に復活しました…Σ('ω')

6sちゃんの自己回復能力おそるべし!

こんな感じでiPhone水没して液晶がだめになっても時間で復活するかもしれないから

そっとケースに入れて保存しておいた方がいいのかも…しれない('ω')ホントカヨ