WordPress

graphyテーマで画像キャプションの表示HTMLやcssを変更する

更新日:

(お約束)ご利用は自己責任でお願いします

graphyテーマはとても美しくて全般的には気に入っているのですが、画像のキャプションがはみ出るのだけがちょっと気に入りません。

フルサイズの画像では大丈夫ですが、サムネイルサイズになるとちょっと不格好。

こんな感じです。

フルサイズの画像
フルサイズの画像
サムネイル表示ではキャプションがはみ出す
サムネイル表示ではキャプションがはみ出す

これをはみ出ないように、画像の幅とキャプションの幅が一緒になるように修正します。

画像キャプションを出力しているHTMLコードを変更

まずは画像キャプションを出力しているHTMLコードを変更します。functions.phpをいじります。

参考:http://pressstocker.com/image-caption/

今回は、WordPress純正テーマであるTwenty Fifteenなどが使っているfigureやfigcaption(HTML5)で書いてみました。

本来class名はwp-cationwp-caption-textなのですが、不用意なスタイルの重複を避けるため、またいちいち上書きでスタイルを書き足すのが面倒なために、新しいclass名を wp-cap , wp-cap-text としました。

 

cssの修正

そしてcssを追加します。

細かいスタイル(色color:やfont-size:大きさ)などは好きにしてもらっていいのですが、キモは「max-width: 100%;」これで画像の幅とfigcaptionの幅が同じになります。

 

フッター広告







フッター広告







-WordPress
-, , ,

Copyright© salmomoのさるもも , 2017 All Rights Reserved.