キャプションタグのデザインの編集

このトピックには1件の返信が含まれ、1人の参加者がいます。9 ヶ月、 1 週前 かうたっく さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #59232 返信

    リョウ

    画像の引用元を明記するために、キャプションタグを使おうと思ったのですが、画像が灰色の枠に囲まれるのと、キャプションの文字を編集したいです。
    まず、画像を囲む灰色の枠を消したくて、そしてキャプションのテキストの色が普通に黒色なのでそれを薄くしたいのと、画像と文字の余白を詰めたいです。

    簡単に言うと、このサイトで説明しているような感じのキャプションにしたいのです。
    http://the-money.net/waza-photo/

    編集したいものの、CSSの編集に関してはほとんど詳しくないので、ご教示いただけると助かります。
    バージョンはSimplicity2を使っています。

  • #59239 返信

    かうたっく

    ・画像を囲む灰色と枠を消したい
    ・キャプションのテキスト色を薄く
    ・画像と文字の余白を詰めたい
    ・キャプションの文字

    ついでにキャップション内の画像に枠を付けました。完成イメージ※子テーマCSSは削除済み
    https://gyazo.com/b13d0e763eac3830748962f721617cd7

    CSS

    .wp-caption {
    	border: none;
    	background-color: transparent;
    }
    .wp-caption-text, .gallery-caption {
    	margin: 0;
    	color: #9a9a9a;
    }
    .wp-caption img {
    	border: 1px solid #ddd;
    }

    CSSが効かないときはキャッシュを削除して確認、それでもダメならキャップションを置いているページのURLをい置いてください

返信先: キャプションタグのデザインの編集
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)