Bootstrapを使うことで、記事中の画像がモーダルウィンドウとして表示されるようにします。

おそらく、モジュールを探せばエディタに追加機能として画像の追加設定を出来るようになるのでしょう。

ですが、せっかくBootstrap使うのだから今回のやり方も覚えておきたい手法な気がします。

そのやり方ですが、まず新しく記事を書く時に、フルHTMLにします。

次に、必要な画像などを途中で追加しながら記事を書きます。

記事を書き終わったら、エディタを「ソース表示」にし、追加した画像を次のように加工します。

<img alt="画像の説明" data-align="center" data-entity-type="file"
  data-entity-uuid=画像ファイルを追加した時に決まる文字列
  src=追加した画像ファイル
  width="50%"
  height="50%"
  data-bs-toggle="modal" data-bs-target="#image_Modal_1"
/>

<div class="modal" id="image_Modal_1" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="Pict1Label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <p class="text-center">
                    <img class="img-fluid" alt="画像の説明" src=追加した画像ファイル />
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
            </div>
        </div>
    </div>
</div>

この変更を行うことで、画像をクリックするとモーダルウィンドウとして画像が表示されます。モーダルウィンドウのサイズは「modal-lg」を変更することで変えることが出来ます。

このBootstrapのモーダルには、更にヘッダー部分にモーダルウィンドウの名前を表示したり、右上に「×」ボタンをつけて「閉じる」ことが出来るようにしたり、画像にマウスオーバーした時にマウスのアイコンを指の形にしたりなど指定したり出来ます。

ブログ記事を書くたびにこの設定をすることは大変かもしれないけれど、覚えておけば他のカスタマイズにも使えると思います。

今回は、Bootstrapのモーダルウィンドウについて書きました。

次回は、Bootstrapのナビゲーションを使い、Bootstrap5テーマをインストールした直後のごちゃごちゃしているヘッダー部分を少しすっきりさせたいと思います。