アメブロを見やすくする、ヘッダ画像を設定しよう

アメブロのアプリやスマホでもヘッダー画像を表示させる方法

「アメブロでスマホで見たときにもヘッダー画像を見せたいなー」って思ったことありませんか?

せっかく凝ったアメブロのヘッダー画像を作っても、
アメブロのスマホ、アメブロのアプリでは、アメブロのヘッダー画像は表示されません。

しかし、ちょっとした簡単な工夫でPC用のヘッダー画像をアメブロのスマホやアプリに表示させることが可能です。

考え方

記事の一番上にスマホで表示させたいヘッダー画像を入れてしまいます。

そのままだと、スマホやアプリで見たときはもともと、ヘッダー画像が表示されませんので

あたかもヘッダー画像があるように見えます。

しかし、PCでみた場合は、ヘッダー画像が記事内にもダブルで存在してしまいます。

そこで、PCでお客様が見たときには表示されず、スマホやアプリで見たとき(画面が小さいサイズもので表示されたとき)に非表示なる設定をすることでアプリやスマホでもヘッダー画像を表示させることが可能となります。

手順を説明します。

1.CSSの設定画面を開く

CSSの画面を開き編集を行います。

デザインの設定をクリック

管理画面のデザインの設定をクリック

CSSの編集をクリック

2.CSSをいじる

現在使用中のブログデザインCSSをいじります。

この部分です。

タグをコピー

こちらのタグをコピーしてください

/* スマホ時のみ画像表示 */
@media screen and (min-width: 481px){
.sp-image{
display:none;
}
}
/* スマホ時のみヘッダー画像表示 ここまで */

タグを貼り付け

CSSの一番下にこの様に貼り付けます。

貼り付けたら、保存します。

3.ヘッダー画像を記事の一番上に入れる

スマホで表示させたいヘッダー画像を記事の一番上に挿入します。

こんな風に。このままだと、スマホやアプリで見たときはあたかもヘッダー画像があるようになりますが、

PC表示ではダブってヘッダー画像がある状態になってしまいます。

そこで、PC表示では見えないようにするためのタグをいれます。

4.画像にタグを貼り付ける

htmlモードにする

タグを貼り付けたいので、htmlモードにしてください。

タグの確認

一番上の <a href=

となってる部分を見つけます。

htmlタグをコピー

こちらのタグをコピーします。

class=”sp-image”

タグの貼り付け

「a href」の「a 」と「href」間にタグを貼ります。

こんな風になればOKです。

a class=”sp-image” href

以上です!

簡単ですよね。

ぜひやってみてください。