How To: Format Images in posts beautifully如何:在美丽的职位格式的图像

ADVERTISEMENT 广告
To get our software and web/tips via email, sign up for为了让我们的软件和网络/通过电子邮件提示,申请使用 daily email newsletter 每日电子报 .
Subscribe to RSS feed订阅RSS提要 or follow me跟我来 on Twitter? Twitter的?

Images add scenic beauty to posts (unless you include really bad images).图片添加风景秀丽的职位(除非你有非常糟糕的图像)。 Most bloggers advise you to include images at the at or around the beginning of your posts.大多数博客劝你包括在图像上或周围的一个开始。 And I am no different.我没有什么不同。

However, one thing that those advice does not contain is how to include images which blend well with the content, yet be noticeable by a reader.但是,有一点,这些意见是不包含如何将图像的融合和内容,但由读者明显。 Selecting the right image is important, but so is the way you place them.选择正确的形象固然重要,但这样的方式是你的地方。 Including an image with an uninspiring <img src=”" / > tag is just not in anymore – they're so web 1.0/year 1998.其中包括一个令人鼓舞<img src="" /“标记的不再只是没有图像-他们已经习惯了网络1.0/year 1998。

I prefer to use centered images, with the width slightly less than your post area width.我更喜欢使用的宽度略高于您的文章为中心区域的宽度不到图像。 This example shows you how to center the image, and add caption.这个例子说明如何中心的形象,并添加标题。

What you need now is a sensible, easy way to format images, without spending the whole day on it.你现在需要的是合理的,简单的方法来格式的图像,它不花一整天。 This can be achieved by a combination of two things – a CSS styling rule to be added to your style.css , and some HTML code which you have to wrap around your image.这可以通过一两种优势结合起来- 一个 CSS样式规则添加到您的style.css ,以及一些 HTML代码,你必须在你的形象包装。

Note that this cannot be used for images previously added, without editing them.请注意,这不能用以前的图片编辑他们说,他没有。 The reason: while CSS styling rule affects all elements, HTML markup has to be manually added around each image.原因是:CSS样式规则,而影响到所有因素,HTML标记,必须手动添加每个图像左右。

Add this code to your style.css file, towards the end:将此代码添加到您的style.css档案,临近结束:

div.ci { text-align: center; margin: 0; padding: 16px 0; padding: 0; border: none; }
div.ci small { font-size: .9em; line-height: 1.4em; color:#777; padding: 7px 0 0 0; }

ADVERTISEMENT 广告

The code above is the styling rules which help you to position the image.上面的代码是样式规则,帮助你的位置,图像。 To apply the styling, we need to use HTML around the image tag.要应用的样式,我们需要使用在图像周围的标记。 The HTML code is as follows:的HTML代码如下:

<div class="ci"><img src="URL_TO_IMAGE" alt="ALT TEXT" /><br />
<small>YOUR CAPTION</small></div>

In the code, replace URL_TO_IMAGE with the image URL, ALT TEXT with what you want to show when the image is not displayed, and YOUR CAPTION with the caption that you want.在代码,替换的图片网址,谷丙转氨酶与你想要的表现,图像不显示的文本,并与标题是您希望您的标题URL_TO_IMAGE。

Alternatively, you can remove the caption, by using this code:或者,您可以删除标题,使用以下代码:

<div class="ci"><img src="URL_TO_IMAGE" alt="ALT TEXT" /></div>

Remember to tweak the caption colour, size and font to your liking, and your images will rock!请记住,调整标题颜色,大小和字体根据自己的喜好,和你的图像将岩石!

To get our latest articles,为了让我们的最新的文章, click here to sign up点击此处注册 for our free email newsletter or subscribe to我们免费的电子邮件通讯或订阅 RSS feed RSS提要

§ Comments §评论