スマートフォンからの見栄えをよくする～スマホ用記事の中にヘッダーをつける～

※この記事は、スマートフォンで見てもらうことを前提に作った記事です※

↓スマートフォンだけ表示される画像を配置しようという記事です↓

↑スマートフォンだけ表示される画像を配置しようを作ろうという記事です↑

yozuです

スマートフォン（ブラウザ版）でこのブログを確認したところ

レイアウトがどうこうとか以前に、情報量が少ない印象を受けました

ヘッダー画像やメニューバーという情報がスマートフォンレイアウトによってそぎ落とされたことで、中身のない、魅力的とは遠い記事に見えてしまったようです

このブログは、人に見てもらうことを目的とはしていないのですが、自分が振り返って読もうとした時にテンション下がるのはいただけないな・と思います

①スマートフォン記事用のヘッダー画像の用意

②スマートフォンだけで表示されるように設定

以前作ったこちらを再利用

・CSSに下記記述を追加　

@media screen and (min-width: 481px){
.sp_header{
display:none;
}
}

※「デザインの設定」から「CSS編集」で編集エリアは出てきます

・記事編集の際、HTML表示にする

・スマホのみ表示を想定している記事のヘッダー画像に「class="sp_header"」の記述を追加する

・記事を公開する

スマートフォン表示とPC表示の違いを確認します

▽PC表示

画像が表示されていません

▽スマホ表示

無事、表示されました

やはり画像からはいってくる情報量の多さや映え具合はある程度ないと、読み返す気も無くなってしまうなと感じました

おわり