1. Home
  2. /
  3. WordPress
  4. /
  5. WordPress|ギャラリーキャプション表示スタイルを変更するCSS
WordPress

WordPress|ギャラリーキャプション表示スタイルを変更するCSS

WordPressでギャラリーキャプション文字表示を変更するCSS

WordPressのでギャラリーブロック表示をすると、キャプション文字のスタイルが指定されていないため、通常文字サイズの左寄せになってしまいます。それを解決するCSSです。

そらまめ

WordPress歴10年以上です。ブロックエディタ好き。テーマはJINとLightning、Cocoonを使ってます。テーマやプラグインなどを試して使ってみるのが好きです。

Lightning G3 Pro Pack(アップデート期間1年)

キャプションの見え方の違い

○通常のキャプション

通常のキャプション

○ギャラリーのキャプション

↑これが通常のギャラリーキャプションの位置とフォント。

上のスクリーンショットのように、フォントの色も大きさも本文と同じなので文章が読みにくなります。

○CSS追加後のキャプション表示

この表示だとちゃんとキャプションなのか本文なのかがわかりやすい。

ギャラリーキャプション文字表示を変更するCSS

下記のCSSで対応しました。

.wp-block-gallery figcaption {
    text-align: center;
    font-size: .75rem;
}

これをページ下部のCSSエリアや、テーマカスタマイズ画面のCSS欄へ貼り付けるだけでOK。ギャラリーにキャプションはあまり利用されないないのかな?

以上、WordPressのギャラリーキャプション表示変更用CSSのご紹介でした。

ちなみに、JINのギャラリー表示はおかしい。このあたりはまた今度。

WordPressを体系的に学ぶなら

インターネット上には沢山無料で学べる場所があります。でも、体系的にしっかりと学びたいのであれば、有料のコースを活用するのも一手です。

Udemyは有名なオンラインレッスンコース。WordPressだけに限らない、様々なことがプロのビデオを観ながら学ぶことができます。

udemy

時々セールをするので、その時が狙い目!

 

そのほかにも沢山ありますよ♪

PAGE TOP