ヘッダー画像をパソコンとスマホで別々にする方法【はてなブログ】 - そららのクリエイティブログ

こんにちはです。あっちのそららです。 ブログの顔となる「ヘッダー画像」、パソコンで見るとイイ感じだけど、スマホだとサイズ縮小されて見にくい、という悩みがありました。 原因は簡単。 パソコンは横長。対してスマホは縦長。パソコンでの見え方をイメージして作った横長の画像が、スマホの縦長画面で同じ大きさで見えるわけがありません。逆も然り。 なので、ヘッダー画像をパソコンでもスマホでも同じくらいのサイズで見せる方法を考えました。 デザインを重視したブログにしたい方は、参考にしてみてください。 作業の流れ ヘッダー制作の流れを解説します。 上の図が、はてなブログの基本的なページ構造です。 デザインテーマによっては、ブロックの位置が異なる場合もありますが、中身自体は変わりません（多分）。 今回のヘッダー制作で使用するのは、ヘッダーの一つ下にある「タイトル下」という部分です。 まずはページ最上部の、デフォ

[aTn]

メチャ、目立つサイトですね。素晴らしいです。