この記事ではアメブロのヘッダーにスライドショーを設定する方法をご紹介していきます。
アメブロのヘッダーは任意の１枚画像を設定することもできますが、複数枚のスライドショー形式でも設定も可能です。ファーストビューで複数の画像を見せたい場合には、このスライドショー形式のヘッダーがおすすめとなっていますので、ぜひ実践してみてください。
目次
ヘッダーのスライドショーとは？
アメブロのヘッダーとは文字どおりブログの上部に位置するものであり、画像を設置したりブログタイトルを設定することが一般的です。
ヘッダーのスライドショーとはこのヘッダー部分に複数枚の画像がスライドして表示されていくものを指します。
アメブロの場合、デフォルトではブログタイトルがそのままヘッダー部分になる場合がありますが、任意の画像を選択してヘッダー部分へ挿入することも可能です。
ただし、デザインの設定によってはヘッダーを挿入できない場合があります。すでに出来上がっているようなデザインの場合には、そのデザインが優先されますので、カスタマイズのコードを反映することができません。
スライドショーのメリット
アメブロのスライドショーは見る人に大きなインパクトを与えられ、スライドショーの構成を工夫することで、ブログ全体像をユーザーに瞬時に提供できます。
具体的なメリットとしては複数の画像を瞬時に見せることができる点やスライドショーを実施しているブログが少ないため、他のブログとの差別化を取れるという点です。
例えば、何か悩みがあるシーンの画像を見せ、次にそれを解決するためのアイテムを表示します。このスライドショーを見た人が同じ悩みを抱えていた場合、自然とその商品に興味を持つように誘導できます。
このように、ストーリーによって訴求効果を上げられることもメリットの一つです。1枚の画像しか表示できないとなると、商品だけを載せることぐらいしかできません。そうではなく、それが訪問者にとって不可欠だと印象づけられるというわけです。
スライドショーの設定方法（特定のコードを入力）
スライドショーを設定する方法は複数ありますが、効率が良いのはカスタマイズ向けのCSSを用いる方法です。
【スライドショーの設定方法】
- アメブロへログイン
- デザイン設定にてカスタマイズ可能なデザインへ変更
- 下記のコードの「画像URL」を表示したい画像のURLへ変更
（画像は事前にアップロードしURLを取得） - 「CSS編集」をクリック
- 編集したコードを「現在使用中のブログデザインCSS」の最後にコピペ
（ブログタイトルを非表示にしたい場合には上記と同様） - 「表示を確認」をクリック
（ここでデザインが崩れていないか等を確認） - 保存をクリックで完了
- ３枚のスライドショーを設定するコード
/*
** ヘッダースライドショー3枚(新CSS)
**/
@keyframes header_ss {
0% {left: 0px;}
28.3% {left: 0px;}
33.3% {left: -1120px;}
61.6% {left: -1120px;}
66.6% {left: -2240px;}
94.9% {left: -2240px;}
100% {left: -3360px;}
}
.skin-bgHeader a {
height: 300px; /* 画像の高さ */
position: relative;
z-index: 1;
overflow: hidden;
}
.skin-bgHeader a:before {
content: "";
position: absolute;
z-index: -1;
width: 400%;
height: 100%;
background: no-repeat scroll center top;
background-position:
0 0,
1120px 0,
2240px 0,
3360px 0;
animation: header_ss 12s ease infinite 0s; /* 「12s」のところで全体時間調整 */
background-image:
url("1枚目の画像のURL"),
url("2枚目の画像のURL"),
url("3枚目の画像のURL"),
url("1枚目の画像のURL"); /* 1枚目と同じ */
}
- ４枚のスライドショーを設定するコード
/*
** ヘッダースライドショー4枚(新CSS)
**/
@keyframes header_ss {
0% {left: 0px;}
20.0% {left: 0px;}
25.0% {left: -1120px;}
45.0% {left: -1120px;}
50.0% {left: -2240px;}
70.0% {left: -2240px;}
75.0% {left: -3360px;}
95.0% {left: -3360px;}
100% {left: -4480px;}
}
.skin-bgHeader a {
height: 300px; /* 画像の高さ */
position: relative;
z-index: 1;
overflow: hidden;
}
.skin-bgHeader a:before {
content: "";
position: absolute;
z-index: -1;
width: 500%;
height: 100%;
background: no-repeat scroll center top;
background-position:
0 0,
1120px 0,
2240px 0,
3360px 0,
4480px 0;
animation: header_ss 16s ease infinite 0s; /* 「16s」のところで全体時間調整 */
background-image:
url("1枚目の画像のURL"),
url("2枚目の画像のURL"),
url("3枚目の画像のURL"),
url("4枚目の画像のURL"),
url("1枚目の画像のURL"); /* 1枚目と同じ */
}
アメブロへのスライドショー設定はそれほどハードルは高くありません。コードの一部を自分の画像のURLに変更すれば良いだけなので、必ずしもCSSの原理を詳しく把握しなくても編集が可能です。
ただし、コードを映し間違えると正しく機能しなくなりますので注意が必要です。まずはスライドショー用の画像を用意し、CSSの最期の箇所にURLを貼り付けてください。それによってブログのヘッダーが変化するか確かめましょう。
ブログタイトルと説明文を非表示にするコード
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}もしブログタイトルや説明文がスライドショーに干渉している場合には非表示にすることをおすすめします。
上記のコードをデザインへ直接貼り付けることによって非表示にすることが可能です。やり方については前項でご紹介した方法と同様となります。
スライドショーの注意点
アメブロのスライドショーの注意点としてはPCでのみ表示が出来るという点です。アメブロの場合にはヘッダーがスマホでは非表示ですので、スライドショーも非表示となります。
そのため、PCユーザー向けの施策となりますので覚えておくと良いでしょう。また、閲覧しているパソコンが古い場合やブラウザによって正しく機能しないこともあります。
ただ、アメブロでスライドショーを行なっているユーザーが少ないため、他のブログとの差別化ができる点は大いにメリットがあります。
一般的な独自ブログではスライドショーは人気の施策となっていますので、ぜひアメブロでも実践してみることをおすすめします。
まとめ
アメブロのヘッダーにスライドショーを設定する方法をご紹介していきましたが、いかがでしたか？
アメブロのヘッダー作成やスライドショーの挿入は特定のコードを挿入し、画像を用意すればすぐに出来てしまいます。そのため、ファーストビューをより良いものにするためにぜひ実践してみることをおすすめします。
