先日俺が読んだSS様に、僭越ながらヘッダ画像切り替えの方法をご紹介したところ、早速採用して下さり、記事にも取り上げて下さいました。
その記事に御成約?御礼のコメントをしましたら、管理人まそ様からこんなコメ返が。
教えていただき本当にありがとうございました(´・∀・`)
せっかく教えていただいたのに反映するのが遅くなって申し訳ありません。
さすがにトップに簡単に戻れるようにしないと読む人大変かなと判断し、こういう形にしてみました。
いえいえ、ウチのような殺風景なブログにそっと色を添えてくれる一輪の花、その通りかもしれませんよ!(笑)
さすがにトップに簡単に戻れるようにしないと読む人大変かな
さすがにトップに簡単に戻れるようにしないと読む人大変かな
さすがにトップに簡単に戻れるようにしないと読む人大変かな

Hey man, トップページリンクあぽーんするとかあり得ねえだろ!(´・∀・`)



という声が聞こえた気がした…(被害妄想)

ブログのヘッダ画像にはトップページへのリンクという大事な機能があり、今回NSが紹介したやり方だと画像切り替えのためにそれができなくなってしまうわけです。
その辺のことをちょっと軽く考えていて、申しわけなかった…と反省し、自動で画像が切り替わる(つまり、リンクが使える)方法をまとめてみることにしました。
まそ様、すみまそんでした!(反省してない)


以下の画像五枚を使って、お見せしよう。

怒濤のヘッダークリエイターjyushisirin様より授かりし逸品。
スピンオフした一萬アイコンも大活躍中です。
記事に使った阿知賀編アニメのすこやん設定画から。
斜めってるのは効果とかではなく、単にこの角度で撮ってあっただけ
これもやっつけですみません!
善野さん小6バージョンッヌ!
我が心の故郷、石岡市高浜の絶景
ここにすこやんを感じる…///
もはや絵の要素なし。
半透明処理をしたやつと、2パターンを使います。

スライドショーを作ってみた

作ってみたというか(笑)
とても分かりやすかったので、ひな形をこちら様から例によってパクリお借りしました。
【スライドイン・アウト型スライドショー | css だけで作る フォトギャラリー・スライドショー】
スライドショー専門のサイトということで、いろいろ目移りしたのですが、キミに決めた!
のがこちら。

スタンダード

この動きはどこかで…あっ(普通の察し
咲-Saki-まとめアンテナ様のヘッダーがこんな感じですね。
あちらは更に画像を選択するぽちボタンつきの優れものですが。
あのページを古いIEで開くと、画像のスライドはせず、パッと切り替わります。
ということは、CSS3で作られたものと推測されます。
今回ご紹介するコードも、JavaScript成分はナッシングで、CSSしか使っておりません。

では基本となるHTML/CSSスタイルシートの記述を御覧下さい。
まずはHTMLから。
<div class="stage">
  <div id="frame">
    <div><img src="画像1のURL" width="100%" /></div>
    <div><img src="画像2のURL" width="100%" /></div>
    <div><img src="画像3のURL" width="100%" /></div>
    <div><img src="画像4のURL" width="100%" /></div>
    <div><img src="画像5のURL" width="100%" /></div>
  </div>
</div>
わりとすっきりしていますね。
div が三層続き、三層目の div は五つあり、それぞれが img要素を包んでいる、という構造です。
第一層の div は stage というクラスに属し、第二層には frame という名前があり、第三層の div にはそうした設定はありません。
外側の div にも、三層目の div に個別にリンクを貼ることもできます。
また、img要素の widthプロパティにはすべて"100%"という値を指定しています。
これは画像サイズによらず、領域ぴったりに表示するためです。
ただ、標準より縦長の場合は下が見切れ、横長の場合は背景が見えてしまいますが…

ではその stage、frame、及び名無しの div を使って、どのように画像をスライドさせているか、スタイルシートを見ながら説明…できるかな…
div.stage {
    width: 570px; height: 190px;
    margin: 1em auto;
    background: Transparent;
    box-shadow: 3px 3px 3px RosyBrown;
}
上は基本領域の設定。幅と高さ、外側の余白、及び透明背景と影を指定しています。
余白は上下が1文字分(1em)。
左右にautoを設定すると、領域が中央になるように勝手に計算してくれます。
影はデザイン上不要なら削除。ここでは弊ブログのテーマ色 RosyBrown を指定しています。
本記事では複数箇所に表示するために div.stage とクラス指定していますが、必要がなければ div#stage と ID指定する方がいいです。
複数指定できるクラスだと、ブラウザがページ内を最後まで検索して、その分時間がかかるので。
div#frame {
    width: 570px; height: 190px;
    position: relative;
    overflow: hidden;
    background: url(背景画像のURL) repeat;
    border-radius: 0.5em;
}
次に frameという名前をつけたdiv要素。
これが画像を表示する枠になります。
ここの overflow: hidden;はとても大事な指定で、これがないと引っ込めたい画像が隠れなくなります。
背景は、透過しない普通の画像しか使わない場合は、特に指定しなくてもいいです。
上の div.stage は拡張用に親要素にしていますが、取り敢えずこの子要素も結果的に全く同じ領域です。
border-radius はカドを丸くする指定。おされアピールです。
#frame div {
    width: 570px; height: 190px;
    position: absolute;
    float: left;
    left: 100%;
    animation: imgtrans 30s infinite;  /* 全部で30秒 */
}
#frame div:nth-child(1) { animation-delay: 0s; }
#frame div:nth-child(2) { animation-delay: 6s; }
#frame div:nth-child(3) { animation-delay: 12s; }
#frame div:nth-child(4) { animation-delay: 18s; }
#frame div:nth-child(5) { animation-delay: 24s; }
/*   ↑ 一枚当たり6秒のタイムラグで動き始める指定    */
}
この #frame の内側に、画像を載せる div 要素を定義します。
21行目は何もしていないので書かなくても同じですが、後で説明する改変版で必要になるので、残しておきます(伏線)。
因みに、frame に画像しか乗せないのであれば、ここは
#frame img {
/*  (略)  */
#frame img:nth-child(1) { animation-delay: 0s; }
/*(以下略)*/
と書いても問題なく動作しますが、やはり拡張を考慮して img要素よりも自由度の高い div要素で括っておきます。
画像をスライドしているのではなく、領域をスライドしている、と考えれば、そこにテキストやらを含めたBOXをデザインできますからね。
なお、オリジナルでは
div#photo1 { animation-delay: 0s; }
/*(以下略)*/
のようにここの div要素を ID指定してありましたが、先の記事で学んだ :nth-child() を使ってみました。
隣り合う兄弟要素なので、この書き方の方がブラウザには解釈しやすそうですし。

通常、HTMLでは子要素は親要素から出ることはありません。
そのマークアップ構造と同じく、視覚的にも入れ子になります。
しかし、positionプロパティで 親に relative、子に absolute を指定すると、これがヒモになって、子要素を自由に動かせます。
ヒモというのは親に対する絶対座標。上の div の中にある left: 100%; の部分です。
leftプロパティは、「左から、指定した分ずれる」という意味です。px、em、%などの単位で指定できます(数値が大きいほど左から遠ざかる=右へ行くので、感覚的には逆なんじゃ…と不評なプロパティ名なのですよー)。
%は親要素(の横幅)に対する比率ですが、この div は親である div#frame と同じ大きさなので、100%を指定すると、親の領域からぴったり外れることになります。
下で定義している imgtrans というアニメーションは、その left の値を変化させているのです。
@keyframes imgtrans1 {
    0% { left:100%; }    /*    0.0秒    */
    5% { left:0%; }      /*    1.5秒    */
    20% { left:0%; }     /*    6.0秒    */
    25% { left:-100%; }  /*    7.5秒    */
    100% { left:-100%; } /*   30.0秒    */
}
左側の 0% 5% 20%…はアニメのタイムスケジュールで、left の%とは関係ありません。
秒数に換算した値を、右側のコメントにしてあります。
上でやっているのは要するに
  1. 初めの1.5秒間:左から100%の位置(frame の右外)→frame の中心へ移動
  2. 次の4.5秒間:そのまま静止
  3. 次の1.5秒間:frame の中心→左から-100%の位置(frame の左外)へ移動
  4. 次の22.5秒間:そのまま frame外で待機
3.の開始時点で6秒経過しているので、上で設定した animation-delay に従い、次に控えた div:nth-child(next) が1.の動作を開始します。
こうして五枚の画像が、30秒かけて一回りするわけです。
同じタイミングで十枚に増やすなら、一枚当たり6秒×10で、#frame div 内の animation プロパティの秒数の部分を60s とし、nth-child(10)まで6秒の時間差をつけながら増設、keyframes のタイミング設定は時間の縮尺を考慮して5%→2.5%、20%→10%、25%→12.5%などとします。
減らす場合も同様に。
全体としての辻褄が合えばいいので、再生スピードなども含めて、自由に調整できます。

以上を基本仕様に、スタイルシートだけを書き変えて、違う動きにしてみたいと思います。

リバース!

最初の例が右→左なのに対し、こちらは左→右。それだけ…? それだけです
@keyframes imgtrans2 {
    0% { left:-100%; }
    5% { left:0%; } 
    20% { left:0%; } 
    25% { left:100%; }
    100% { left:100%; }
}
このように、left の値の符号を逆にするだけ。
ちょーかんたんだよー
初めは left の所を right にすりゃいんじゃね?と思ったんですが、何箇所も書き換えるの面倒だなーとグズグズしてるうちにこっちを思いつきました。
なお、上の #frame div 内の left の初期値 100%はそのままでもいいです。どうせ見えてないんで。
でも初期値と0秒時点の値が違ってるのはきもちわるい…!という人(例:某NS)は、-100%に合わせてもいいです。意味無いんですけどね。

重なっていく

@keyframes imgtrans3 {
    0% { left:-100%; }
    5% { left:0%; } 
    25% { left:0%; } 
    30% { left:100%; }
    100% { left:100%; }
}
新しい画像がフレームに完全に収まって停止した25%のタイミングを待って古い画像が退場するので、上に重なっていくように見える、というパターンです。
でも、これはね…
五枚目から一枚目に戻るところが、ちょっとイケてないんですよねえ…五枚目を半透明な画像にした下のと見比べると、問題点が分かると思いますが、つまりこの五枚の画像には上下の位置関係があって、一番下である一枚目を、一番上である五枚目の「上に重ねる」のは無理、ってことなんです。
デコに油性でも、こればかりは上重ムリなんですわ。何言ってんの

めくれていく

これは keyframe は「重なっていく」のと同じですが、順番が逆になるのでここを書き変えます。
animation-delay より :nth-child の()の中を書き変える方が早いので、こう書き直しました。
#frame div:nth-child(5) { animation-delay: 0s; }
#frame div:nth-child(4) { animation-delay: 6s; }
#frame div:nth-child(3) { animation-delay: 12s; }
#frame div:nth-child(2) { animation-delay: 18s; }
#frame div:nth-child(1) { animation-delay: 24s; }
1
2
3
4
5
これも「重なっていく」と同様、五枚目から一枚目への切り替えのところがダメだね。
画像を重ねると、HTML記述順由来の上下関係がごまかせないので…
てことは、重ならないように動かせばまあ見られるのでは?
ということで

敢えて背景を見せる

    animation: imgtrans 30s infinite linear;
ここでは、animationプロパティに linear という値を追加しています。正確には追加ではなく、初期値である ease をこれに変えたということです。
animation の子属性、animation-timing-function の略記法です。
linear は等速の動き、ease は滑らかな緩急ある動きです。
下の keyframes の方でやや細かめに指定しているため、ease だとちょっとクド過ぎたので、linear にしてみました。
@keyframes imgtrans5 {
    0% { left:100%; }
    4% { left:20%; } 
    5% { left:0%; } 
    15% { left:0%; } 
    25% { left:-100%; }
    100% { left:-100%; }
}
ちょっとセンスが無いのでアホみたいな動きではありますが、重ならなければまあ五枚目→一枚目の繫ぎの問題は考えずに済みます。
うーん、やっぱりオリジナルが一番ですね…

そこで JavaScript

CSS3よりも JavaScript の方がいいです。
CSS3はデザインには向いてるし便利だけど、動きをつけようとするとなんか裏技みたいのをひねくり出して「その手があったか!」をやらないとやりたいことができないというイメージというかトラウマを植えつけられました。
その点 JavaScript(jQuery) は愚直にシコシコやってればなんとかなる、という印象。
JavaScript で作ったやつも紹介する予定でしたが、ちょっと長くなって来たのでこの次にします。