メニューを開く 項目を開く 記事投稿時刻 コメント トラックバック カテゴリー ブログテーマ タグ URLリンク コメントの編集 コメントに返信する

straw_manテンプレートライトボックス関連設定解説記事

2023/03/12  17:47
0
straw_manテンプレートにおけるライトボックス関連部分の解説記事です。

困ったときのStrawMan Template総合案内板においては以下部分相当内容にあたるので、ご参考あれ。

・ライトボックス
・ギャラリー




当記事の文章とコードはリラ様の著作物です


リラ様のサイト『まださなぎ』では、StrawMan Templateとlaymicの実践的な解説を公開していましたが、サイトが消えてしまいました。

このままでは、StrawMan Templateとlaymicの普及と利用に支障が出るためキャッシュよりサルベージし再構築したのが当記事になります。

共同開発者のリラさんに連絡がつかず無断で転載している状態ですが、これが許されるとすれば共同開発者の私以外いないと判断しこのような形での公開となりました（詳細な経緯はこちら）。


もくじに本来のサイトの姿を保存していたキャッシュサイトを併記してありますが、キャッシュの性質上完全な再現とはならずいつ消えてもおかしくないのでリンク切れの際はご容赦ください。



最後に、当サイト『ヤマノス』では、他者の引用がなされたもの以外のすべてをフリー素材として公開しています（当サイトの著作物について）。

ですが、当記事はリラ様の著作物ですのでフリー素材ではありません。
ご注意願います。



文責：秋田LV3





1：基本的な使用方法


初期状態でライトボックス導入は済ませてあるので、記事内部に呼び出し記述を行うだけでライトボックス表示はなされるようになってます。


一枚だけ拡大表示する場合

  1. <div class="gallery">
  2.   <a href="拡大時画像のurl">
  3.     <img src="サムネイル画像のurl">
  4.   </a>
  5. </div>


拡大表示後に複数枚を閲覧させたい場合

  1. <div class="gallery">
  2.   <a href="拡大時1枚目画像のurl">
  3.     <img src="サムネイル画像のurl">
  4.   </a>
  5.   <div style="display: none">
  6.     <a href="拡大時2枚目画像のurl"></a>
  7.     <a href="拡大時3枚目画像のurl"></a>
  8.     <!-- 以下、追加したい画像の数だけ書き加える -->
  9.   </div>
  10. </div>


記事執筆時に上記コードをコピペして、貼りたい画像urlで書き換えればオーケー。

もしも「画像ごとにキャプションテキストを追加したい」場合は以下のようにtitle=""属性を付け足せば良いでしょう。

  1. <div class="gallery">
  2.   <a href="拡大時1枚目画像のurl" title="1枚目の説明文">
  3.     <img src="サムネイル画像のurl">
  4.   </a>
  5.   <div style="display: none">
  6.     <a href="拡大時2枚目画像のurl" title="2枚目の説明文"></a>
  7.     <a href="拡大時3枚目画像のurl" title="3枚目の説明文"></a>
  8.     <!-- 以下、追加したい画像の数だけ書き加える -->
  9.   </div>
  10. </div>




2: ヤマノスで使っているライトボックス装飾カスタマイズコード


ここからは「ライトボックス展開リンクを装飾する」方法について。

ライトボックス装飾サンプル画像


このように、ヤマノスで使われているカスタマイズを導入する手順です。

※画像に書類風の重なりをあしらうことで、ライトボックスであることと、１枚か複数枚の画像含まれていることを示す装飾のことです（脚注：秋田LV3）
重なり装飾解説


具体的な方法としては、下記コードをテンプレートcssの一番下、自由記述領域にコピペしてください。

  1. /* ライトボックスリンクの装飾ここから */
  2. .gallery a {
  3.   display: inline-block;
  4.   position: relative;
  5.   border: none;
  6.   z-index: 1;
  7. }
  9. /*
  10.   `.gallery`内に要素が一つだけ存在する場合
  11.   <a>要素が一つだけでも、`.gallery`内に<span>要素などの他要素が入ってるとダメ。
  12.   その場合は「要素が複数存在する」扱いになるので注意。
  13. */
  14. .gallery a:only-child {
  15.   margin: 0 12px 16px 0;
  16. }
  18. /* `.gallery`内に複数の要素が存在する場合 */
  19. .gallery a:not(:only-child) {
  20.   margin: 0 24px 28px 0;
  21. }
  23. .gallery a::before,
  24. .gallery a:not(:only-child)::after {
  25.   content: "";
  26.   height: 100%;
  27.   width: 100%;
  28.   position: absolute;
  29. }
  31. /* 必ず表示される装飾一枚目 */
  32. .gallery a::before {
  33.   left: 12px;
  34.   top: 8px;
  35.   z-index: -1;
  36. }
  38. /* 複数要素存在時のみ表示される装飾二枚目 */
  39. .gallery a:not(:only-child)::after {
  40.   left: 24px;
  41.   top: 20px;
  42.   z-index: -2;
  43. }
  45. .gallery a::before,
  46. .gallery a:not(:only-child)::after {
  47.   /* 影設定 */
  48.   box-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
  49. }
  51. .theme_light .gallery a::before,
  52. .theme_light .gallery a:not(:only-child)::after,
  53. .theme_light .gallery a img {
  54.   /* ライトテーマ時の色設定 */
  55.   border: 3px solid #ccc;
  56.   background: #fff;
  57. }
  59. .theme_dark .gallery a::before,
  60. .theme_dark .gallery a:not(:only-child)::after,
  61. .theme_dark .gallery a img {
  62.   /* ダークテーマ時の色設定 */
  63.   border: 3px solid #5a5e70;
  64.   background: #484d61;
  65. }
  67. /*
  68.   枠線を消したい<a>要素には
  69.   `no_border`というクラス名をつける
  70. */
  71. .theme_light .gallery a.no_border img,
  72. .theme_dark .gallery a.no_border img,
  73. .gallery a.no_ornaments img {
  74.   border: none;
  75. }
  77. /*
  78.   ライトボックスリンク装飾を付けたくない<a>要素には
  79.   `no_ornaments`というクラス名をつける
  80. */
  81. .gallery a.no_ornaments {
  82.   position: initial;
  83.   border: none;
  84.   z-index: initial;
  85.   margin: 0;
  86. }
  88. .gallery a.no_ornaments::before,
  89. .gallery a.no_ornaments::after {
  90.   content: none;
  91. }
  93. /* FC2自動改行設定での表示を整える */
  94. .gallery br {
  95.   display: none;
  96. }
  97. /* ライトボックスリンクの装飾ここまで */

装飾の色使いが気になる場合は、コード内で指定しているカラーコードを色々と変更してみてくださいな。




2.1: ライトボックス装飾コード適用時のhtmlコード書き方


ライトボックス装飾コードを適用した場合は、原則ライトボックスリンクには自動的に装飾が付くようになっています。

しかし、時にライトボックス装飾が不要な場合もあるでしょう。

その際は以下のようなクラス名をライトボックス指定の<a>要素に付け足せば無効化されるようにしています。

クラス名
効果

no_border
ライトボックス装飾の枠線を無くす

no_ornaments
ライトボックス装飾を無効化する




ライトボックス装飾枠線無効化サンプル画像
（上画像はライトボックス装飾の枠線を無くした状態のもの）

以下は適用例。

  1. <!-- 枠線なしバージョン -->
  2. <div class="gallery">
  3.   <a class="no_border" href="拡大時画像のurl">
  4.     <img src="サムネイル画像のurl">
  5.   </a>
  6. </div>

  1. <!-- 装飾なしバージョン -->
  2. <div class="gallery">
  3.   <a class="no_ornaments" href="拡大時画像のurl">
  4.     <img src="サムネイル画像のurl">
  5.   </a>
  6. </div>


ライトボックス装飾無効化サンプル画像

ライトボックス装飾を無効化した場合、このような表示になります。




3: アートギャラリー用カスタマイズコード


ここまで説明してきたものは主に「漫画ページを一挙掲載する」場合を想定した内容であったのですが、人によってはアートギャラリー的に表示したいという状況もあるでしょう。


ギャラリー01
ギャラリー表示サンプル画像

StrawMan Templateの各種機能の表示見本

StrawMan Templateの各種機能の表示見本

この記事では、StrawMan Templateに搭載されている一部機能の見本を紹介しています。各機能の見栄えや実際の動き、または使用した際の正しい動きの確認に活用いただければ幸いです。

yamanosu.com


この上記ページ内ギャラリーのように「一定間隔でギャラリー画像をぎっしり並べる」機能を追加する方法を解説します。


この機能追加についても、コピペだけで済むのでご安心を！




3.1: カスタマイズCSSコードの追加


下記コードをテンプレートcss一番下の自由記述領域にコピペしてください。

  1. /* アートギャラリー用追加コードここから */
  2. .stack_pics {
  3.   display: flex;
  4.   flex-flow: row wrap;
  5. }
  6. .stack_pics a {
  7.   display: flex;
  8.   flex-flow: column nowrap;
  9.   /* 記事横幅の25%を目処に横幅を定める */
  10.   flex: 1 0 25%;
  11.   /* 画像がどんなに小さくても10remの大きさは確保 */
  12.   min-width: 10rem;
  13.   padding: 1rem;
  14.   align-items: center;
  15.   justify-content: space-between;
  16. }
  18. .stack_pics a span {
  19.   /* テキストと画像間の余白 */
  20.   margin-top: 1rem;
  21.   /* テキストを中央寄せ */
  22.   text-align: center;
  23. }
  25. .stack_pics a img {
  26.   /*
  27.     画像最大サイズ指定
  28.     お好みのサイズに合わせて変えてください
  29.   */
  30.   max-height: 6rem;
  31.   max-width: 6rem;
  32.   /* 画像を中央寄せ */
  33.   margin: auto;
  34. }
  36. /* FC2自動改行設定での表示を整える */
  37. .stack_pics br {
  38.   display: none;
  39. }
  41. /*
  42.   stack_pics要素にis_gridクラスをつけると
  43.   テキストなし + 余白固定の特殊モードに変更
  44. */
  45. .stack_pics.is_grid {
  46.   display: grid;
  47.   grid-template-rows: 6rem;
  48.   grid-template-columns: repeat(auto-fill, 6rem);
  49.   grid-gap: 1rem;
  50. }
  52. .stack_pics.is_grid a {
  53.   display: flex;
  54.   border: 0;
  55.   padding: 0;
  56.   min-width: inherit;
  57. }
  59. .stack_pics.is_grid a span {
  60.   display: none;
  61. }
  62. /* アートギャラリー用追加コードここまで */




3.2: カスタマイズjsコードの追加


ギャラリー用に新たなクラス名を追加しているので、ライトボックススクリプト側の起動コードも追加する必要があります。

まずはテンプレート内を# baguettebox.js読み込みここからで検索して、ライトボックス用コード部位を見つけ出してください。


このような部分があるはずです。


ライトボックス用コード部位参考スクショ

上記スクショと同じ記述が見つかったなら、下記コードをbaguetteBox.runという記述に並ぶようコピペ。

  1. baguetteBox.run(".stack_pics", {
  2.   noScrollbars: true,
  3. });


コピペ位置が超大事なので、以下スクショと同じになるよう注意してくださいね。


ライトボックス用コードコピペ参考スクショ

正しくコピペし終えたならば、これで下準備は完了です。

※上記のコピペ指南画像はこの記事の編集者がまっさらのStrawMan Templateへ追記したものでテストをしていません。

編集者は開発最終段階のStrawMan Templateをリリース後も使用しており若干コードの表記が違います。

コピペ位置の上に『 // フリー素材ページ用のギャラリークラスを追加』の表記。

大丈夫だとは思いますがバックアップを取り慎重に作業してください（脚注：秋田LV3）





3.3: ギャラリー用HTMLコードテンプレート


後はライトボックス用コードと同じく、記事執筆時に特定のhtml記述を加えればオーケー。

二つのバリエーションを用意しておいたので、ギャラリー形式に応じて使い分けると良いでしょう。


通常モード（説明文付き表示）
ギャラリー01

stack_pics通常表示サンプル

  1. <div class="stack_pics">
  2.   <a href="拡大時画像のurl">
  3.     <img src="サムネイル画像のurl">
  4.     <span>表示画像の説明文</span>
  5.   </a>
  6.   <a href="拡大時画像のurl">
  7.     <img src="サムネイル画像のurl">
  8.     <span>表示画像の説明文</span>
  9.   </a>
  10.   <!-- 以下、追加したい画像の数だけ書き加える -->
  11. </div>


グリッドモード（説明文無し表示）
ギャラリー05

stack_picsグリッド表示サンプル

  1. <div class="stack_pics is_grid">
  2.   <a href="拡大時画像のurl">
  3.     <img src="サムネイル画像のurl">
  4.   </a>
  5.   <a href="拡大時画像のurl">
  6.     <img src="サムネイル画像のurl">
  7.   </a>
  8.   <!-- 以下、追加したい画像の数だけ書き加える -->
  9. </div>


サンプル画像はStrawMan Templateの各種機能の表示見本の同一指定部分をスクショしたものです。

二つのモードで若干表示形式が違うので、お好みに応じて使い分けてくださいな。


ちなみにグリッドモードでは<a>要素内の<span>要素は強制的に非表示されます。

なので通常モードのclass="stack_pics"という部分を、
class="stack_pics is_grid"と書き換えるだけでグリッドモード表示に切り替わりますので、ものぐささんはお試しあれ。




madasanagi_mini.png
まださなぎ © Proudly written by dettalant


StrawMan Template総合案内板へ戻る
関連記事

コメント

コメントの投稿