Demo たこつぼくらぶ

gallery-tako-1
ギャラリー用スキン #gallery-tako-1

試しに見てみる

＜スキンについて＞
●ギャラリー用のスキンで、通常投稿の表示には向きません。
　ギャラリーモードの機能上、投稿内に画像（[PICTで始まる記法を使って掲載した画像）を持っている投稿のみ表示されます。イラストなどの展示に向いています。
┗ てがろぐ公式：ギャラリー用スキンの作り方・使い方

●画像を1～4列のグリッド風に展示できます。実際はFlexBoxで指定しています。

●鍵付き投稿、NSFWフラグ（てがろぐ3.9以降の機能）の投稿は代替画像が表示されます。

サムネイル表示部分のskin-onelog.htmlの記述
<div class="thumbnail">
    [[ONEPICT:1]]

    <!-- 鍵つき投稿の場合、画像が出力されないので代替画像＋コメントを表示 -->
    <div class="key-need">
        <a href="[[PERMAURL]]">
            <img src="[[PATH:SKINDIR]]Keyneed.png" alt="鍵投稿用の代替画像">
            <div class="caution">
                <p>クリックして鍵を入力</p>
            </div>
        </a>
    </div>

    <!-- NSFWフラグの画像を非表示にし、代替画像＋コメントを表示 -->
    <div class="one-cushion">
        <a href="[[PERMAURL]]">
            <img src="[[PATH:SKINDIR]]cushion.png" alt="NSFWの代替画像">
            <div class="caution">
                <p>クリックして表示</p>
            </div>
        </a>
    </div>
</div>



該当部分のCSSの記述
/* 鍵付き投稿、NSFW画像の代替画像を通常非表示にする */
/*NSFW画像を非表示にする */
.key-need, .nsfw img, .one-cushion {
   display: none;
}

/* 必要な部分で表示する */
.key-need:first-child, .thumbnail .nsfw~.one-cushion {
   display: block;
}

/* 鍵付き投稿。NSFW用の注意書き */
.caution {
   background-color: var(--bg-sub);
   position: absolute;
   top: 40%;
   width: 100%;
   padding: 10px 5px;
   text-align: center;
   font-weight: bold;
   opacity: 0.8;
}


鍵付き投稿は画像の出力自体されないので、「代替画像用のdiv要素が最初に来る」という指定で表示の切り替えをしています。
NSFWフラグ画像は、「同じ親要素(thumbnail)内にnsfwクラスがあると表示される」という指定で表示の切り替えをしています。
NSFWフラグ画像についてはフィルターをかけるのが一番楽だしデザイン的にもいいのかな…と思いますが個人的な好みで差し替え画像をどうしても使いたかったので…。

●他はそんなに難しいことのないスキンだと思います。「画像を表示する」ということに特化しているので、それ以外のデザインや装飾はできる限り省略しています。
　画像のキャプション（3.9以降の機能）は、ギャラリーモードで投稿本文と重複する場合があるので非表示にしています。
┗ てがろぐ公式：画像管理画面で画像1つ1つにキャプションやフラグを登録する方法
┗ てがろぐ公式：画像の表示方法に応じた実際の出力HTMLと装飾例

●アイコンはFont Awesome を使用しています。