28 Şub, 2017

" Yazı içinde Renkli başlık "

Merhaba Dostlar. şimdi Yazı içinde Renkli başlık eklemeyi anlatacağım 🙂

Bu yazı aslında aklımda hiç olmamasına rağmen değerli Sadri Ercan‘ın bu özelliği siteye eklenti ile getirmesinin ardından daha basit ve daha pratik yöntem ile yapmayı bulmuş olmam nedeniyle yazzdım :))))

Arkadaşın yazısı ve detaylı anlatımı ve güzel makalesi için ve herşeyden önemlisi yazı yazmam için bir fikir vermesinden dolayı teşekkürü borç bilirim.

Konuya gelecek olursak ben bu yöntemi çok basit şekilde çözdüm, sizin nasıl yapacağınız konusunda kişisel düşünce ve makale yazzım şekliniz önemli yani buna siz karar vereceksiniz.

Ben sadece deneme amaçlı yaptığım için h1 etiketine css ile atamayı yaptım ancak fark etmediğim birşey vardı 🙂 site içinde h1 sadece yazzı başlığında kullanılmamıştı 🙂 yani sitenin değişik kısımları mavi ile kapsanmış bir başlık alanıydı :))))

Çözüm ise diğer h1’lerden yazı başlığını ayırmak olduğunu fark edince yazı başlığını article içine alarak hem SEO elverişli bir yazı kaynağı oluşturdum (Goolge yazıyı makale olarak görsün html5’in faydaları) hemde diğer h1 etiketlerinden yazı başlığını ayırdım.

Son olarak WordPress’a yeni gelen harici css özelliği ile bu işlemi tamamladım ve alttaki kodu kullanarak yapabilirsiniz.

 

<article>
   <h1>
Bu alan başlık olacak alandır
   </h1>
</article>

// Üstteki gibi single.php içinde bir alan oluşturabilirsiniz.

article h1{
    padding: 10px;
    background:#e64243;
    margin: 10px 0px 30px 0px;
    border-left: 6px solid #0193cb;
    display: block;
    color: #ffffff !important;
    text-transform: capitalize;
    width: inherit;
}

Burada şöyle bir durum var ben h1 için kullandım ve özellikle belirtmem gerekiyor ki siz bunu ara başlık için yapacaksanız h3-h4-h5 için yapmanızı öneririm aynı şekilde bir kapsayıcı içine alarak diğerlerinden ayırabilirsiniz ama dediğim gibi arabaşlık olacak ise ona da gerek olacağını zannetmiyorum tema yapımcısı görsel yüzde pek h3-4-5 kullanmaz 🙂

Arkadaşlar Yazı içinde Renkli başlık ekleme olayı bu kadar, ancak ben bu şekilde uğraşamam eklenti ile hallederim derseniz Sadri’nin yazısını kesinlikle okumanızı öneririm gayet açık ve net anlatım yapmış.

Ve unutmadan ekleyeyim arkadaşlar Sadri reyiz’e ayıp etmek bize yakışmaz yazımı okusun tasarımdan kaldıracağım benim temaya gitmedi u özellik :)))

Saygılar Sevgiler..

Bu yazı 1946 Defa okundu, Beğendiyseniz üstteki benzer yazıları okumanızı öneririm, isterseniz site içinde farklı içerikleri arama yapabilirsiniz.

Ali Çömez / Slaweally

Kaldırımda yürürken beyaz çizgilere basmamaya çalışan, Sabah yüzünü yıkarken dirseklerinden su sızmasından nefret eden, Dönerle ayranı aynı anda bitirebilen, son dakikada otobüsü kaçırsada grur yapıp arkasından koşmayan... bir insanım :)

  1. arslan türk dedi ki:

    Denemeye çalışacağım.

  2. arslan türk dedi ki:

    Css ile oynayarak yaptım. Ali, bu yorum gönderirken “Slaweally” yazıyoruz. Bu soruyu nasıl yapıyoruz yorum kısmına? Spam mesaj gönderiminin bir şekil önüne geçeriz.

  3. Ee bu kadar basit miymiş bu? Eklenti kullanmadan, siteyi yormadan yapabiliyor olmak güzel, teşekkür ederim.

  4. sadri ercan dedi ki:

    Ali eline koluna sağlık:)

  5. Gökhan dedi ki:

    Verdiğiniz bilgi ile işimi biraz daha kolaylaştırdınız. Teşekkürler, eline sağlık.

  6. Apak dedi ki:

    Ellerinize sağlık gayet güzel ve açıklayıcı bir yazı olmuş.

  7. adblue iptali dedi ki:

    Örnek görüntüde koysaydınız iyi olurdu ☺

  8. Mobil Sohbet dedi ki:

    eline sağlık. Verdiğin bilgi çok işime yaradı.

  9. DBACK dedi ki:

    Anlattığınız durum sadece bir yazıdaki rengi değiştirmek için mi yoksa tüm h1 li başlıkların rengini değiştirmek için mi ?

    • Ali Çömez dedi ki:

      Tüm h1 için etkilidir tabi bunu siz kendinize göre değiştirin h2-h3 yapabilirsiniz. sitedeki tüm etiketi etkileyecektir (h1-h2-h3 hangisini eklediyseniz.)

  10. Merhaba, hocam teşekkürler bilgilendirme için.

    Uzun süredir aradığım birşeydi hemen deniyorum: )

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Spam olmadığınızı doğrulamak için aşağıdaki alana slaweally yazın