Yazınızı Parlatmak İçin Nasıl Sergilersiniz: 3 CSS Şekillendirme Püf Noktası

Yazınız, blogunuzun merkezinde yer alır.

İçerik kraldır değil mi?

İnsanları çeken ve blogunuzu okumaya devam etmelerini sağlayan şey budur.

Ancak aynı zamanda önemli olan şey, yazınızı gerçekte nasıl sergilediğinizdir. Görsel olarak yani.

İçeriğiniz harika olabilir, ancak birinin okuması zorsa, düşündüğünüzden daha fazla okuyucu kaybediyor olabilirsiniz.

Bak, eğitimli bir yazar değilim ama bir web tasarımcısıyım ve neyin iyi göründüğünü biliyorum. Ve genellikle iyi görünen şey dekorasyon ve tatla ilgili değil, daha çok neyin işe yaradığı ve neyin okunmasını ve anlaşılmasını kolaylaştırdığıdır.

Yıllardır içeriği dijital biçimde göstermenin çeşitli yolları üzerinde çalıştım, bu yüzden size içeriğinizin bir web tasarımcısının bakış açısından blog yazılarınızda güzel bir şekilde görüntülendiğinden emin olmanın bazı hızlı ve kolay yollarını göstermek istiyorum.

Küçük bir CSS (Basamaklı Stil Sayfaları) kullanarak blogunuzda hızlı stil ayarlamaları yapmanın birkaç yolu vardır, böylece yazar olarak siz içeriğinizi sergileyebilir ve okuyucularınızın bundan zevk almasını mümkün olduğunca kolaylaştırabilirsiniz.

Size özel stil sayfanıza ekleyebileceğiniz ve beğeninize göre düzenleyebileceğiniz birkaç CSS kaydırma kodu vereceğim. Blogunuzun özel stil sayfasına nasıl erişeceğinizden emin değilseniz, blogunuzdaki CSS'yi nasıl düzenleyeceğinizle ilgili talimatları izleyin.

Yazınızı Sergilemek İçin İçeriğinize Şekil Vermek İçin Üç Püf Noktası

1. Paragraflarınızı Güzelleştirin

Paragraflarınızın okunması kolay olduğundan emin olmak için burada akılda tutulması gereken birkaç ipucu var. Burada p (paragraf) etiketini birlikte şekillendireceğiz.

• Gözü yormayan bir yazı tipi seçin. El yazısı değil, serif veya sans serif yazı tipini hedefleyin.

Çok ince olmayan bir ağırlık seçin. Bazı çok ince yazı tipleri, belirli tarayıcılarda ve işletim sistemlerinde (örneğin, mac veya PC) çok iyi görünmeyebilir, bu nedenle insanlardan sizin için kontrol etmelerini ve olumlu bir değerlendirme yapmalarını isteyin.

Aynı zamanda çok kalın olmayan bir yazı tipi seçin. Herhangi bir kalın metinle yeterli kontrasta sahip olmasını istiyorsunuz.

Bir yazı tipi seçerken, bir sistem yazı tipi, blog dosyalarınıza yüklediğiniz bir yazı tipi veya bir Google yazı tipi kullandığınızdan emin olun. Ücretsiz oldukları, en çeşitliliğe sahip oldukları ve kullanımı en kolay oldukları için bir Google yazı tipi kullanmanızı öneririm. Daha fazla ayrıntı için blogunuzda havalı yazı tiplerini nasıl kullanacağınızı kontrol edin.

Yazı tipinizi seçtiğinizde, özel stil sayfanıza gidecek ve şu kodu ekleyeceksiniz:

<pre>
P {
yazı tipi ailesi: YAZI TİPİ ADI GİRİN;
}
</pre>

• Her boyuttaki ekranda okunması kolay bir yazı tipi boyutu kullanın. Blogunuzu bir telefondan kontrol edin ve metnin yorgun veya yaşlı gözler için çok küçük olmadığından emin olun.

Paragraflar için iyi bir boyut genellikle 14 ila 16 pikseldir. Tüm yazı tipleri aynı boyutlarda aynı şekilde görüntülenmez, bu nedenle en iyi görüneni görmek için onlarla oynayın.

<pre>
P {
yazı tipi ailesi: YAZI TİPİ ADI GİRİN;
yazı tipi boyutu: 16 piksel;
}
</pre>

• Uygun satır yükseklikleri (önde gelen) kullanın. Uygun satır yükseklikleri, paragraflarınıza nefes alma alanı sağladığı için okunabilirliğe de yardımcı olur. İyi bir satır yüksekliği 1.5'tir, diğer bir deyişle metnin boyutunun 1.5 katıdır (2 satır yüksekliği çift aralıklı olacaktır).

<pre>
P {
yazı tipi ailesi: YAZI TİPİ ADI GİRİN;
yazı tipi boyutu: 16 piksel;
satır yüksekliği: 1.5;
}
</pre>

• Beyaz üzerine saf siyah metinden kaçının. Gözlerde zor. Bunun yerine, kontrastı biraz azaltmak için kopyanız için koyu gri (#333333'ü seviyorum) tercih edin.

<pre>
P {
yazı tipi ailesi: YAZI TİPİ ADI GİRİN;
yazı tipi boyutu: 16 piksel;
satır yüksekliği: 1.5;
renk: #333333;
}
</pre>

• Paragrafları merkeze hizalamaktan kaçının. Vücut kopyanızı ortalamak amatör görünüyor ve okumayı zorlaştırıyor. Niye ya? Gözünüz yeni bir satıra her geçtiğinde, bir sonraki satırın başlangıcını bulmak için mücadele etmek zorundadır çünkü hiçbir zaman aynı noktada olmaz. normal paragraflarınızı hizalama veya doğrulama. Yaslanmış metin, paragrafın hem sol hem de sağ kenarları düz bir kenara sahip olacak şekilde aralıklıdır.

<pre>
P {
yazı tipi ailesi: YAZI TİPİ ADI GİRİN;
yazı tipi boyutu: 16 piksel;
satır yüksekliği: 1.5;
renk: #333333;
metin hizalama: yasla;
}
</pre>

<pre>metin hizalama: sola; </pre> varsayılan davranıştır ve önceki bir stili geçersiz kılmanız gerekmedikçe belirtilmesi gerekmez.

• Son olarak, boşluk ekleyin. Optimum okunabilirlik için paragraflarınız arasında yeterli boşluk olmasını isteyeceksiniz. İyi bir kural, her paragrafın altına yazı tipi boyutunuzun yaklaşık iki katına eşit bir kenar boşluğu eklemektir.

<pre>
P {
yazı tipi ailesi: YAZI TİPİ ADI GİRİN;
yazı tipi boyutu: 16 piksel;
satır yüksekliği: 1.5;
renk: #333333;
metin hizalama: yasla;
kenar boşluğu-alt: 32px;
}
</pre>

2. Hiyerarşiyi Kullan

Başlıkları ve alt başlıkları kullanarak gönderilerinizi özetlerken hiyerarşi kullanırsınız.

Gönderilerinizde görsel hiyerarşi oluşturmak için başlıklarınızı ve alt başlıklarınızı, aralarında ayrım yapmak kolay olacak şekilde şekillendirin. İşte birkaç ipucu:

• Farklı boyutlardaki tüm başlıklarınız için aynı yazı tipini kullanın.
• Serif veya sans serif yazı tipi gibi okunması kolay bir yazı tipi kullanın. Gövde kopyanızla aynı yazı tipini daha kalın bir ağırlıkta kullanmayı tercih edebilir veya gövde kopyanızla hoş bir kontrast oluşturan farklı bir yazı tipi seçebilirsiniz.
• Başlıkları ve alt başlıkları kalın veya daha ağır olacak şekilde ayarlayın.
• Başlıklarınız için değişen yazı tipleri, boyutlar ve ağırlıklarla oynamak ve bunları paragraf metninizle karşılaştırmak için Typecast'i kullanın.

Paragraflarınız yazı tipi boyutunda 16 piksele ayarlanmışsa, boyutlandırma için neler bulabileceğinize bir örnek. Daha sonra oradan yukarı çıkarsınız:

• h6 başlıklar = 16 piksel (genellikle paragraf metniyle aynı boyutta, ancak kalın ve kendi satırlarında)
• h5 başlıkları = 18 piksel
• h4 başlıkları = 22 piksel
• h3 başlıkları = 26 piksel
• h2 başlıkları = 30 piksel
• h1 başlıkları (blog gönderisi başlıklarınız) = 36px

Yine, gözünüze en iyi görüneni görmek için Typecast ile oynayın. Başlıklarınız için kullanmak istediğiniz yazı tiplerine ve boyutlarına karar verdikten sonra, özel stil sayfanıza gidip tüm başlıklarınız için bu CSS'yi eklemek isteyeceksiniz:

<pre>
h1, h2, h3, h4, h5, h6 {
yazı tipi ailesi: YAZI TİPİ ADI GİRİN;
yazı tipi boyutu: 36 piksel;
yazı tipi ağırlığı: kalın;
}
</pre>

Ardından, yalnızca her bir başlık düzeyi için boyutları değiştirmek için bazı CSS geçersiz kılmaları ekleyeceksiniz:

<pre>
h2 {
yazı tipi boyutu: 30 piksel;
}

h3 {
yazı tipi boyutu: 26 piksel;
}

h4 {
yazı tipi boyutu: 22 piksel;
}

h5 {
yazı tipi boyutu: 18 piksel;
}

h6 {
yazı tipi boyutu: 16 piksel;
}
</pre>

3. Bağlantıları Kullan

Okurlarınızı düşündürmeyin! Bağlantılarınız bağlantı gibi görünmelidir, yani tıklanacak bir şey oldukları tamamen açık olmalıdır. İşte bunu yapmanın birkaç yolu:

• Bağlantılarınız için normal metninizden farklı bir renk seçin.
• Sadece bağlantılarınız için bir renk ayırın. Başlıklar, alt başlıklar, kenar çubuğu widget başlıkları veya başka herhangi bir metin için aynı rengi kullanmayın.
• Ancak, isterseniz bu rengi düğmeler için de kullanabilirsiniz çünkü bunlar da tıklanabilir öğelerdir.
• Bağlantı olmayan metnin altını çizmeyin, kafa karıştırıcıdır çünkü insanlar genellikle altı çizili metnin bir bağlantı olduğunu varsayar.

<pre>
a {
pembe renk;
metin-dekorasyon: altı çizili;
}
</pre>

Okuyucularınızın bunları bağlantı olarak ayırt etmesine yardımcı olmak için çeşitli bağlantı durumlarını biçimlendirin. Bir kullanıcı üzerlerine geldiğinde görünümlerini değiştirmeleri, bunun aktif bir bağlantı olduğuna dair ek gösterge sağlar.

<pre>
a: fareyle üzerine gelin {
renk: mavi;
metin-dekorasyon: yok;
}
</pre>

Kullanıcılara belirli bir bağlantıyı zaten ziyaret ettiklerini belirtmek için ziyaret ettiğiniz bağlantıların stilini farklı bir şekilde belirlemeyi de seçebilirsiniz.

<pre>
a:ziyaret edilen {
renk: mavi;
}
</pre>

Yazınızı Göstererek Parlamasını Sağlamak Sadece Birkaç Basit Düzenleme Yapıyor

Bunlar, yazınızı kolayca okunabilir hale getirmek ve bu nedenle içeriğinizin öne çıkmasına yardımcı olmak için yazınızı sergilemek için yalnızca birkaç püf noktasıdır!

Kullanıcılarınız için kolayca okunabilir hale getirmek için blog gönderilerinizi başka hangi yollarla düzenlersiniz?

Blogunuzu okuyucularınız için daha çekici hale getirmek ve yazınızı gerçekten sergilemek için CSS'den nasıl yararlanabileceğiniz hakkında daha fazla bilgi edinmek ister misiniz? Mükemmel! O zaman CSS ile ilgili ücretsiz bir video eğitimi için bana katılmanızı çok isterim. Yakında başlıyor, şimdi kaydolun.

Resim, Pixabay'in izniyle