Test 2016 07 15 Hub

イラストサムネ表示テスト

[[div class="ikr-gallery"]]
[[gallery viewer="no" size="small"]]
: /test-2016-07-15-illust-01/2016-05-14_ion.png link="/test-2016-07-15-illust-01"
: /image-001/test.jpg link="/image-001"
: /ikr-4185-sand-002/test.jpg link="/ikr-4185-sand-002"
[[/gallery]]
[[/div]]

Less

.ikr-gallery {

    /* reset */

    .gallery-box {
        overflow: auto;
        width: 100%;
        .gallery-item {
            float: none;
            margin: 0;
            border: 0;
            &.small {
                width: auto;
                height: auto;
            }
            table,
            .td {
                margin: 0;
                padding: 0;
                border-collapse: collapse;
                border-spacing: 0;
            }
            table {
                width: auto;
                height: auto;
            }
            td {
                text-align: inherit;
            }
        }
    }
}

.ikr-gallery {

    /* 慣れないflex */

    .gallery-box {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;

        flex-wrap: wrap;
        justify-content: center;

        .gallery-item {
            table {
            }
            td {
                a{
                    position: relative;
                    display: block;
                    transition: .1s;
                    &:before {
                        content: " ";
                        display: none;
                        position: absolute;
                        background: rgba(255, 255, 255, .5);
                    }
                    &:hover,
                    &:active,
                    &:focus{
                        &:before{
                            content: " ";
                            display: block;
                            height: 100%;
                            width: 100%;
                        }
                        box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
                    }
                }
                .gallery-image-size-small {
                    max-width: 265px;
                    max-height: 265px;
                }
            }
        }
    }
}

デフォルト


size="square" + ページリンク


size="small" + ページリンク


size="square" + ページリンク + viewer="no"


size="small" + ページリンク + viewer="no"

特に指定がない限り、このサイトのコンテンツには次のライセンスが適用されます: Creative Commons Attribution-ShareAlike 3.0 License