サツログ。

独身こじらせ干物でオタク、社畜の狭間で撮られることを仕事にしながら田舎暮らしの夢見人、カンザキサツキ(颯希)の日々徒然とひとり人生の歩み。

【ブログのTOP画像を設置しました】レスポンシブルデザイン対応のCSS設置方法もご紹介します。

ずっとブログのTOPがやっつけ感満載(サブログ。はまだそのまま)

f:id:kanzakisatuki:20190323220033j:plain
カンザキサツキです。

 

ついにやっとそれっぽいシュールなTOP画像にしてみました。

f:id:kanzakisatuki:20190323212620j:plain

※この記事はあくまでレスポンシブルデザインの方向けの設置方法になります。 

 

まず、画像を作るのにイロイロなブログを探せば出てきますが・・・

縦200ピクセル×横1000ピクセルで作成します。

 

大事なのは

・画像だけ設置する→画像がリンクに変わります

・文字も設置する→画像の上に文字が配置されます

どちらの設定でブログTOPを表示するかぐらいだと思います。

カンザキはせっかくなので画像だけにしようと思いました。

(そしてこの安直なデザインに至ります。)

 

ECサイトに関してはレスポンシブルが古いだのどうだの聞きます、

アドセンスさん的にもスマホはスマホのほうがという記事も見ますが、

ブログなんできっと現状アドセンスから何も言われてません、

大丈夫でしょう!(2019年3月現在の情報です、未来は分かりません) 

 

さーてこっからCSSをいじくります。

実は前にCSSいじるのに大失敗して諦めて試合終了していました。

ぼくみたいに

「CSS書いたのに全然反映されなくて画像切れるじゃん・・・。」

という人もいると思うのです!

このままコピペでOKなCSSをペタリできるようにしておきます。

貼る場所は・・・

管理画面→デザイン→カスタマイズ→デザインCSSです。

@media (max-width: 480px){
 #blog-title-inner,#title a{
  height:100px!important;
 }

 

#blog-title-inner {
         background-size: contain;
 }
}
これを書いて反映させたら・・・

f:id:kanzakisatuki:20190323220147p:plain

バッチリスマホでも画面にしっくり嵌るようになります。

レスポンシブルデザインを選んでいない場合は、

スマホ幅は横480ピクセルがMAXでGOODっぽいです。

 

たまにはちゃんとブログの設定もいじってデザイン変更していかないと、

もう半年も初期のままだよ!カンザキ!!

オリジナリティあふれるブログにしていきたいカンザキでした。

是非トライしてみてくださいね!

 

初心者ブロガーなカンザキがブログに設置していったものは、

www.satukiblog.com

からご覧いただければ幸いです!

 

アドセンス関係の記事は、

www.satukiblog.com

 

サブブログも、変えてみました。

satusaba.hatenablog.com

当サイトの内容、テキスト、画像等の無断転載・無断使用を固く禁じます。 また、まとめサイトへの引用を厳禁いたします。

Unauthorized copying and replication of the contents of this site, text and images are strictly prohibited.