Subscribe to RSS feed RSS-Feed abonnieren or oder follow me Follow me on Twitter? auf Twitter?
Images add scenic beauty to posts (unless you include really bad images). Bilder hinzufügen, Landschaften, Stellen (es sei denn, Sie sind wirklich schlechte Bilder). Most bloggers advise you to include images at the at or around the beginning of your posts. Die meisten Blogger empfehlen Ihnen, die Bilder sind auf der am oder um den Beginn Ihrer Beiträge. And I am no different. Und ich bin nicht anders.
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. Doch eine Sache, dass diese Beratung nicht enthalten ist, wie man Bilder, die gut mit den Inhalten verschmolzen werden, doch werden von einem Leser spürbar sind. Selecting the right image is important, but so is the way you place them. Die Auswahl des richtigen Bildes ist wichtig, aber so ist, wie Sie sie Platz. Including an image with an uninspiring <img src=”" / > tag is just not in anymore – they're so web 1.0/year 1998. Einschließlich ein Bild mit einem langweiligen <img src="" />-Tag ist einfach nicht in mehr - sie sind so web 1.0/year 1998.
I prefer to use centered images, with the width slightly less than your post area width. Ich ziehe es vor zentriert Bilder, mit der Breite etwas weniger als Ihren Beitrag Bereich Breite nutzen. This example shows you how to center the image, and add caption. Dieses Beispiel zeigt Ihnen, wie Sie die Bildmitte und Bildunterschrift hinzufügen.
What you need now is a sensible, easy way to format images, without spending the whole day on it. Was Sie jetzt brauchen, ist eine sinnvolle und einfache Möglichkeit, Bilder im Format, ohne den ganzen Tag darauf. 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. Dies kann durch eine Kombination von zwei Dingen - ein CSS-Styling der Regel dadurch erreicht werden, um die style.css hinzugefügt werden, und einige HTML-Code, die Sie zu wickeln um Ihr Bild.
Note that this cannot be used for images previously added, without editing them. Beachten Sie, dass dies nicht für Bilder benutzt zuvor hinzugefügt, ohne sie zu bearbeiten sind. The reason: while CSS styling rule affects all elements, HTML markup has to be manually added around each image. Der Grund: Während CSS-Styling der Regel wirkt sich auf alle Elemente, mehr und HTML-Markup manuell um jedes Bild hinzugefügt werden.
Add this code to your style.css file, towards the end: Fügen Sie diesen Code auf Ihre style.css gegen Ende:
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; }
The code above is the styling rules which help you to position the image. Der obige Code ist die Styling-Regeln, die Ihnen helfen, um das Bild zu positionieren. To apply the styling, we need to use HTML around the image tag. Um das Styling gelten, müssen wir das Bild, um HTML-Tag verwenden. The HTML code is as follows: Der HTML-Code lautet wie folgt:
<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. In dem Code, ersetzen URL_TO_IMAGE mit der Bild-URL, ALT-TEXT mit, was Sie wollen zeigen, wenn das Bild nicht angezeigt wird, und Meine Erklärung mit der Beschriftung, die Sie wollen.
Alternatively, you can remove the caption, by using this code: Alternativ können Sie die Beschriftung zu entfernen, indem Sie diesen Code ein:
<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! Denken Sie daran, die Beschriftung Farbe, Größe und Schrift nach Ihren Wünschen optimieren und Ihre Bilder will rock!
Related reading In Verbindung stehende Lesung
- Post codes to blog posts/comments with Postable Postleitzahlen zu Blog-Posts / Kommentare mit Buchbar
- Top 12 ways to make your blog posts digg-friendly Top 12 Möglichkeiten, um Ihre Blog-Posts digg-friendly
- What topics would you like to read more posts on? Welche Themen möchten Sie mehr über die Beiträge lesen?
- Do not forget http:// in WordPress posts Vergessen Sie nicht, http:// in WordPress Beiträge
I see you're sharing some of your jewels! Ich sehe, Sie sind sie einige der Ihren Schmuck! Thanks. Danke. Even when it looks basic it's not the same when you don't have a clue about what the CSS is. Auch wenn es aussieht grundlegenden es ist nicht dasselbe, wenn Sie keine Ahnung haben, was die CSS ist.
@TonNet: Welcome. @ Tonnet: Willkommen. And just between the two of us, I have something to help you out in that matter – stay tuned Und genau zwischen den beiden von uns, ich habe dir etwas zu helfen, in dieser Angelegenheit - stay tuned
Noticed that the blog was down today – were you upgrading to 2.3? Bemerkt, dass der Blog unten war heute - waren Sie ein Upgrade auf 2.3?
@Karthik: Yes, I upgraded to WP 2.3 – see my post about it and more @ Karthik: Ja, ich aufgerüstet WP 2.3 - siehe meinen Beitrag über sie und mehr here hier . . So, did you? Also, nicht wahr?
Hey Author , thats nice . Hey Autor, thats nice. but i think you miss a “DEMO” thing for this post . aber ich denke, Sie vermissen ein "DEMO", was zu diesem Beitrag.