【はてなブログ】画像のスライドショー（自動切替のスライダー）設定方法

はてなブログ スライドショーの実装、設定方法

こんにちは、シンプルライフナビです。

はてなブログで、画像の自動切替のスライドショー（スライダー、またはカルーセルとも言われる）を表示するにはどうしたらいいでしょうか？

画像（写真）が順番に自動で切り替え表示（自動再生）されると、かっこいいですし、ブログがオシャレに見えますよね。

「簡単に画像を自動表示できる方法がないかな？」ということで、スライドショー（画像スライダー）を表示できるコードを作って実装してみました。

• 画像をブログ上で自動切り替えして表示（再生）したい。
• 画像を流れるように表示し、エンドレスで表示したい。
• できるだけ手間をかけずに、簡単に利用したい。
• 画像は後からいつでも変更できるようにしておきい。
• コピペできるコードがあるといいんだけど…

そんな願いに、この記事で紹介する「スライドショー」は対応しています。

利用イメージはこちら👇

スライドショー付きのブログトップ画面（PC画面）

このブログでの実装事例の場合、ブログのヘッダー内で「おすすめ記事のカード」が自動で順番に表示されます！

スライドショー（画像の自動切替）のHTMLコードを公開しますので、利用してみたい人はどうぞ。（個人利用のコピペはOKですが、ブログ等で紹介の場合は本記事からの引用である旨の表示をお願いします。）

• 簡易版なので表示パターンは決まっていますが、PCとスマホの画面に合わせたレスポンシブ対応済みですので、実用的に利用できると思います。
• 2023年7月現在、このブログに「スライドショー」を実装中です。利用イメージの参考にしてください。なお、いずれ別のものに変えたり、もしくは改良して表示内容が変わる可能性がありますのでご了承ください。

注意点もあるので、記事は最後までご覧ください。それでは確認していきましょう。

はてなブログにスライドショーを実装、設定した時の画面イメージと利用条件

はてなブログで、「スライドショー」（「スライダー」、または「カルーセル」）を簡単に設定する方法をご紹介します。

まず「スライドショー」設置後の画面イメージから。

ブログのトップページのスライドショー設置変更前後の様子

スマホ画面例　左：変更前トップ、右：変更後トップ

自動的に画像が切り替わって表示される「スライドショー（スライドバー）」をこのブログに取り入れて設定しました。（左のほうも結構気に入っていてかなり長期間使っていましたが、久しぶりにトップページを変えてみました。）

変更前の「人気記事」の画像カードより一覧性は落ちますが、そもそもあまりクリックされていなかったので、効果検証をしながらしばらく様子見です。

項目	変更前	変更後
表示イメージ	上の図のとおり、ブログのイメージ写真の下に、読んでもらいたい４つの記事を並べて表示	上の図の右側の画像のように、イメージ写真があった部分に複数の記事を紹介できるスライドショーを設定
画像の動き	動かず、画面上に固定 4枚のみ表示（PCは横並び４つ、スマホは２×２表示）	自動的に画像が切り替わる 表示画像は無限に増やせる（最低４つ〜無限大設定可）

スライドショーは、約5秒ごとに次の画像を連続して表示し、最後の画像まで表示が終わると、最初の画像に戻ります。

実際に動いている見本として、このブログのトップページを参考にしてください。（そのうち気まぐれで変更するかもしれませんが。）

スライドショーの設置、利用の条件

今回作ったスライドショーのコードは、JavaScriptを利用しています。ですが、汎用的なスクリプトのみ利用しているので、難しいことを考える必要はありません。

• 原則としてコードのコピペだけで利用できると思います。
• JavaScriptについて難しいことを考える必要はありません。
• 記事で紹介する基本設定をご自分のブログに合わせて変更すれば使えます。

ただし、はてなブログの無料版でも動きますが「はてなブログProでの利用を条件」とします。

ということで利用条件は下記の通り。

• はてなブログProユーザー
• JavaScriptを使えるよう設定
• コードのコピペ時は、1文字でも異なると動かないので注意
• コピペしたコードの一部を、この記事を参考にして自分の画像などに変更する

余談ですが、はてなブログをカスタマイズする場合、はてなブログProをお勧めします。

はてなブログProは有料ですが、月間PVが3,000~5,000あり、Googleアドセンスに合格済みなら、はてなブログProの費用はブログからの収益で賄えると思います。

月間PVが3,000未満でも、収益化を目指すなら早めに「はてなブログPro」に移行しておきましょう。

これからブログを利用して収益を得たい、WEBデザインやWEBライティングを向上させたいと考えているなら「はてなブログPro」の利用をお勧めします。

＼ ブログをカスタマイズしたい人が選ぶ ／
初心者でも収益化！はてなブログPro

リンク

あわせて読みたい

• 「はてなブログPro」を利用した方が良い理由  
• 【はてなブログの始め方】初めての開設手順や注意点  

スライドショーのHTMLコードの紹介と可変部分の解説

解説を読んで設定するだけで使える！

この記事でご紹介している「はてなブログにスライドショーを設定する」ためのHTMLコードの概要は下記の通り。

• すぐに試せるよう、HTMLのコードだけにまとめてあります。
• デザインCSS欄へのコピペは不要です。（デザインCSSの変更は必要ありません。）
• HTMLのコードをコピペして、少し色味を変えるなどの加工をすれば、すぐに利用できると思います。
• コードのご利用は自己責任でお願いします。ご自分でCSSも変更する場合は、事前にはてなブログ｜デザインCSSの情報を消去や削除する前にバックアップ！  を実施してから利用してください。
• 内容に関するご照会には対応しておりませんのでご了承ください。

スライドショー（スライダー）のHTMLの設置場所と作業手順の流れ

スライドショーのHTMLの設定方法（手順）は次のとおりです。

1.  ダッシュボード画面 →  デザイン →  カスタマイズ → ヘッダ→ブログタイトル下 にすすみ、HTMLを編集します。
   

   

   ブログタイトル下のHTML編集画面

2. この際、既存のHTMLをコピーして、バックアップ用に保存してください。
3. バックアップ取得後、既存のコードを消さないように注意して、スライドショーのHTMLコードを追記（保存）してください。
4. 既存のコードの一番下に追記した場合は、表示画像を設定後、ブログタイトル部分の一番下に表示されます。
5. 表示の位置や順番は、既存のコードとの順番により決まります。（上にあるコードの方が上に表示されます。グローバルナビのコードの上ならグローバルナビの上、下ならその下など。）
6. 最初に一番下に追記して試したあと、表示位置などは自分で調整してください。

作業手順はわかりましたか？なお、スライドショーが不要になったら本記事のコードを削除すればOKです。

それでは具体的なコードの説明と設定をしていきます。

HTMLコードの内容と設定部分の説明

スライドショーのHTMLコードは下記の通りです。

色がついている部分は、後の説明に沿ってご自身で設定が必要になる部分です。

（イメージしやすいよう、サンプル画像をCanvaから商用フリーの画像を利用して作成しています。（水色部分が画像アドレス。サンプル画像の表示確認後、画像を変更してください。））

<style>
/* スライドショーのスタイル */
.slideshow-container {
max-width: 1000px; /* 最大画面表示幅*/
position: relative;
margin: auto;
overflow: hidden;
background-color: black ;
padding:0px;
}
.slideshow-container img{
width:99%;
height:auto;
vertical-align: top;/*画像の隙間を消す*/
border: 1px solid black ;
}
.slide-wrapper {
text-align: center;
display: flex;
transition: transform 1s;
}
.slide {
flex: 0 0 50%;
}
@media(min-width:768px){
.slide {
flex: 0 0 25%;
}
}
.slider {
width: 100%;
height: 3px;
background-color: black ;
position: relative;
}

.progress {
height: 100%;
background-color: green ;
position: absolute;
top: 0;
left: 0;
width: 0;
}
</style>
<div class="slideshow-container"><!-- 画像スライド -->
<div class="slide-wrapper">
<div class="slide"><a href="リンク先1"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/simplelifenavigation/20230730/20230730174343.jpg"></a></div>
<div class="slide"><a href="リンク先2"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/simplelifenavigation/20230730/20230730174349.jpg"></a></div>
<div class="slide"><a href="リンク先3"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/simplelifenavigation/20230730/20230730174400.jpg"></a></div>
<div class="slide"><a href="リンク先4"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/simplelifenavigation/20230730/20230730174404.jpg"></a></div>
<div class="slide"><a href="リンク先5"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/simplelifenavigation/20230730/20230730174410.jpg"></a></div>
</div>
<div class="slider"><div class="progress"> </div></div>
</div>

<script>
// JavaScriptで横スライドショーを制御
let slideIndex = 0;
showSlides();

function showSlides() {
let slides = document.getElementsByClassName("slide");
let progress = document.querySelector(".progress");
let slideWidth = window.innerWidth < 768 ? 50 : 25;
slideIndex++;
if(window.innerWidth < 768){
if (slideIndex >= slides.length-1) {
slideIndex = 0;}
document.querySelector(".slide-wrapper").style.transform = `translateX(-${slideIndex * 50}%)`;
progress.style.width = `${(slideIndex + 1) * (100 / (slides.length-1))}%`;
setTimeout(showSlides, 5000); // 5秒ごとに切り替え
} else {
if (slideIndex >= slides.length-3) {
slideIndex = 0;}
document.querySelector(".slide-wrapper").style.transform = `translateX(-${slideIndex * 25}%)`;
progress.style.width = `${(slideIndex + 1) * (100 / (slides.length-3))}%`;
setTimeout(showSlides, 5000); // 5秒ごとに切り替え
}
}
</script>

なお、過去に自分のブログにJavaScriptを設定したことがない人（設定したかどうか忘れた人や上記のコピペだけで動かなかった人）は、次のコードを上記コードの上部に追記してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

HTMLコードの可変部分の説明、解説

コードの可変部分は下表にまとめていますので、確認して自分のブログのデザインに合うよう、色などを変更してください。

なお、用意する画像は大きさ等に制限はありませんが、縦と横の比率が同じ画像を用意してください。（「３：２」と「１：１」など、縦横比が異なるものを混在させないように。）

可変項目	内容	備考・注意点
画像 （水色部分）	スライドショーで表示する画像のURLを設定してください。（画像URLが間違っていると表示されません）	画像は最低４つ必要ですが、上限はありません。表示画像を増やす場合は、<div class="slide">（略）</div>の部分の数を増やしてください。
画像のリンク先 （橙色部分）	画像をクリックしたときに表示するページを指定できます。	リンクが不要なら、<a href="リンク先">と</a>を削除してください。
背景色や境界色など （赤字部分）	コードの赤字の部分の色を変更できます。 変更対象は、背景色、境界色、バーの色です。 （赤色にするなら「red」か、色コードの「#ff0000」に変更）	境界線が不要の場合は、border:1pxを0pxに変更してください。 色コードを調べるのは、こちらが便利。 👉WEB色見本 原色大辞典
自動表示間隔 （紫色部分）	スライドショーの自動表示の切り替えタイミングを指定できます。	5秒なら5000、3秒なら3000にしてください。
スライドバー （緑色部分）	スライドショーが全体のどこまで表示されているのかの参考に「バー」を表示します。	バーの表示が不要なら、緑色部分は削除してください。

上記の設定だけで、スライドショーを設置できます。

PCだと次のようなスライドショーが表示されるはず。（スマホの場合は2画面表示）

スライドショーのサンプルイメージ

コードをコピペしてから調整していけばOKですよ。

このスライドショーでは、写真ブログの他、雑記ブログでも読んで欲しい内容のカードを作って、順次スライドショー形式で表示させることができます。

このブログでの実装例は、横640×縦180pxの画像で揃えています。Canva  で作れば簡単に作成できます。

あわせて読みたい

• Canvaの使い方｜初心者も画像加工が簡単  
• アイキャッチの画像や素材をAIで生成するコツ  

画像アドレス（画像のURL）の確認の方法

はてなブログユーザー初心者で、画像アドレス（画像のURL）の確認方法がわからない人がいるかもしれないので、「画像アドレス」の確認方法を簡記します。

画像アドレスの確認手順は下記の通りです。

1. はてなフォトライフを開く。
2. フォルダから、画像を選ぶ。
3. 画像をクリックする。
4. 画像の上で右クリックして、画像アドレス（画像URL）を確認。

上記の１〜３ははてなフォトライフの使い方  を参照してください。

画像を選択したら右クリックして「画像アドレスをコピー」します。

画像アドレスをコピーしたものを使う

画像アドレスの形式は次のようになっています。
「https://cdn-ak.f.st-hatena.com/images/fotolife/s/あなたのID/画像の番号.jpg」

そして、確認した画像アドレスを使い、コードの　<img src="画像アドレスの部分"> を <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/あなたのID/画像の番号.jpg"> に変更すればOK。

簡単でしょ？

はてなブログにスライドショーを設定する方法のまとめ

はてなブログの収益化設定も忘れずに！

はてなブログに「スライドショー」（「スライダー」または「カルーセル」とも言う）を設定する方法、いかがだったでしょうか。

用意する画像はできるだけ同じ雰囲気のものを選んだ方が統一感が出ると思います。上でご紹介したように「Canva」を使って作ってみるといいですよ。

最後に注意点を２つ。

• HTMLコードの変更（追加）前に必ずバックアップをとってください。
• この記事のコードは１つのブログに１箇所の設定としてください。（複数箇所に設定すると競合してうまく表示できません）

ブログは文章を読んでもらえるのも嬉しいですが、自分でブログのデザインを色々変更できるのも魅力の一つです。

＼ ブログをカスタマイズしたい人が選ぶ ／
初心者でも収益化！はてなブログPro

はてなブログは、適切なSEO対策と、収益化の設定をしておくことで、ブログの運営費用をブログの収益で稼ぐことができます。

デザインの見直しの際には、上の記事の収益化の設定のチェックもしてみてください。

この記事が役に立ったと思ったら、ぜひ「読者登録」や「B!ブックマーク」をしてください。

次の記事も、ブログのカスタマイズや運営の参考にしてくださいね☺️