How to Change the CSS Style, Font, Spacing, Alignment and Color of WordPress Image Captions如何改變CSS樣式,字體,間距,對齊和顏色WordPress的圖像字幕
Since WordPress由於在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.然而,當在WordPress附加學作風,打印字幕的標題下,圖片或影像, WordPress所使用的預設路線,顏色,字體,間距,和其他的風格屬性,以顯示圖像字幕。
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.默認的CSS樣式的形象與說明可能爆發的博客或網頁的佈局,不驗證的XHTML對W3C的標準,似乎太密切與文本沒有間隔,在後或網頁,或不作為,使作者的願望。
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:對Blogger誰要修改的CSS風格的字幕顯示的圖像字幕在屏幕上後,解析短,添加以下的CSS代碼並將積極為主題的style.css檔案:
/* Captions */ / *標題* /
.aligncenter, 。 aligncenter ,
div.aligncenter { div.aligncenter (
display: block; 顯示:座;
margin-left: auto; 保證金左:自動;
margin-right: auto; 保證金-右:自動;
} )
.wp-caption { 。可濕性粉劑字幕(
border: 1px solid #ddd; 邊界: 1px固體#國內長途;
text-align: center; 文本對齊:中心;
background-color: #f3f3f3; 背景顏色: # f3f3f3 ;
padding-top: 4px; 填充頂: 4px ;
margin: 10px; 保證金: 10px ;
-moz-border-radius: 3px; -萬盎司邊界半徑: 3px ;
-khtml-border-radius: 3px; - khtml邊界半徑: 3px ;
-webkit-border-radius: 3px; - webkit邊界半徑: 3px ;
border-radius: 3px; 邊界半徑: 3px ;
} )
.wp-caption img { 。可濕性粉劑字幕國際管理集團(
margin: 0; 保證金: 0 ;
padding: 0; 填充: 0 ;
border: 0 none; 邊界: 0無;
} )
.wp-caption p.wp-caption-text { 。可濕性粉劑字幕p.wp字幕文本(
font-size: 11px; 字體大小: 11px ;
line-height: 17px; 線高度: 17px ;
padding: 0 4px 5px; 填充: 0 4px 5px ;
margin: 0; 保證金: 0 ;
} )
/* End captions */ / *結束字幕* /
Above HTML CSS declaration is taken from WordPress 2.6 default theme.上述的HTML的CSS聲明是採取從在WordPress 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 我的數字生活論壇 . 。
Related Articles相關文章
- How to Disable Image and Video Captions Feature and Auto Adding of Shortcode in WordPress 2.6如何禁用圖片和視頻字幕功能和自動加入的短在WordPress 2.6
- Switch and Change Back to Office 2003 Default Font and Style Set in Office Word 2007開關和改變回Office 2003的默認字體和風格設置在Office Word 2007中
- Meaning of TVAnts Buffer Progress Bar Colors含義tvants緩衝進度欄的顏色
- WordPress 2.6 with Change Revision Tracking Feature Available for Free Download在WordPress 2.6與變化修訂跟踪功能,提供免費下載
- How to Change the Frequency or Interval WordPress Auto Saves An Editing Post or Page如何改變頻率或間隔的WordPress自動保存編輯的職位或網頁
- Website Loading Time and Speed Checker網站加載時間和速度檢查
- Remove Microsoft Word Manual Formatting or Copied Formatting from External Source刪除Microsoft Word的手冊格式或複製格式從外部來源
- Permanently Disable AdSense-Deluxe WordPress Plugin Reward Plugin Author Option永久禁用的AdSense豪華wordpress插件獎勵插件作者的選擇
- Search Engine Spider and Crawler Simulator搜索引擎蜘蛛和履帶式模擬器
- Disable and Turn Off Post Revisions Tracking in WordPress 2.6 or Above禁用和關閉後的修改,跟踪在WordPress 2.6或以上



















July 20th, 2008 10:05 2008年7月20日10時05分
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.我將添加標題我的第一篇文章顯示。