てがろぐ「ギャラリーモード」のカスタマイズ

ローカルでいじっていた「てがろぐ」の体裁がなんとなく整ってきたのでウェブにも上げてみました。

で、スマホでもできる！「てがろぐ」簡単設置・始め方の次は粗忽者の私が躓いたことを踏まえて最低限の初期設定の話をメモしておこうと思ったのですけど（配布元さんの説明をきちんと読めばすべて解決するんですけどあの圧巻の量に怯んでしまったので）、なんとなく周りを見てると設置の後の初期設定に困ってる方ってそんないない感じなので先にギャラリーモードカスタマイズの話をメモしておこうと思います。

てがろぐのギャラリーモードというか画像関係の機能としてはつい昨日、

サムネイル画像が存在する場合には『ページ上の表示にはサムネイル画像を使い、Lightboxでのリンク先にはオリジナル画像を使う』ように表示できる機能を追加。

など新機能やバグ修正がされたベータ版（Ver 3.8.5 β）が公開されています。そちらでの実験結果です。

サムネイル画像は元画像と同名で自分で作って別途FTPソフトなどでアップロードが必要
記事本文・新着画像リスト・ギャラリーモード表示ではサムネイルが表示される
ツイッターカードには元画像が表示される

今のところこういう感じ。おいおい改善されていくとは思いますが現時点ではサムネイル画像を別途で作りFTPソフトでアップロード、というのがちょっと手間だなぁという。たぶんこれは機械的にサムネイル作らず自分でサムネイルとして表示したい画像を使うための策なんでしょうね（Web liberty さん時代のCGIでいう「ミニ画像」、freoでいう「ファイルのイメージ」と同様。最初これも区別がわからず混乱した記憶あります）。

で、一つ一つサムネイルを設定するのは作業的にきついよ～って方向けのカスタマイズです。

1．記事本文中で画像にワンクッションを置く

これはてがろぐ公式サイトで解説されています。

いきなりは見せたくない画像にワンクッション置きたい場合の(たぶん)チョー簡単な方法

てがろぐユーザーとして日が浅いので「なるほどこういうときに自由装飾記法を使うのか…」と目からうろこが。ただ、この方法だとギャラリーモードで表示したときには元画像がそのまま表示されます。

2．ギャラリーで画像にワンクッションを置く

特定のハッシュタグを記事本文に記入したときにギャラリーで表示される画像にワンクッションを置くカスタマイズです。CSSのみでやっているかなり力技…だと思います、ので、以下の方法を試してみて不具合があったときはお知らせください。

変更するファイルは

skin-gallery/skin-onelog.html
skin-gallery/tegalog-gallery.css

skin-gallery/skin-onelog.html

22～42行目付近が画像と本文冒頭・ハッシュタグ・カテゴリー・記事単体へのリンクなどの部分です。

	<div class="onelogmain">
		<!-- ………………… -->
		<!-- ▽画像掲載部分 -->
		<!-- ………………… -->
		<p class="imagebox">
			<!-- ▽投稿本文内の1つ目の画像だけを表示 -->
			[[ONEPICT:1]]
		</p>
		<!-- ………………… -->
		<!-- ▽テキスト部分 -->
		<!-- ………………… -->
		<div class="onelogtext">
			<!-- ▽原則として投稿本文の1行目の内容を最大40文字だけプレーンテキストで掲載 -->
			[[COMMENT:TITLE:40]]
			<!-- ▽デフォルトスキンでの投稿単独ページへ矢印記号でリンク -->
			<a href="[[PERMAURL:PURE]]" title="No.[[POSTID]]全文を見る" class="arrowlink">»</a><br>
			<!-- ▽投稿に含まれるハッシュタグだけを抽出して掲載（※リンク先でギャラリーモードを解除したければ「:GALLERY」を削除して下さい） -->
			[[COMMENT:TAGS:GALLERY]]
			<span class="categories">[[CATEGORYLINKS:GALLERY]]</span> <!-- ←所属カテゴリ群リンク（※リンク先でギャラリーモードを解除したければ「:GALLERY」を削除して下さい） -->
		</div>
	</div>

これを特定のハッシュタグをつけた記事の画像にワンクッションを表示するようにします（例として「#R18」）。仕組みとしてはCSSの隣接クラスタを利用します。「#R18」タグの直後に出力される画像にワンクッションを表示、というようにしたいのでHTMLをそのように書き換えます。

		[[COMMENT:TAGS:GALLERY]]
		<p class="imagebox">
			<!-- ▽投稿本文内の1つ目の画像だけを表示 -->
			[[ONEPICT:1]]
		</p>

画像表示部分の<p class="imagebox">の直前にハッシュタグ表示用の[[COMMENT:TAGS:GALLERY]]を移動しました。こうすることで実際に出力されるHTMLは

<a href="?tag=%52%31%38&mode=gallery" class="taglink" title="R18">#R18</a>
<p class="imagebox">
	<a class="imagelink" href="画像URL" data-lightbox="tegalog"><img class="embeddedimage" loading="lazy" src="画像URL" alt="画像名" width="幅" height="高さ"></a>
</p>

となります。ここにスタイルを当てていきます。

skin-gallery/tegalog-gallery.css

の末尾に

.taglink[title="R18"] + .imagebox img { filter: blur(.5rem); }

と追記します。こうすることでハッシュタグ「#R18」がついた記事の画像にはぼかしがかかります。filter: blur(.5rem);はぼかしをかけるCSSですが、ここにいきなりは見せたくない画像にワンクッション置きたい場合の(たぶん)チョー簡単な方法を応用したりとCSSでいろいろな装飾ができそうです。

この時注意しなければいけないのは、本文中に複数のハッシュタグを記述したときにギャラリーで表示されるのは出現順になるということです。ワンクッションを表示するようのハッシュタグは一番最後に書くようにしてください（ハッシュタグ以外の文字列等はそれ以降に書いても大丈夫です）。

3．画像クリックでLightboxを開かず記事へのリンクにする

前述の状態でギャラリーでの画像表示にワンクッション的なことができましたが、ここまでだと画像をクリックしたときにLightboxで元画像が表示されてしまいます。これを記事単体へのリンクにしたい場合は tegalog-gallery.css で

.onelogmain {
	position:relative;
}
.imagelink {
	pointer-events: none;
}
.arrowlink {
	width:100%;
	height:100%;
	display:block;
	top:0;
	left:0;
	position:absolute;
}

のようにします。仕組みとしては画像へのリンクを無効化し、記事へのリンクをかぶせるという感じです。あとは表示スタイルを整えて10plogギャラリーになりました。

上記どの方法（てがろぐ Ver3.8.5 β標準機能のサムネイル表示）でも、OGP出力をする設定でツイッターに記事URLを投げると1枚目元画像がツイッターカードとして表示されるので注意が必要です。