働けない主婦のトライ日記

体が弱く働きたくても働けない主婦が、日々思った事や経験した事を綴っています。

スポンサーリンク

初心者のヘッダー画像変更

アメリカでは皆既日食、日本で次見られる皆既日食は2035年だそうで、改めて地球って動いているのねと実感するけっちゃんです。

 

さて、今回はヘッダー画像を変更してみました。

 

 

はてなブログさんのヘッダー画像のサイズは、横幅1,000px 縦幅200px なんだそうです。なので、それに合わせて画像を加工するのが普通なのかもしれませんが、けっちゃんは、それがなかなかうまくできませんでした。

いっそのこと、画像を加工することなくヘッダー画像として設定できないかなと模索していたところ、またお助けブログを見つけました。

 

画像を加工するのではなく、縦横の比率をCSSで設定する方法です。

ではトライしてみましょう!

f:id:ketukochan:20170822105502j:plain

 ヘッダー画像を用意する。

 

用意した画像の縦横のサイズを確認する。

 

確認の仕方

用意した画像を右クリックしてプロパティをクリック

詳細をクリックすると下の画面に画像のサイズが現れる。

 

f:id:ketukochan:20170822100026j:plain

この画像の横幅780ピクセル 縦幅433ピクセルです。

 

あとは、画像の縦横の比率を計算して、CSSの%の設定を変えると言う事。

 

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



  position: relative;



  background-size: cover;



  height: auto;



}







.header-image-only #blog-title #blog-title-inner:before {



  display: block;



  content: "";



  width: 100%;



  padding-top: 55%;



}







.header-image-only #blog-title #blog-title-content {



  position: absolute;



  top: 0;



  left: 0;



  right: 0;



  bottom: 0;



}

このタグをデザインCSSにコピペするだけです。

初心者のけっちゃんは文字も画像にペイントで貼り付けて入れてしまったので、簡単でした。

 

あとは、カスタマイズ→ヘッダ→ファイルを選択すればできると思います。

 

f:id:ketukochan:20170822102707j:plain

携帯版の方はドライバのマークではなく携帯のマークをクリックして、あとは同じやり方で変更できます。

画像の大きさによっては、比率が難しく少し欠けてしまうかもしれませんが、たまたまけっちゃんの画像はちょうどよく収まりました。

でも、本来ならこちらの先輩ブロガーさんのやり方でやってみたかったのですが、またもう少しお勉強してトライしてみたいです。

 

にほんブログ村 ブログブログ ブログ初心者へ
にほんブログ村

 

スポンサーリンク