CSSでヘッダーにスライドショーを表示する方法

アメブロカスタマイズ

CSSでヘッダーにスライドショーを表示する方法

 

アメブロカスタマイズの松本です。

こんにちは。

ヘッダーにスライドショーを表示する方法を、CSSでできないか考えてみたところできましたのでご紹介します。

コードが少し長めですが、そのまま使うのであれば決して難しい部類のカスタマイズではありません。

なお、比較的新しい機能であるCSS3をたくさん使っているため古いブラウザではスライドショーとして表示されませんのでご注意ください。

例えば、IE(Internet Explorer)の場合、バージョン10から対応しています。

それから、今回ご紹介する方法では画像数2~5枚に対応していますが、CSSを変更すればもっと増やすことも可能ですので、興味のある方はご自分で調べてチャレンジしてみてもいいと思います。。

 

CSSにスライドショーの設定をする

 

では、まず、以下のコードをユーザーCSSの末尾に追加して下さい。
(もしユーザーCSSについてわからない場合はこちらをご参照ください。)

長いので、漏れのないよう注意して貼り付けて下さいね。

(このコードは、既にヘッダー画像を設定してヘッダークリックでブログトップへジャンプするようにしてある状態で、ヘッダー画像と同じ大きさのスライドショーを表示することを前提としています)

/***********************************************************
CSS3スライドショー for アメブロ
2014/04/08 A.Matsumoto http://ameblo.jp/wazameba/
***********************************************************/

.skinContentsArea{
position:relative;
}
.css3ss {
position:absolute;
left:0;
top:-300px;
}
.css3ss img {
position:absolute;
opacity:0.0;
}
.css3ss br {
display:none;
}
.css3ss_2 img {
opacity:0.0;
animation:css3ss_ani_2 12s linear infinite 0s;
-webkit-animation:css3ss_ani_2 12s linear infinite 0s;
}
.css3ss_2 img:nth-of-type(1) {
opacity:0.0;
animation:css3ss_ani_2_1 12s linear infinite 0s;
-webkit-animation:css3ss_ani_2_1 12s linear infinite 0s;
}
.css3ss_3 img {
opacity:0.0;
animation:css3ss_ani_3 18s linear infinite 0s;
-webkit-animation:css3ss_ani_3 18s linear infinite 0s;
}
.css3ss_3 img:nth-of-type(1) {
opacity:0.0;
animation:css3ss_ani_3_1 18s linear infinite 0s;
-webkit-animation:css3ss_ani_3_1 18s linear infinite 0s;
}
.css3ss_4 img {
opacity:0.0;
animation:css3ss_ani_4 24s linear infinite 0s;
-webkit-animation:css3ss_ani_4 24s linear infinite 0s;
}
.css3ss_4 img:nth-of-type(1) {
opacity:0.0;
animation:css3ss_ani_4_1 24s linear infinite 0s;
-webkit-animation:css3ss_ani_4_1 24s linear infinite 0s;
}
.css3ss_5 img {
opacity:0.0;
animation:css3ss_ani_5 30s linear infinite 0s;
-webkit-animation:css3ss_ani_5 30s linear infinite 0s;
}
.css3ss_5 img:nth-of-type(1) {
opacity:0.0;
animation:css3ss_ani_5_1 30s linear infinite 0s;
-webkit-animation:css3ss_ani_5_1 30s linear infinite 0s;
}
.css3ss img:nth-of-type(1) {
animation-delay:0s;
-webkit-animation-delay:0s;
}
.css3ss img:nth-of-type(2) {
animation-delay:5s;
-webkit-animation-delay:5s;
}
.css3ss img:nth-of-type(3) {
animation-delay:11s;
-webkit-animation-delay:11s;
}
.css3ss img:nth-of-type(4) {
animation-delay:17s;
-webkit-animation-delay:17s;
}
.css3ss img:nth-of-type(5) {
animation-delay:23s;
-webkit-animation-delay:23s;
}
.css3ss img:nth-of-type(6) {
animation-delay:29s;
-webkit-animation-delay:29s;
}
@keyframes css3ss_ani_2_1 {
0%    {opacity:1.0;animation-timing-function:ease-in;}
41.7% {opacity:1.0;}
50.0% {opacity:0.0;animation-timing-function:ease-out;}
91.7% {opacity:0.0;}
100%  {opacity:1.0;}
}
@keyframes css3ss_ani_2 {
0%    {opacity:0.0;}
8.3%  {opacity:1.0;animation-timing-function:ease-in;}
50.0% {opacity:1.0;}
58.3% {opacity:0.0;animation-timing-function:ease-out;}
100%  {opacity:0.0;}
}
@keyframes css3ss_ani_3_1 {
0%    {opacity:1.0;animation-timing-function:lenear-in;}
27.8% {opacity:1.0;}
33.3% {opacity:0.0;animation-timing-function:lenear-out;}
94.4% {opacity:0.0;}
100%  {opacity:1.0;}
}
@keyframes css3ss_ani_3 {
0%    {opacity:0.0;}
5.5%  {opacity:1.0;animation-timing-function:lenear-in;}
33.3% {opacity:1.0;}
38.9% {opacity:0.0;animation-timing-function:lenear-out;}
100%  {opacity:0.0;}
}
@keyframes css3ss_ani_4_1 {
0%    {opacity:1.0;animation-timing-function:lenear-in;}
20.8% {opacity:1.0;}
25.0% {opacity:0.0;animation-timing-function:lenear-out;}
95.8% {opacity:0.0;}
100%  {opacity:1.0;}
}
@keyframes css3ss_ani_4 {
0%    {opacity:0.0;}
4.2%  {opacity:1.0;animation-timing-function:lenear-in;}
25.0% {opacity:1.0;}
29.2% {opacity:0.0;animation-timing-function:lenear-out;}
100%  {opacity:0.0;}
}
@keyframes css3ss_ani_5_1 {
0%    {opacity:1.0;animation-timing-function:lenear-in;}
16.7% {opacity:1.0;}
20.0% {opacity:0.0;animation-timing-function:lenear-out;}
96.7% {opacity:0.0;}
100%  {opacity:1.0;}
}
@keyframes css3ss_ani_5 {
0%    {opacity:0.0;}
3.3%  {opacity:1.0;animation-timing-function:lenear-in;}
20.0% {opacity:1.0;}
23.3% {opacity:0.0;animation-timing-function:lenear-out;}
100%  {opacity:0.0;}
}
@-webkit-keyframes css3ss_ani_2_1 {
0%    {opacity:1.0;animation-timing-function:ease-in;}
41.7% {opacity:1.0;}
50.0% {opacity:0.0;animation-timing-function:ease-out;}
91.7% {opacity:0.0;}
100%  {opacity:1.0;}
}
@-webkit-keyframes css3ss_ani_2 {
0%    {opacity:0.0;}
8.3%  {opacity:1.0;animation-timing-function:ease-in;}
50.0% {opacity:1.0;}
58.3% {opacity:0.0;animation-timing-function:ease-out;}
100%  {opacity:0.0;}
}
@-webkit-keyframes css3ss_ani_3_1 {
0%    {opacity:1.0;animation-timing-function:lenear-in;}
27.8% {opacity:1.0;}
33.3% {opacity:0.0;animation-timing-function:lenear-out;}
94.4% {opacity:0.0;}
100%  {opacity:1.0;}
}
@-webkit-keyframes css3ss_ani_3 {
0%    {opacity:0.0;}
5.5%  {opacity:1.0;animation-timing-function:lenear-in;}
33.3% {opacity:1.0;}
38.9% {opacity:0.0;animation-timing-function:lenear-out;}
100%  {opacity:0.0;}
}
@-webkit-keyframes css3ss_ani_4_1 {
0%    {opacity:1.0;animation-timing-function:lenear-in;}
20.8% {opacity:1.0;}
25.0% {opacity:0.0;animation-timing-function:lenear-out;}
95.8% {opacity:0.0;}
100%  {opacity:1.0;}
}
@-webkit-keyframes css3ss_ani_4 {
0%    {opacity:0.0;}
4.2%  {opacity:1.0;animation-timing-function:lenear-in;}
25.0% {opacity:1.0;}
29.2% {opacity:0.0;animation-timing-function:lenear-out;}
100%  {opacity:0.0;}
}
@-webkit-keyframes css3ss_ani_5_1 {
0%    {opacity:1.0;animation-timing-function:lenear-in;}
16.7% {opacity:1.0;}
20.0% {opacity:0.0;animation-timing-function:lenear-out;}
96.7% {opacity:0.0;}
100%  {opacity:1.0;}
}
@-webkit-keyframes css3ss_ani_5 {
0%    {opacity:0.0;}
3.3%  {opacity:1.0;animation-timing-function:lenear-in;}
20.0% {opacity:1.0;}
23.3% {opacity:0.0;animation-timing-function:lenear-out;}
100%  {opacity:0.0;}
}

CSSの内容については説明すると非常に長く難解になるので敢えて詳しくは説明しませんが、CSS3のアニメーション機能を使っていますので、興味のある方はどんなことをしているのか調べてみて下さい。

 

フリースペースにスライドショーを準備

 

次に、フリースペース(またはフリープラグイン)に、スライドショー本体のコードを記述していきます。

例えば、画像が3枚の場合、コードは以下のようになります。

<div class="css3ss css3ss_3" style="left:0px;top:-300px;">
<a href="クリック時の移動先URL/">
<img src="1枚目の画像のURL" />
<img src="2枚目の画像のURL" />
<img src="3枚目の画像のURL" />
</a>
</div>

赤文字の「3」の部分には、使用する画像の枚数(2~5)を記述します。

「left」の値(0)と「top」の値(-300)は、スライドショーを表示する位置が、「left」を小さくすると左へ「top」を小さくすると右へ移動しますので、適切な値に調整して下さい。

クリック時の移動先URLには、スライドをクリックした際にジャンプする先のURLを記述します(通常、ブログのトップページだと思いますが)。

あとは、使用する画像のURLを取得して、スライドの数だけimgタグを記述すればOKです。

 

なお、大変申しわけありませんが、こちらの方法は質問されても回答できません(大仕事になるので)。

あらかじめご了承ください。

以上、CSSヘッダーにスライドショーを表示する方法をご紹介しました。

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