Subscribe to RSS feed Εγγραφείτε στο RSS feed 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. Οι περισσότεροι bloggers να σας συμβουλεύσει να περιλαμβάνει εικόνες στο κατά ή γύρω από την έναρξη των θέσεων σας. 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. Συμπεριλαμβανομένης μιας εικόνας με ένα uninspiring <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 styling κανόνα να προστεθούν σε 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 styling επηρεάζει όλα τα στοιχεία, HTML markup πρέπει να προστεθεί το χέρι γύρω από κάθε εικόνα.
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; }
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. Για να εφαρμόσετε το στυλ, πρέπει να χρησιμοποιήσετε HTML γύρω από την ετικέτα εικόνας. 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 με το URL της εικόνας, του εναλλακτικού κειμένου με το τι θέλετε να δείτε, όταν η εικόνα δεν εμφανίζεται και ΣΑΣ CAPTION με τη λεζάντα που θέλετε.
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! Θυμηθείτε να τσίμπημα λεζάντα το χρώμα, το μέγεθος και η γραμματοσειρά με τις προτιμήσεις σας, και οι εικόνες σας θα rock!
Related reading Σχετική ανάγνωση
- Post codes to blog posts/comments with Postable Δημοσίευση κωδικούς στο blog θέσεων / παρατηρήσεις με Postable
- Top 12 ways to make your blog posts digg-friendly Top 12 τρόποι για να κάνετε θέσεις blog σας digg φιλικό
- What topics would you like to read more posts on? Ποια θέματα θα θέλατε να διαβάσετε περισσότερες θέσεις;
- Do not forget http:// in WordPress posts Μην ξεχνάτε http:// στο WordPress θέσεις
I see you're sharing some of your jewels! Βλέπω είστε συμφωνεί με ορισμένες από κοσμήματα σας! Thanks. Ευχαριστώ. Even when it looks basic it's not the same when you don't have a clue about what the CSS is. Ακόμη και όταν φαίνεται βασικά δεν είναι το ίδιο, όταν δεν έχουν ιδέα για το τι είναι το CSS.
@TonNet: Welcome. @ Tonnet: Καλώς ήρθατε. And just between the two of us, I have something to help you out in that matter – stay tuned Και μόνο μεταξύ των δυο μας, έχω κάτι να σας βοηθήσει σε αυτό το θέμα - stay tuned
Noticed that the blog was down today – were you upgrading to 2.3? Παρατήρησα ότι το blog ήταν κάτω σήμερα - ήταν εσείς αναβάθμιση σε 2,3;
@Karthik: Yes, I upgraded to WP 2.3 – see my post about it and more @ Karthik: Ναι, μπορώ να αναβαθμιστεί WP 2,3 - βλέπε θέση μου γι 'αυτό και here εδώ . . So, did you? Έτσι, το κάνατε;
Hey Author , thats nice . Hey Συγγραφέας, thats nice. but i think you miss a “DEMO” thing for this post . αλλά σκέφτομαι ότι χάνετε μια "DEMO" πράγμα για τη θέση αυτή.