Diver（WordPressテーマ）で画像を縦に並べた時に隙間を埋める方法。

画像を縦に並べた時にこの隙間↓って嫌なんです。

上下の画像の間に隙間が見えてしまいます。

 

スタイリッシュなフルワイドのページを作りたいときなどにこの隙間が間抜けに見えてしまします。

隙間が間抜け…

変な日本語ですねｗｗ

 

まぁそれは置いといてこの隙間を埋める方法を書きたいと思います。

 

 

画像を縦に並べた時に隙間を埋める方法。

Diver（ダイバー）には、記事ごとにCSSを設定できる場所がある

このように↓ダイバーには記事ごとにCSSを個別で設定できる箇所があります。

↑ここにカスタムCSSがある。

 

カスタムCSSに隙間を埋めるCSSを追加する。

画像の縦の隙間を埋めるCSS

.single-post-main {
    padding: 0;
}

.content img {
    margin: 0 auto;
    vertical-align: middle;
}

 

 

記事を個別にCSSを追加して隙間を埋めた画像

このように隙間を埋めることが出来ました。

 

まとめ

この隙間を埋める事で下記のようなページを作ることが出来ました。

この隙間問題は、DiverのカスタマーサポートにメールをしてCSSを教えていただいて解決しました。

 

Diverを購入するとメール問い合わせが何度も出来ます。

 

基本的な使い方はもちろん、カスタマイズ方法も答えてくれるのでサポート万全です。

 

売りっぱなしのテーマではなくてサポートも手厚いDiverを心からおすすめしますよ。

 

今のところ僕がやりたいことが出来ないことはありません。