Subscribe to RSS feed Abonner på RSS feed or eller follow me følg meg on Twitter? på Twitter?
Images add scenic beauty to posts (unless you include really bad images). Bilder legge naturskjønnhet til innlegg (med mindre du tar virkelig dårlig bilder). Most bloggers advise you to include images at the at or around the beginning of your posts. De fleste bloggere anbefale deg å ta bilder på ved eller rundt begynnelsen av innleggene dine. And I am no different. Og jeg er ikke annerledes.
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. Men én ting at disse rådene ikke inneholder er hvordan man skal inkludere bilder som blandes godt med innholdet, men likevel være merkbar ved en leser. Selecting the right image is important, but so is the way you place them. Velge riktige bildet er viktig, men det er måten du plasserer dem. Including an image with an uninspiring <img src=”" / > tag is just not in anymore – they're so web 1.0/year 1998. Inkludert et bilde med en uinspirerende <img src="" />-koden er bare ikke i lenger - de er så web 1.0/year 1998.
I prefer to use centered images, with the width slightly less than your post area width. Jeg foretrekker å bruke sentrert bilder, med bredden noe mindre enn innlegget ditt område bredde. This example shows you how to center the image, and add caption. Dette eksemplet viser hvordan du midt på bildet, og legge til bildetekst.
What you need now is a sensible, easy way to format images, without spending the whole day on it. Det du trenger nå er en fornuftig og enkelt å formatere bilder, uten å bruke hele dagen på det. 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. Dette kan oppnås ved en kombinasjon av to ting - en CSS regel å bli lagt til din style.css og noen HTML-kode som du må vikle rundt bildet.
Note that this cannot be used for images previously added, without editing them. Merk at denne ikke kan brukes for bilder lagt til tidligere, uten å redigere dem. The reason: while CSS styling rule affects all elements, HTML markup has to be manually added around each image. Grunnen: mens CSS regel påvirker alle elementer har HTML markup være manuelt lagt rundt hvert bilde.
Add this code to your style.css file, towards the end: Legg til denne koden til din style.css filen, mot slutten:
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. Koden ovenfor er styling regler som hjelper deg med å plassere bildet. To apply the styling, we need to use HTML around the image tag. Hvis du vil bruke styling, må vi bruke HTML rundt bildet taggen. The HTML code is as follows: HTML-koden er som følger:
<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. I koden bytter URL_TO_IMAGE med bildeurlen, ALT-teksten med hva du ønsker å vise når bildet ikke vises, og bildeteksten med bildeteksten du ønsker.
Alternatively, you can remove the caption, by using this code: Alternativt kan du fjerne bildetekst, ved å bruke denne koden:
<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! Husk å finjustere bildeteksten farge, størrelse og skrift til din smak og dine bilder vil rock!
Related reading Relaterte lesing
- Post codes to blog posts/comments with Postable Post-koder til blogginnlegg / kommentarer med Postable
- Top 12 ways to make your blog posts digg-friendly Topp 12 måter å gjøre blogginnleggene digg-vennlig
- What topics would you like to read more posts on? Hvilke temaer ønsker du å lese mer innlegg på?
- Do not forget http:// in WordPress posts Ikke glem http:// i WordPress stolpe
I see you're sharing some of your jewels! Jeg ser du deler noen av juveler! Thanks. Takk. Even when it looks basic it's not the same when you don't have a clue about what the CSS is. Selv når det ser grunnleggende det er ikke det samme når du ikke har en anelse om hva CSS er.
@TonNet: Welcome. @ TonNet: Velkommen. And just between the two of us, I have something to help you out in that matter – stay tuned Og bare mellom oss to, jeg har noe å hjelpe deg ut i den saks skyld - stay tuned
Noticed that the blog was down today – were you upgrading to 2.3? Merke at bloggen var nede i dag - var du oppgraderer til 2.3?
@Karthik: Yes, I upgraded to WP 2.3 – see my post about it and more @ Karthik: Ja, jeg oppgradert til WP 2.3 - se mitt innlegg om det og mer here her . . So, did you? Så gjorde du?
Hey Author , thats nice . Hei Forfatter, thats nice. but i think you miss a “DEMO” thing for this post . men jeg tror savner deg en "demo" ting for dette innlegget.