Hermit Cottage

WordPress 怎样给文章图片加文字说明框

这个功能一直想要实现,但一直没有实现,今天忍不住加上去了。

方法:

1、在 CSS 中加入如下代码。

/* 图片 caption 加框 */  
  
.aligncenter,   
div.aligncenter {   
display: block;   
margin-left: auto;   
margin-right: auto;   
}   
  
.alignleft {   
float: left;   
}   
  
.alignright {   
float: rightright;   
}   
  
.wp-caption {   
border: 1px solid #ddd;   
text-align: center;   
background-color: #f3f3f3;   
padding-top: 4px;   
margin: 10px;   
/* optional rounded corners for browsers that support it */  
-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; */  
}

2、用 Live Writer 写完后上传图片。然后在线用编辑器打开,点图片,在 Caption 属性中加入自己想要的文字即可。

默认效果演示:

Bo Xilai. Photo: AFP.

可以在编辑器中看 html 代码如下。其中 align=”alignnone” 表示图片默认位置,alignright 是右对齐,alignleft 是左对齐,aligncenter 是居中。因为都是 CSS 控制的,因此都需要在 html 编辑器中编辑。

<img class="wp-caption " style="border-style: initial; border-color: initial; margin-right: 5px; border-image: initial; border-width: 0px;" title="art-Gu-Kailai-420x0" src="https://talk.synyan.net/wp-content/uploads/2012/04/art-Gu-Kailai-420x0.jpg" alt="art-Gu-Kailai-420x0" width="420" height="295" align="right" border="0" />
Political scandal ... Bo Xilai and his wife, Gu Kailai and son Bo Guagua.

6 条评论

发表评论 →

哇哈哈 ~ 你居然拿這張照片當範例 ! ^^

Internet Explorer 9 Internet Explorer 9 Windows Vista Windows Vista

发表评论