この記事では、Hirameki 7のWebサイト機能ではパーツとして存在していないコンテンツを追加してご利用されているケースについて紹介しています。今回は、Webサイトのメインビジュアルで目を引くスライドショーを追加するケースを紹介します。
１．HTMLパーツを追加する。
２．HTIMLパーツに追加するコードを用意する
３．スライドショーに使う画像をアップロードする
４．コードを編集する
１．HTMLパーツを追加する
Hirameki 7のWebサイトにはWebサイトに必要なパーツがあらかじめ用意されています。用意されているシングルパーツでも十分なWebサイトを構成できますが、動きのあるコンテンツや独自のコンテンツを追加したい場合には、HTMLパーツを使います。
HTMLパーツでは、その名前が示す通りHTMLコードだけでなく、CSS、Javascriptなどのコードも追加が可能です。外部のWebウィジェットなどを追加する際にもご利用いただけます。
２．HTIMLパーツに追加するコードを用意する
今回は、スライドショーの追加ということですので、以下にサンプルコードを載せておきます。
<style>
.slideshow {
width: 100%;
max-width: 800px; /* 任意の最大幅を設定 */
margin: 0 auto; /* 中央に配置 */
overflow: hidden;
position: relative;
}
/* スライド全体のスタイル */
.slides {
display: flex;
width: 500%; /* 5枚のスライドの幅 */
animation: slide 15s infinite; /* 全体の秒数 */
}
/* 各スライドのスタイル */
.slide {
width: 100%;
flex: 1 0 100%;
}
/* 画像のスタイル */
.slide img {
width: 100%;
height: 400px; /* 統一したい高さを設定 */
object-fit: cover; /* 画像のアスペクト比を保ちつつ、指定サイズにフィット */
display: block;
}
/* スライドショーのアニメーション */
@keyframes slide {
0% {
transform: translateX(0%);
}
20% {
transform: translateX(0%);
}
25% {
transform: translateX(-100%);
}
45% {
transform: translateX(-100%);
}
50% {
transform: translateX(-200%);
}
70% {
transform: translateX(-200%);
}
75% {
transform: translateX(-300%);
}
95% {
transform: translateX(-300%);
}
100% {
transform: translateX(-400%);
}
}
/* レスポンシブデザイン */
@media (max-width: 800px) {
.slide img {
height: 300px; /* 画面幅800px以下の場合の高さ */
}
}
@media (max-width: 600px) {
.slide img {
height: 200px; /* 画面幅600px以下の場合の高さ */
}
}
@media (max-width: 400px) {
.slide img {
height: 150px; /* 画面幅400px以下の場合の高さ */
}
}
</style>
<div class="slideshow">
<div class="slides">
<div class="slide"><img src="ここに画像のURL" alt="Image 1"></div>
<div class="slide"><img src="ここに画像のURL" alt="Image 2"></div>
<div class="slide"><img src="ここに画像のURL" alt="Image 3"></div>
<div class="slide"><img src="ここに画像のURL" alt="Image 4"></div>
<div class="slide"><img src="ここに画像のURL" alt="Image 5"></div>
</div>
</div>
このサンプルコードでは、５枚の画像を３秒ずつ表示し、合計１５秒で画像をスライドさせるスライドショーのコードです。画像のURLや画像のサイズは適宜変更してください。
※誠に恐れ入りますが、Hirameki 7サポートチームではHTML、CSS、Javascriptなどのコードについてのお問い合わせはサポート外とさせていただいております。お問い合わせいただきましても回答できない場合がございますのでご了承ください。
３．スライドショーに使う画像をアップロードする
画像をアップロードするのには、画像パーツを使います。
通常通り、画像をアップロードしそのURLを保存します。追加した画像の上で右クリックし「画像のアドレスをコピー」を選択します。コピーしたURLはメモ帳などに貼り付けておきます。スライドショーで使う画像すべてをアップロードし、全ての画像のURLを取得します。
スライドショーで使う画像をアップロードし、そのURLを取得したら追加した画像パーツを削除します。Hirameki 7のWebサイト機能では、一度画像パーツでアップロードされた画像は、機能の中で保存され画像パーツ内で「画像を選択」タブより呼び出すことができます。この機能を使い、スライドショーで使う画像をページ内に配置せずに、スライドショーだけで表示させることができます。
４．コードを編集する
画像のURLを取得できたら、さっきのサンプルコードの画像のURLに置き換えます。
<div class="slide"><img src="ここに画像のURL" alt="Image 1"></div>
赤字の部分に画像のURLを貼り付けて完了です。
下の画像のようなスライドショーが追加できます。