WordPressのギャラリーをインスタグラム風にしてみようカスタマイズ。

WordPress

今回は小ネタです。

WordPress標準機能の「ギャラリー」。

画像を多く投稿するブログではキレイにサムネイルを並べられるのでありがたい機能です。

しかし標準ではいかんせんダサい。

そこでWordPressギャラリーをインスタグラムのプロフィールページにあるグリッド表示的な感じにしてみたいと思います。

↓イメージとしてはこんな感じです。

隙間は2pxくらいでしょうか。

スポンサーリンク

WordPressギャラリーをインスタ風にするCSSカスタマイズ

↓のコードを子テーマのstyle.cssに貼り付けてみてくださいね(もちろん、カスタマイザーの追加CSSでも大丈夫です)。

/* ギャラリーインスタ風カスタマイズ */
.wp-caption-text.gallery-caption{
	display: none !important;
}

.gallery-item{
	margin: 0 !important;
}

.gallery-icon{
	margin: 1px !important;
	padding: 0 !important;
}
.gallery-icon img{
	border: none !important;
}

イカしたグリッドデザインをしよう

以上のCSSを使えば、見慣れたインスタ風ギャラリー表示ができますのでよりユーザーフレンドリーな感じにできるかと思います。

ギャラリーのリンク先設定はメディアファイルにして、Lightbox系の画像ビューワープラグインがあるとスマートでベストです。

当サイトでは他にもさまざまなCocoon用CSSカスタマイズを紹介しているので、よろしければご覧ください!!(他テーマでも応用できるかと思います)

【支援お待ちしております!】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです!(300円単位での投げ銭が可能です)

継続的な更新・サポートのためにご支援お願いいたします……!

▶支援先:サイトに掲載するCSSカスタマイズの支援をお待ちしています!

サイトに掲載するCSSカスタマイズの支援をお待ちしています! - polca(ポルカ)
"今後の記事執筆の励みになります!"を支援のおかえしとして受け取ることができます。

その他のカスタマイズは下記ボタンから。

[PR]最新SEO対策済み!WordPressテーマ「Diver」
収益化を加速する!Diverは、初心者でも簡単に利用することが可能な高品質高機能なハイスペックワードプレステーマです。 一回テーマを購入すれば、複数のサイトでの利用が可能なのも魅力的。 ブロガー・アフィリエイターの次のステップに最適です。 【WordPressテーマ「Diver」公式サイト】
WordPress
スポンサーリンク
この記事をシェアしよう
リスブロ

コメント