こんにちは、パソコンワンポイントレッスン！PCインストラクターの川上です。
※注意！
2017年からは、こちらの記事は使えなくなっております。
記事下の＜追記＞をご覧くださいませ。
または、こちらの最新記事を→『あなたのヘッダー画像のスライドショーは大丈夫ですか？』
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
今日は、アメブロのカスタマイズをしている方用の記事になります。
「このアメブロのヘッダー画像をスライドショーにしたいのですが」
といったご質問です。
まずヘッダー画像は3枚事前に作っておきます。
文字と写真が混在していますので、PNGで作成します。
なぜ、JPEGでなくPNGがよいかは こちらの過去記事 をご覧ください。
（サイズは980px×400pxで作成しました。）
head1.png
head2.png
head3.png
要は、この3枚を順番に動かしているだけなのです。
左側白枠の中の斜めの写真だけが違っているだけですよね。
今回はjavascript（ジャバスクリプト）で作成していきます。
１．画像のアップロード
［マイページ］－［デザインの変更］－CSS編集用デザイン［CSSの編集］で、
（［CSSの編集］が見つからない方は、こちらの『「CSSの編集」をクリックするとは』をご参照ください。）
画像を3枚アップロードします。
２．フリースペース編集にHTMLを追加
［マイページ］－［フリースペース編集］を選択して、「フリースペース編集」画面を表示します。
次のHTMLを入力（または、↓をコピペ）します。
（ただし、画像の幅のpx数に変更してください）
<div id="slideshow"><img src="1つ目の画像のURL"><img src="2つ目の画像のURL" class="alt"><img src="3つ目の画像のURL" class="alt"></div>
注意！
変なところで、余計な改行がされないようにご注意ください。
HTMLタグ部分を「1行」にするとよいです。
（折り返しと改行は異なります）
［保存］ボタンをクリックします。
３．フリープラグインにjavascriptを入力
［マイページ］－［プラグインの追加］－［フリープラグイン］を選択して、「フリープラグイン」画面を表示します。
次のjavascriptを入力（または、↓をコピペ）します。
<!-- スライドショーの実行 -->
<script type="text/javascript">
$(function(){
var interval = 3000;
$('#slideshow').each(function(){
var container = $(this);
function switchImg(){
var imgs = container.find('img');
var first = imgs.eq(0);
var second = imgs.eq(1);
first.fadeOut().appendTo(container);
second.fadeIn();
}
setInterval(switchImg, interval);
});
});
</script>
<!-- スライドショーをヘッダー位置に-->
<script type="text/javascript">
$(document).ready(function(){$("#slideshow").appendTo(".skinHeaderArea");})
</script>
コイツ（↑）が画像を動かしている正体です！
そして、スライドショーの画像をヘッダー位置に設定している正体です！
（ただし、これだけで459文字も使ってしまいますので、外部化されるとよいです。プラグインの外部化はこちらの記事をご覧ください。）
注意！ フリープラグインに「＄」が入ったスクリプトを入れる場合は、
jQueryの指定を入れるのをお忘れなく！
詳しくは、わざめーばさんの
フリープラグインの先頭ではjQueryを使えるようにしておく
をご覧ください。
なお、var interval = 3000;
の3000は
スライドが移り変わる間隔の数字で、単位がミリ秒になります。
3000ミリ秒＝3秒
のことです。
ですので、間隔を少し縮めたい方は、3000を2000（2秒）に変えるなど、してみてください。
［保存］ボタンをクリックします。
４．プラグインの配置
［マイページ］－［配置設定］をクリックして、
［フリープラグイン］をドラッグして配置します。
［保存］ボタンをクリックします。
５．CSSの追加
［マイページ］－［デザインの変更］－CSS編集用デザイン［CSSの編集］で、「現在使用中のブログデザインCSS編集」画面を表示します。
CSSの最後に、次のCSSを入力（または、↓をコピペ）します。
（ただし、画像の幅と高さのpx数に変更してください）
/* ■ スライドショー用 ヘッダーエリア ■ */
.skinBlogHeadingGroupArea {
padding:0px;
height:0px;
text-indent: -9999px;
}
.skinHeaderArea {
height:400px;/* 画像の高さに合わせる */
}
/* ■ スライドショーの設定 ■*/
#slideshow{
width:980px;
height:400px;/* 画像の高さに合わせる */
position:relative;
}
/* img要素は絶対配置で一か所に重ねる */
#slideshow img{
position:absolute;
top:0;
left:0;
}
/* 2番目以降のimg要素にclass="alt"を付け、消す */
#slideshow img.alt{
display:none;
}
［保存］ボタンをクリックします。
注意！
このCSSの設定では、タイトルとブログの説明文は表示させないようにしています。
いやいや、タイトルと説明文は表示させたい、という方は、『スライドショーのヘッダー画像上にブログタイトルと説明文を表示させるには』をご覧ください。
CSSソース追加のPoint！
CSSは、下部へ追加していくと、それ以前に書かれている上部のCSSを上書きしていきますので、下部に書かれたCSSが優先されます。ただし、「!important」を記入すると、それが最優先になります。
ただ、気をつけていただきたいのは、
もうすでに既定のデザインを使っている方がCSS編集デザインにすると、今までのデザインがなくなってしまいますので。
ですから、もうすでに、CSS編集でアメブロカスタマイズされている方か、新たにアメブロをカスタマイズされていく方がチャレンジしてみるといいかと思います。
または、
「へぇ～、こんなことできるんだぁ～」
と思うだけにしておいていただければ、と思います＾＾ゞ
＜追記＞
2017年からアメブロは常時SSL化しており、スライドショーが表示されなくなっている方がおります。
これは、フリープラグインで使用できなくなっているためです。
ですので、新しくスライドショーをヘッダー画像に設置されたい方は、CSSでのスライドショー設定をしてくださいませ。
わざめーばさんの記事をご覧いただければ、と思います。
以上、アメブロカスタマイズでした。
LIDS澄川・ライフデザインスクール
川上 雄大