アメブロの新CSS編集用デザインで、ヘッダー部にスライドショーを表示するカスタマイズ方法をご紹介します。
アメブロは基本的にJavaScriptを使えないため、CSSだけでスライドショーを設置します。
コードが少し長めですが、そのままコピペで使うのであれば決して難しいカスタマイズではありませんので安心してください。
当記事で紹介するスライドショーは、各スライドが一定間隔で右から滑り込んで来て、左へ出ていくタイプです。
止めたり戻したりはできません。
↓こちらの動画のような動きになります。
スライドショーで表示する画像の数は3~5枚に対応したコードを書いてみました。
CSSを変更すればもっと増やすことも可能ですので、興味のある方はチャレンジしてみて下さい。
スライドショーに使う画像を用意する
まず、スライドショーに使う画像(ヘッダー画像)を用意します。
画像は、後記のCSSによって全て同じ縦横比に拡大・縮小されて表示されますので、歪みが出ないよう、最初から全て同じ縦横比で作っておくことをお勧めします。
画像が用意できたら、アメブロにアップロードしてURLを取得しておいて下さい。
CSSにスライドショーのためのコードを追加する
画像を用意したら、次はCSSの編集をします。
以下のコードをCSSの末尾に追加しますが、コードが「共通」「スライドが3枚の場合」「スライドが4枚の場合」「スライドが5枚の場合」の4つに分かれています。
全て追加しても構いませんが、スライド枚数が決まっている場合は「共通」と、該当のスライド枚数のコードのみ追加すれば大丈夫です。
/***********************************************************
CSSスライドショー(共通)
***********************************************************/
:root {
--header-ss-aspect-ratio: 35.7%; /* スライドの縦横比 例:横1200x縦300なら25%*/
--header-ss-loop-time: 20s; /* スライドが一巡する時間 */
--header-ss-z-index: 999; /* スライドショーのZ順(大きいほど手前に表示) */
--header-ss-top: 0px; /* スライドショーの縦位置調整 */
}
/* 座標原点は左上 */
.skin-page {
position: relative;
}
.skin-columnA .skin-blogSubA,
.skin-columnB .skin-blogSubA {
position: static;
}
/* スライドショーが表示されない場合のヘッダー画像 */
.skin-bgHeader {
width: 100%;
height: auto;
background: no-repeat scroll center center;
background-size: cover;
background-image: url(【ヘッダー画像のURL】);
}
.skin-bgHeader * {
width: 100%;
}
.skin-bgHeader a {
width: 100%;
height: 0;
padding-top: var(--header-ss-aspect-ratio);
}
.skin-headerTitle {
display: none;
}
#header-ss {
position: absolute;
top: var(--header-ss-top);
left: 0;
width: 100%;
}
#header-ss br {
display: none;
}
#header-ss ul, #header-ss li {
margin: 0;
padding: 0;
list-style: none;
}
#header-ss ul {
position: relative;
margin: 0;
padding: var(--header-ss-aspect-ratio) 0 0 0;
width: 100%;
height: 0;
overflow: hidden;
}
#header-ss ul li {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
}
#header-ss ul li:nth-of-type(1) {
left: 0;
z-index: var(--header-ss-z-index);
}
#header-ss ul li:nth-of-type(2) {
left: 100%;
}
#header-ss ul li a {
display: block;
width: 100%;
height: 100%;
opacity: 1.0 !important;
}
#header-ss ul li img {
width: 100%;
height: 100%;
}
/***********************************************************
CSSスライドショー(スライドが3枚の場合)
***********************************************************/
#header-ss.header-ss-3 ul li:nth-of-type(1) {
animation: header-ss-3-1 var(--header-ss-loop-time) linear infinite 0s;
}
#header-ss.header-ss-3 ul li:nth-of-type(2) {
animation: header-ss-3-2 var(--header-ss-loop-time) linear infinite 0s;
}
#header-ss.header-ss-3 ul li:nth-of-type(3) {
animation: header-ss-3-3 var(--header-ss-loop-time) linear infinite 0s;
}
@keyframes header-ss-3-1 {
0% {left:0;z-index:var(--header-ss-z-index)}
30.0% {left:0;z-index:var(--header-ss-z-index)}
33.3% {left:-100%;z-index:var(--header-ss-z-index)}
63.3% {left:-100%;z-index:0}
66.7% {left:100%;z-index:0}
96.7% {left:100%;z-index:var(--header-ss-z-index)}
100% {left:0;z-index:var(--header-ss-z-index)}
}
@keyframes header-ss-3-2 {
0% {left:100%;z-index:0}
30.0% {left:100%;z-index:var(--header-ss-z-index)}
33.3% {left:0;z-index:var(--header-ss-z-index)}
63.3% {left:0;z-index:var(--header-ss-z-index)}
66.7% {left:-100%;z-index:var(--header-ss-z-index)}
96.7% {left:-100%;z-index:0}
100% {left:100%;z-index:0}
}
@keyframes header-ss-3-3 {
0% {left:-100%;z-index:var(--header-ss-z-index)}
30.0% {left:-100%;z-index:0}
33.3% {left:100%;z-index:0}
63.3% {left:100%;z-index:var(--header-ss-z-index)}
66.7% {left:0;z-index:var(--header-ss-z-index)}
96.7% {left:0;z-index:var(--header-ss-z-index)}
100% {left:-100%;z-index:var(--header-ss-z-index)}
}
/***********************************************************
CSSスライドショー(スライドが4枚の場合)
***********************************************************/
#header-ss.header-ss-4 ul li:nth-of-type(1) {
animation: header-ss-4-1 var(--header-ss-loop-time) linear infinite 0s;
}
#header-ss.header-ss-4 ul li:nth-of-type(2) {
animation: header-ss-4-2 var(--header-ss-loop-time) linear infinite 0s;
}
#header-ss.header-ss-4 ul li:nth-of-type(3) {
animation: header-ss-4-3 var(--header-ss-loop-time) linear infinite 0s;
}
#header-ss.header-ss-4 ul li:nth-of-type(4) {
animation: header-ss-4-4 var(--header-ss-loop-time) linear infinite 0s;
}
@keyframes header-ss-4-1 {
0% {left:0%;z-index:var(--header-ss-z-index)}
22.5% {left:0%;z-index:var(--header-ss-z-index)}
25.0% {left:-100%;z-index:var(--header-ss-z-index)}
47.5% {left:-100%;z-index:0}
50.0% {left:100%;z-index:0}
72.5% {left:100%;z-index:0}
75.0% {left:100%;z-index:0}
97.5% {left:100%;z-index:var(--header-ss-z-index)}
100% {left:0%;z-index:var(--header-ss-z-index)}
}
@keyframes header-ss-4-2 {
0% {left:100%;z-index:0}
22.5% {left:100%;z-index:var(--header-ss-z-index)}
25.0% {left:0%;z-index:var(--header-ss-z-index)}
47.5% {left:0%;z-index:var(--header-ss-z-index)}
50.0% {left:-100%;z-index:var(--header-ss-z-index)}
72.5% {left:-100%;z-index:0}
75.0% {left:100%;z-index:0}
97.5% {left:100%;z-index:0}
100% {left:100%;z-index:0}
}
@keyframes header-ss-4-3 {
0% {left:100%;z-index:0}
22.5% {left:100%;z-index:0}
25.0% {left:100%;z-index:0}
47.5% {left:100%;z-index:var(--header-ss-z-index)}
50.0% {left:0%;z-index:var(--header-ss-z-index)}
72.5% {left:0%;z-index:var(--header-ss-z-index)}
75.0% {left:-100%;z-index:var(--header-ss-z-index)}
97.5% {left:-100%;z-index:0}
100% {left:100;z-index:0}
}
@keyframes header-ss-4-4 {
0% {left:-100%;z-index:var(--header-ss-z-index)}
22.5% {left:-100%;z-index:0}
25.0% {left:100%;z-index:0}
47.5% {left:100%;z-index:0}
50.0% {left:100%;z-index:0}
72.5% {left:100%;z-index:var(--header-ss-z-index)}
75.0% {left:0%;z-index:var(--header-ss-z-index)}
97.5% {left:0%;z-index:var(--header-ss-z-index)}
100% {left:-100%;z-index:var(--header-ss-z-index)}
}
/***********************************************************
CSSスライドショー(スライドが5枚の場合)
***********************************************************/
#header-ss.header-ss-5 ul li:nth-of-type(1) {
animation: header-ss-5-1 var(--header-ss-loop-time) linear infinite 0s;
}
#header-ss.header-ss-5 ul li:nth-of-type(2) {
animation: header-ss-5-2 var(--header-ss-loop-time) linear infinite 0s;
}
#header-ss.header-ss-5 ul li:nth-of-type(3) {
animation: header-ss-5-3 var(--header-ss-loop-time) linear infinite 0s;
}
#header-ss.header-ss-5 ul li:nth-of-type(4) {
animation: header-ss-5-4 var(--header-ss-loop-time) linear infinite 0s;
}
#header-ss.header-ss-5 ul li:nth-of-type(5) {
animation: header-ss-5-5 var(--header-ss-loop-time) linear infinite 0s;
}
@keyframes header-ss-5-1 {
0% {left:0%;z-index:var(--header-ss-z-index)}
18.0% {left:0%;z-index:var(--header-ss-z-index)}
20.0% {left:-100%;z-index:var(--header-ss-z-index)}
38.0% {left:-100%;z-index:0}
40.0% {left:100%;z-index:0}
58.0% {left:100%;z-index:0}
60.0% {left:100%;z-index:0}
78.0% {left:100%;z-index:0}
80.0% {left:100%;z-index:0}
98.0% {left:100%;z-index:var(--header-ss-z-index)}
100% {left:0%;z-index:var(--header-ss-z-index)}
}
@keyframes header-ss-5-2 {
0% {left:100%;z-index:0}
18.0% {left:100%;z-index:var(--header-ss-z-index)}
20.0% {left:0%;z-index:var(--header-ss-z-index)}
38.0% {left:0%;z-index:var(--header-ss-z-index)}
40.0% {left:-100%;z-index:var(--header-ss-z-index)}
58.0% {left:-100%;z-index:0}
60.0% {left:100%;z-index:0}
78.0% {left:100%;z-index:0}
80.0% {left:100%;z-index:0}
98.0% {left:100%;z-index:0}
100% {left:100%;z-index:0}
}
@keyframes header-ss-5-3 {
0% {left:100%;z-index:0}
18.0% {left:100%;z-index:0}
20.0% {left:100%;z-index:0}
38.0% {left:100%;z-index:var(--header-ss-z-index)}
40.0% {left:0%;z-index:var(--header-ss-z-index)}
58.0% {left:0%;z-index:var(--header-ss-z-index)}
60.0% {left:-100%;z-index:var(--header-ss-z-index)}
78.0% {left:-100%;z-index:0}
80.0% {left:100%;z-index:0}
98.0% {left:100%;z-index:0}
100% {left:100%;z-index:0}
}
@keyframes header-ss-5-4 {
0% {left:100%;z-index:0}
18.0% {left:100%;z-index:0}
20.0% {left:100%;z-index:0}
38.0% {left:100%;z-index:0}
40.0% {left:100%;z-index:0}
58.0% {left:100%;z-index:var(--header-ss-z-index)}
60.0% {left:0%;z-index:var(--header-ss-z-index)}
78.0% {left:0%;z-index:var(--header-ss-z-index)}
80.0% {left:-100%;z-index:var(--header-ss-z-index)}
98.0% {left:-100%;z-index:0}
100% {left:100%;z-index:0}
}
@keyframes header-ss-5-5 {
0% {left:-100%;z-index:0}
18.0% {left:100%;z-index:0}
20.0% {left:100%;z-index:0}
38.0% {left:100%;z-index:0}
40.0% {left:100%;z-index:0}
58.0% {left:100%;z-index:0}
60.0% {left:100%;z-index:0}
78.0% {left:100%;z-index:var(--header-ss-z-index)}
80.0% {left:0%;z-index:var(--header-ss-z-index)}
98.0% {left:0%;z-index:var(--header-ss-z-index)}
100% {left:-100%;z-index:var(--header-ss-z-index)}
}
コードを修正してスライドショーを調節する
「共通」の最初の部分で、ある程度の調整ができます。
特に「スライドの縦横比」はユーザー毎に異なると思いますので、ご自身のアメブロで使う画像に合わせて設定して下さい。
また、「共通」の「【ヘッダー画像のURL】」という箇所には、スライドが表示されるまでにヘッダー部に表示する画像のURLを設定できますが、ここに1枚目のスライドのURLを設置しておくと、スライドの読込中にも1枚目のスライドが表示された状態になるのでお勧めです。
フリースペースにスライドショーを準備
次に、フリースペースに、スライドショー本体のHTMLコードを記述します。
画像が3枚の場合は、コードは以下のようになります。
<div id="header-ss" class="header-ss-3">
<ul>
<li>
<a href="【1枚目のリンク先のURL】">
<img src="【1枚目の画像のURL】">
</a>
</li>
<li>
<a href="【2枚目のリンク先のURL】">
<img src="【2枚目の画像のURL】">
</a>
</li>
<li>
<a href="【3枚目のリンク先のURL】">
<img src="【3枚目の画像のURL】">
</a>
</li>
</ul>
</div>
画像が4枚の場合は、コードは以下のようになります。
<div id="header-ss" class="header-ss-4">
<ul>
<li>
<a href="【1枚目のリンク先のURL】">
<img src="【1枚目の画像のURL】">
</a>
</li>
<li>
<a href="【2枚目のリンク先のURL】">
<img src="【2枚目の画像のURL】">
</a>
</li>
<li>
<a href="【3枚目のリンク先のURL】">
<img src="【3枚目の画像のURL】">
</a>
</li>
<li>
<a href="【4枚目のリンク先のURL】">
<img src="【4枚目の画像のURL】">
</a>
</li>
</ul>
</div>
画像が5枚の場合は、コードは以下のようになります。
<div id="header-ss" class="header-ss-5">
<ul>
<li>
<a href="【1枚目のリンク先のURL】">
<img src="【1枚目の画像のURL】">
</a>
</li>
<li>
<a href="【2枚目のリンク先のURL】">
<img src="【2枚目の画像のURL】">
</a>
</li>
<li>
<a href="【3枚目のリンク先のURL】">
<img src="【3枚目の画像のURL】">
</a>
</li>
<li>
<a href="【4枚目のリンク先のURL】">
<img src="【4枚目の画像のURL】">
</a>
</li>
<li>
<a href="【5枚目のリンク先のURL】">
<img src="【5枚目の画像のURL】">
</a>
</li>
</ul>
</div>
何れの場合も、【?枚目の画像のURL】の箇所にスライドとして表示する画像のURL、【?枚目のリンク先のURL】の箇所にスライドをクリックした際に遷移する先のURLを記述して下さい。
これで、設置完了ですので、うまく設置できたか確認してみて下さい。
まとめ
今回ご紹介したヘッダースライドショーは、CSSアニメーションを使っています。
アニメーションのパターンを、スライド3枚用、4枚用、5枚用の3種類の別々に用意しているため、上記のような構成になりました。
JavaScriptを使えればもっと柔軟で使いやすいスライドショーを設置できるのですが、CSSしか使えないアメブロでは、このくらいが限界ではないかと思います。
以上、新CSS編集用デザインのアメブロのヘッダーに、CSSでスライドショーを表示する方法をご紹介しました。
よかったら挑戦してみて下さい。