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

straw_manテンプレートにおけるライトボックス関連部分の解説記事です。

 

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

  • ライトボックス
  • ギャラリー
スポンサーリンク

1: 基本的な使用方法

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

 

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

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

 

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

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

 

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

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

 

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

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

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

 

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

 

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

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

 

/* ライトボックスリンクの装飾ここから */
.gallery a {
  display: inline-block;
  position: relative;
  border: none;
  z-index: 1;
}

/*
  `.gallery`内に要素が一つだけ存在する場合
  <a>要素が一つだけでも、`.gallery`内に<span>要素などの他要素が入ってるとダメ。
  その場合は「要素が複数存在する」扱いになるので注意。
*/
.gallery a:only-child {
  margin: 0 12px 16px 0;
}

/* `.gallery`内に複数の要素が存在する場合 */
.gallery a:not(:only-child) {
  margin: 0 24px 28px 0;
}

.gallery a::before,
.gallery a:not(:only-child)::after {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
}

/* 必ず表示される装飾一枚目 */
.gallery a::before {
  left: 12px;
  top: 8px;
  z-index: -1;
}

/* 複数要素存在時のみ表示される装飾二枚目 */
.gallery a:not(:only-child)::after {
  left: 24px;
  top: 20px;
  z-index: -2;
}

.gallery a::before,
.gallery a:not(:only-child)::after {
  /* 影設定 */
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
}

.theme_light .gallery a::before,
.theme_light .gallery a:not(:only-child)::after,
.theme_light .gallery a img {
  /* ライトテーマ時の色設定 */
  border: 3px solid #ccc;
  background: #fff;
}

.theme_dark .gallery a::before,
.theme_dark .gallery a:not(:only-child)::after,
.theme_dark .gallery a img {
  /* ダークテーマ時の色設定 */
  border: 3px solid #5a5e70;
  background: #484d61;
}

/* 
  枠線を消したい<a>要素には
  `no_border`というクラス名をつける
*/
.theme_light .gallery a.no_border img,
.theme_dark .gallery a.no_border img,
.gallery a.no_ornaments img {
  border: none;
}

/*
  ライトボックスリンク装飾を付けたくない<a>要素には
  `no_ornaments`というクラス名をつける
*/
.gallery a.no_ornaments {
  position: initial;
  border: none;
  z-index: initial;
  margin: 0;
}

.gallery a.no_ornaments::before,
.gallery a.no_ornaments::after {
  content: none;
}

/* FC2自動改行設定での表示を整える */
.gallery br {
  display: none;
}
/* ライトボックスリンクの装飾ここまで */

 

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

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

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

 

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

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

クラス名 効果
no_border ライトボックス装飾の枠線を無くす
no_ornaments ライトボックス装飾を無効化する

 

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

(上画像はライトボックス装飾の枠線を無くした状態のもの)

 

以下は適用例。

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

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

 

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

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

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

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

 

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

 

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

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

 

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

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

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

/* アートギャラリー用追加コードここから */
.stack_pics {
  display: flex;
  flex-flow: row wrap;
}
.stack_pics a {
  display: flex;
  flex-flow: column nowrap;
  /* 記事横幅の25%を目処に横幅を定める */
  flex: 1 0 25%;
  /* 画像がどんなに小さくても10remの大きさは確保 */
  min-width: 10rem;
  padding: 1rem;
  align-items: center;
  justify-content: space-between;
}

.stack_pics a span {
  /* テキストと画像間の余白 */
  margin-top: 1rem;
  /* テキストを中央寄せ */
  text-align: center;
}

.stack_pics a img {
  /* 
    画像最大サイズ指定
    お好みのサイズに合わせて変えてください
  */
  max-height: 6rem;
  max-width: 6rem;
  /* 画像を中央寄せ */
  margin: auto;
}

/* FC2自動改行設定での表示を整える */
.stack_pics br {
  display: none;
}

/* 
  stack_pics要素にis_gridクラスをつけると
  テキストなし + 余白固定の特殊モードに変更
*/
.stack_pics.is_grid {
  display: grid;
  grid-template-rows: 6rem;
  grid-template-columns: repeat(auto-fill, 6rem);
  grid-gap: 1rem;
}

.stack_pics.is_grid a {
  display: flex;
  border: 0;
  padding: 0;
  min-width: inherit;
}

.stack_pics.is_grid a span {
  display: none;
}
/* アートギャラリー用追加コードここまで */

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

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

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

 

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

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

 

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

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

 

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

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

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

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

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

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

 

通常モード(説明文付き表示)

stack_pics通常表示サンプル

<div class="stack_pics">
  <a href="拡大時画像のurl">
    <img src="サムネイル画像のurl">
    <span>表示画像の説明文</span>
  </a>
  <a href="拡大時画像のurl">
    <img src="サムネイル画像のurl">
    <span>表示画像の説明文</span>
  </a>
  <!-- 以下、追加したい画像の数だけ書き加える -->
</div>

 

グリッドモード(説明文無し表示)

stack_picsグリッド表示サンプル

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

 

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

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

 

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

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