BootstrapにてCarouselコンテンツを作成

Detail: Written by: fuku-chang; Category: Joomla!; Published: 2026-02-01

BootstrapにてCarouselコンテンツを作成し、Home(Top)ページ上部に配置しました。

概要

Joomla! CoreにはBootstrap 5が同梱されています
BootstrapはHTML/CSS/JavaScriptのオープンソース・フレームワークです
そのBootstrapに用意されているCarouselを使用して、当サイトのHome(Top)の先頭コンテンツとして配置します
Carouselとは多くのサイトでページトップに配置される、大きな画像が自動的に又はユーザーによる操作で右から左へスライドするコンテンツです

参照

Carousel | Docs | Bootstrap
J4.x:Using Bootstrap Components in Joomla 4 | Joomla! Documentation
- J4の記事ですが、J6でも問題なく動作しました
- 本稿では、同ページのApproach 3: Using a Template Overrideの手段でCarouselを作成しています

手順

Joomla!にBootstrapによるCarouselコンテンツを配置する手順は次のとおりです

Template Override機能を使用して、mod_customのdefault.phpをOverrideします
- This code searches for class names set in mod_custom and makes the HTMLHelper call to set up the JavaScript support. だそうです
- BootstrapのCarouselを含む各コンポーネントをカスタムモジュールで使用可能とするためのコードと理解しましたが...合ってますでしょうか
CarouselのSite Moduleを作成します
- 本手順の肝です
手順2で作成したSite Moduleを表示するArticleを作成します
- 手順4で作成するMenuにMenu Type: Single Articleを指定し、当該Articleを表示させます
Carouselを表示するMenuを作成 or 編集します
- 本稿では既設のMenue: Homeをカスタマイズするため不要です
  - ただし、実際にはトラブルを避けるため、いったん専用Menuを用意し、Carouselの動作確認をしてから、Homeのカスタマイズを行っています
Carouselの表示に問題ないことを確認をします

mod_customのdefault.phpをOverride

System > Templates > Site Templatesをクリックします
Cassiopeia_extended Details and Filesをクリックします
Create Overrides tab > Modules blk > mod_customをクリックしてOverrideを作成します
Editor tab > /templates/cassiopeia_extended/html/mod_custom/default.phpをクリックします
Override file (editable)テキストエリアにdefault.phpが表示されます
Approach 3: Using a Template Overrideに記載のコードをコピーします
11行目のdefined('_JEXEC') or die;の下にコピーしたコードを貼り付けます
Save & Closeをクリックします

CarouselのSite Moduleを作成

Content > Site Module右の+をクリックします
Customをクリックします
Modules: Customが開きます
Example 3: Carousel | Approach 1: Using a Custom ModuleのCarouselのサンプルコードをコピーします
Google Spread Sheetを使用して、上記でコピーしたコードを編集し、表示するArticleの情報をセル参照で呼び出すようにしました
- プログラミングができる方でしたら、変数の代入で対処するところでしょうが、門外漢のわたくしにはこれが限界です
- Sheet: articleの緑色のタイトル行以下(L9~)にArticleの情報(Article Title, Intro Text, Article URL, Image URL)を入力します
- Sheet: articleの水色のタイトル行下のL2~L6はL9~L13の情報をセル参照しています
  - 新規Articleは緑色のタイトル行下のL9に挿入します
- Sheet: htmlにSheet: articleの水色のタイトル行以下(L2~L6)のArticle情報をセル参照で構成されたCarouselのhtmlコードが表示されます

上記で完成したhtmlコードをコピーして、Module tab > Codeに貼り付けます

<div id="myCarouselCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button class="active" type="button" data-bs-target="#myCarouselCaptions" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarouselCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#myCarouselCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#myCarouselCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#myCarouselCaptions" data-bs-slide-to="4" aria-label="Slide 5"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active"><!-- 01 -->
<a href="https://f-labs.jp/joomla/display-slider-with-page-break-plugin">
<img class="d-block w-100" src="/images/article_images/2026-01-27-21-38-46/2026-01-27-21-38-46_00.png" alt="Page Break PluginでSlider(Accordion)表示">
<div class="carousel-caption carousel-text"><!-- キャプション非表示のclass="d-none d-md-block"を削除 -->
<h5>Page Break PluginでSlider(Accordion)表示</h5>
<p>Joomla! CoreのPage Break Pluginを使用して、Sliderを使用したページを構成します。</p>
</div>
</a>
</div>
<div class="carousel-item"><!-- 02 -->
<a href="https://f-labs.jp/joomla/redirect-to-non-www-urls">
<img class="d-block w-100" src="/images/article_images/2026-01-25-08-49-48/2026-01-25-08-49-48_00.png" alt="WWW URLsをNon-WWW URLsにリダイレクト">
<div class="carousel-caption carousel-text"><!-- キャプション非表示のclass="d-none d-md-block"を削除 -->
<h5>WWW URLsをNon-WWW URLsにリダイレクト</h5>
<p>WWW URLsをNon-WWW URLsにリダイレクトするよう設定しました。</p>
</div>
</a>
</div>
<div class="carousel-item"><!-- 03 -->
<a href="https://f-labs.jp/joomla/301-redirect">
<img class="d-block w-100" src="/images/article_images/2026-01-21-17-20-14/2026-01-21-17-20-14_00.png" alt="301 Redirectを管理する">
<div class="carousel-caption carousel-text"><!-- キャプション非表示のclass="d-none d-md-block"を削除 -->
<h5>301 Redirectを管理する</h5>
<p>Joomla! CoreのRedirect Pluginを使用して、旧URLから新URLへの301 Redirectを管理します。</p>
</div>
</a>
</div>
<div class="carousel-item"><!-- 04 -->
<a href="https://f-labs.jp/joomla/articles-module">
<img class="d-block w-100" src="/images/article_images/2026-01-15-12-54-03/2026-01-15-12-54-03_00.png" alt="Articles ModuleによるHomeページのカスタマイズ">
<div class="carousel-caption carousel-text"><!-- キャプション非表示のclass="d-none d-md-block"を削除 -->
<h5>Articles ModuleによるHomeページのカスタマイズ</h5>
<p>Articles Moduleを使用して当サイトのHome(Top)ページをカスタマイズします。</p>
</div>
</a>
</div>
<div class="carousel-item"><!-- 05 -->
<a href="https://f-labs.jp/joomla/joomla-6-0-2">
<img class="d-block w-100" src="/images/article_images/2026-01-09-08-18-15/2026-01-09-08-18-15_00.png" alt="Joomla! 6.0.2セキュリティ・バグフィックスリリース">
<div class="carousel-caption carousel-text"><!-- キャプション非表示のclass="d-none d-md-block"を削除 -->
<h5>Joomla! 6.0.2セキュリティ・バグフィックスリリース</h5>
<p>2026/01/06付けでJoomla! 6.0.2と5.4.2のセキュリティ・バグフィックスがリリースされました。</p>
</div>
</a>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarouselCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarouselCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>

Tiitleに任意のタイトル(当サイトではArticles by Carousel)を指定します
Title: Hideを指定します
Positionに任意のPosition名(当サイトではarticles-by-carousel)を指定します
- [Site Moduleを表示するArticleの作成手順5]で使用するので指定したPosition名を控えておきます
Menu Assignment tab > Menu Assignment blkへ移動します
Module Assignment: Only on the pages selectedを指定します
Menu Selection: Carouselを配置するMenu(本稿の場合Home)を指定します
- 実際にはトラブルを避けるため、いったん動作確認用のMenu: Articles by Carouselを用意し、動作に問題ないことを確認をしてから、Menu: Homeのカスタマイズを行っています
Advanced > Advanced blkへ移動します
Module Class: bs-carouselを指定します
- これによりmod_customeのOverrideに追記したModule Classを呼び出します
Save & Closeをクリックします

Site Moduleを表示するArticleの作成

Content > Articles右の+をクリックします
Articles: Editが開きます
Title: 任意のタイトルを入力します
Content tab > Codeモードに変更します
Article Textにloadpositionを指定するdiv要素を入力します
```
<div>{loadposition articles-by-carousel}<div>
```
- articles-by-carouselは[CarouselのSite Moduleを作成手順9]で指定したPosition名になります
Save & Closeをクリックします

Carouselを表示するMenuの作成 or 編集

当サイトではCarouselをHome(Top)ページの先頭コンテンツとして表示するため、既設のMenu: Homeを編集します
下記の手順1でMenuを「新規作成」するか「開く」かが異なるだけです

新規作成の場合: Menus > Main Menuの右の+をクリックします

既設のHomeを編集する場合: Menus > Main Menuをクリックし、Menus: Items (Main Menu)からHomeをクリックします
- 以降、既設のHomeを編集する場合を説明します
Details tab > Menu Item Type: 編集前のFeatured Articlesから変更するためSelectをクリックします
Menu Item Type > Articlesをクリックします
Single Articleをクリックします
Select ArticleのSelectをクリックします
[Site Moduleを表示するArticleの作成]の手順で作成したArticles by Carouselをクリックします
Menu: HomeにMenu Type: Single Article - Select Article: Articles by Carouselが指定されました
Option tab > Option blkへ移動します
Title: Use Global (Show)からHideに変更します
Category: Use Global (Show)からHideに変更します
Author: Use Global (Show)からHideに変更します
Publish Date: Use Global (Show)からHideに変更します
- その他、非表示にする詳細項目がある場合はHideに変更します
Page Display tab > Page Display blkへ移動します
Show Page Heading: Use Global (Show)からHideに変更します
Save & Closeをクリックします
WebブラウザでClousel表示に問題ないことを確認します

Carouselのカスタマイズ

モバイルデバイスで縦表示の場合のキャプション表示

BootstrapのHTMLサンプルコードでは、モバイルデバイスで縦表示の場合、キャプションを非表示としています
これは、狭いエリアでの視認性を優先したものと推察されますが、やはり画像だけではArticleの内容が伝わりにくいのでキャプションを表示するように変更します

キャプションの表示

Site Module: Articles by Crouselを編集します

モバイルデバイスで縦表示時にキャプションを非表示としているClassのd-noneとd-md-blockを削除します

<div class="carousel-caption carousel-text d-none d-md-block">
↓
<div class="carousel-caption carousel-text"> <!-- キャプション非表示のclass="d-none d-md-block"を削除 -->

なお、carousel-textは当サイトが、Bootstrapのcarousel-captionと区別するために新設したclassで、次の[キャプションの背景とフォントサイズの修正]でCSSを指定しています

キャプションの背景とフォントサイズの修正

当サイトのIntro Imageは白色・太字の文字を配している場合が多く、Carouselのキャプションの白色文字と重なり、判読性に欠けるため、キャプションに黒色半透明の背景を指定します
HTMLサンプルコードのキャプション表示では、Article Titleにh5要素を指定していますが、当サイトのh5のフォントサイズではモバイルデバイス表示の場合、大きすぎるため、モバイルデバイスで縦表示の場合にh5要素とIntro Textのp要素を小さいフォントサイズとなるよう指定します
h5に指定しているM PLUS 1pフォントのジャギり対策(0.05度傾ける)を施しています

Site Template > Cassiopeia_Extended Details and Files > /media/templates/site/cassiopeia_extended/css/user.cssに下記を追加しました

/*
Articles by Carousel
*/
.carousel-text {
  background-color: rgb(0 0 0 / 0.5);
  color: #ffffff;
}

.carousel-text h5 {
  transform: rotate(0.05deg); 
}

@media (max-width: 768px) {
  .carousel-text h5 {
    font-size: 0.8rem;
  }
  .carousel-text p {
    font-size: 0.6rem;
  }
}

Next / Prevボタンの表示

本稿では、HTMLコードにExample 3: Carousel | Approach 1: Using a Custom ModuleのCarouselのサンプルコードを使用していますが、Carouselの両サイドに< (Prev) / > (Next)のボタンが表示されていません

Carousel | Docs | Bootstrapのサンプルコードと比較すると、Joomla! Documentには不足している行がありましたので追加したところ、表示されるようになりました

<button class="carousel-control-prev" type="button" data-bs-target="#myCarouselCaptions" data-bs-slide="prev">
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarouselCaptions" data-bs-slide="next">
<span class="visually-hidden">Next</span>
</button>
↓
<button class="carousel-control-prev" type="button" data-bs-target="#myCarouselCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarouselCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>

なお、[CarouselのSite Moduleを作成手順6]に記載したHTMLコードは上記修正を施したものになります