アメブロカスタマイズ専科

本サイトはアフィリエイト広告を利用しています
アメブロカスタマイズ専科 - ヘッダー - ヘッダーにスライドショーを設置・表示する方法

ヘッダーにスライドショーを設置・表示する方法

 ヘッダー

アメブロの新CSS編集用デザインで、ヘッダー部にスライドショーを表示するカスタマイズ方法をご紹介します。

現状、2カラムレイアウトのみ動作確認済みです。
OSやブラウザの設定でアニメーションがOFFになっている端末ではスライドがアニメーションしない可能性があります。

アメブロは基本的にJavaScriptを使えないため、CSSだけでスライドショーを設置します。

コードが少し長めですが、そのままコピペで使うのであれば決して難しいカスタマイズではありませんので安心してください。

当記事で紹介するスライドショーは、各スライドが一定間隔で右から滑り込んで来て、左へ出ていくタイプです。

止めたり戻したりはできません。

↓こちらの動画のような動きになります。

スライドショーで表示する画像の数は3～5枚に対応したコードを書いてみました。

CSSを変更すればもっと増やすことも可能ですので、興味のある方はチャレンジしてみて下さい。

スライドショーに使う画像を用意する

まず、スライドショーに使う画像（ヘッダー画像）を用意します。

画像は、後記のCSSによって全て同じ縦横比に拡大・縮小されて表示されますので、歪みが出ないよう、最初から全て同じ縦横比で作っておくことをお勧めします。

画像が用意できたら、アメブロにアップロードしてURLを取得しておいて下さい。

カスタマイズに使う画像のアップロード方法と画像のURLの取得方法
カスタマイズに使う画像のアップロード方法と画像のURLの取得方法
アメブロで画像を使ったカスタマイズをする場合に必要な、カスタマイズで使用する画像をアメブロにアップロードする方法と、アップロードした画像をCSSなどから呼び出すために必要な画像のURLを取得する方法について解説します。

CSSにスライドショーのためのコードを追加する

画像を用意したら、次はCSSの編集をします。

CSSを編集する手順：カスタマイズで必須の基本操作です！
CSSを編集する手順：カスタマイズで必須の基本操作です！
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スライドショー（スライドが３枚の場合）
***********************************************************/
#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スライドショー（スライドが４枚の場合）
***********************************************************/
#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スライドショー（スライドが５枚の場合）
***********************************************************/
#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でスライドショーを表示する方法をご紹介しました。

よかったら挑戦してみて下さい。

新CSS編集用デザイン向けカスタマイズ 目次
新CSS編集用デザイン向けカスタマイズ 目次
アメブロの新CSS編集用デザイン向けカスタマイズ方法の目次です。新しいカスタマイズのノウハウ記事やハウツー記事を追加した場合はこちらの目次も更新しますので、時々チェックして見て下さい。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］