How to Change the CSS Style, Font, Spacing, Alignment and Color of WordPress Image Captions方法は、 CSSスタイル、フォント、間隔、ワードプレスのイメージカラーの配置とキャプションを変更する

Since WordPressワードプレス以来 version 2.6バージョン2.6 , WordPress has added a built-in shortcode, “Caption”, which will be automatically rendered and translated into standard HTML CSS code to display the caption for the photo or image, which saved via media uploader, beneath it. 、 WordPressはショートが内蔵されて、 "キャプション"を自動的にレンダリングされ、標準のHTML CSSのコードには、写真や画像を、その下のメディアのアップローダを介して保存用のキャプションを表示するために翻訳を追加した。

However, when WordPress appends the DIV styles to print the caption title under the picture or image, WordPress makes use of default alignment, color, font, spacing, and other styling attributes to display the image captions.しかし、ワードプレスの画像や画像の下のキャプションタイトルを印刷するには、 divのスタイルを付加する、ワードプレス、およびその他のスタイリングデフォルトの配置、色、フォント、間隔を使用して、画像のキャプションを表示する属性。

The default CSS styles for image with the caption may potentially breaks the blog or web page layout, does not validate against W3C xHTML standard, appears too closely with the text with no spacing in the post or page, or does not align as author’s wish. 5月、潜在的には、ブログやWebページのレイアウト区切りは、キャプションとイメージのデフォルトのCSSスタイル、 W3Cの標準xHTMLに対して、あまりにも密接にはポストまたはページでは、いかなる間隔でテキストを表示したりしないように配置を検証していない著者の願う。

For blogger who wants to modify the CSS styles of the caption that shows the image captions on screen after parsing the shortcode, add the following CSS code into the active theme’s style.css file:人は、アクティブなテーマのstyle.cssファイルには、次のCSSコードを追加した後は、ショートコードの解析画面に表示される画像のキャプションを示すのは、キャプションのは、 CSSスタイルを変更したいブロガーの場合：

/* Captions */ .aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }

.wp-caption img { margin: 0; padding: 0; border: 0 none; }

.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; } /* End captions */

Above HTML CSS declaration is taken from WordPress 2.6 default theme.上記のHTML CSSを宣言2.6デフォルトのテーマ、ワードプレスから採取されています。 These newly added CSS styles are used to control and assign the appearance of the caption for the image posted on blog.これらの新しく追加されたCSSスタイルを制御すると、画像のキャプションの外観を割り当てる使用されているブログに掲載した。 Modify the code above in “style.css” file according to your own preference to have your own design and look. " style.css "で、上記のコードを変更して、自分の好みに独自のデザインと見ることもできますに応じてファイルを作成します。

IMPORTANT : This is a machine translated page which is provided "as is" without warranty. 重要：これはマシンとして"保証なしにされている"提供されているページを翻訳しています。 Machine translation may be difficult to understand.機械翻訳を理解するのが難しい場合があります。 Please refer toを参照してください original English articleオリジナルの英語の記事 whenever possible.可能な場合。

Share and contribute or get technical support and help at共有して貢献するかを得る技術サポートと支援 My Digital Life Forums 私のデジタルライフフォーラム . 。

2 Responses to “How to Change the CSS Style, Font, Spacing, Alignment and Color of WordPress Image Captions” 2レスポンス"方法"は、 CSSスタイル、フォント、間隔、ワードプレスのイメージカラーの配置とキャプションを変更するに

Mark LaFlammeマークLaFlamme
July 20th, 2008 10:05 7月20日、 2008年10:05
1
For the life of me, I cannot get captions to work.私の人生のために、私キャプションを動作させることはできません。 It looks great in preview, but live, all the code spills out around the photo and there’s no caption at all.プレビューでは素晴らしいが、ライブは、すべてのコードは、写真の周りに見えますがこぼれるとキャプションではない。 I added the caption code to my theme’s style.css but there was no change.私は自分のテーマのstyle.cssにはキャプションがないコードを追加変更された。 Seems like I’m just one minor step away from making this work.この作品を作るからねのような小さな一歩のところ私だけ。 If anyone has any ideas, I’d love to hear them.もし誰かのアイデアが、私は彼らを聞くのが大好きです。 I’ll add a caption to my first post to demonstrate.私は最初の投稿を実証するために、キャプションを追加します。
Gray灰色
 September 16th, 2008 01:05 9月16日、 2008年01:05
2
Thank you so much for sharing this code!それほど、このコードを共有していただき、ありがとうございます！ I was going nuts trying to figure out how to fix my captions!私はナッツ私のキャプションを修正する方法を理解しようとしているつもりだった！