WordPressギャラリーの作り方［3］CSSを追記

Posted on by vision2019

CSSを追記

66-2

写真の左右に余白がないため窮屈な感じです。そのためCSSに追記して設定を上書きします。
カラム5のギャラリーに関する設定を上書きします。
style.cssの最後に追記します。

.gallery-item {
    float: left;/*左にフロート*/
    margin: 0 8px 8px 0;/*右と下に8pxのマージン*/
    overflow: hidden;
    position: relative;
}
.gallery-columns-5 .gallery-item {
    max-width: 19%;/*5カラムの場合のデフォルト*/
    max-width: -webkit-calc(20% - 8px);/*マージン分をリセット*/
    max-width:         calc(20% - 8px);
}
.gallery-item:nth-of-type(5n) {
    margin-right: 0;/*5の倍数めの画像の右マージンを0に*/
}

レイアウトを確認

CSSが反映されているか確認します。

67

使用しているテーマによってはCSSの設定が重複して、レイアウトが反映されない場合があります。