> Web Tasarım > Mobil Sitede, Tarayıcının Sekme Rengi Nasıl Değiştirilir?

Google Chrome yeni çıkardığı bir özellik ile artık web siteleriyle daha uyumlu.  Google Chorome sekme rengi

güncellemesiyle kendisini vazgeçilmez kılmaya devam ediyor, mobil ziyaretlerde geçerli olan bu işlemde Google Chrome kendi sekme rengini sizin belirlediğiniz bir renk ile değiştirerek sitenizin bir parçasıymış gibi davranarak temanıza bir renk ahengi içerisinde açılarak ziyaretçilerinize güzel bir görünüm sunuyor.

Şu günlerde bu özellik bir çok güncel sitede aktif olarak ziyaretçilere sunuluyor. Tam olarak bu renk değişikliğinin nerede yapıldığını anlayabilmek yandaki resmin adres çubuğuna dikkat etmeniz yeterli.

Peki bu işlem nasıl yapılıyor

Sitenizde bulunan <head>….</head> tagları arasına;

<meta name="theme-color" content="#FFBA02" />

metasını eklemeniz yeterli olacaktır. Google Chrome bu metayı tanıyacak ve tarayıcınıza belirlediğiniz rengi yalnızca sizin siteniz için ayarlayacaktır. Renk belirlemek için meta da bulunan #FFBA02 renk kodunu değiştirmeniz yeterli.

Renk kodu bulamadınız mı?

Renk kodu çıkarıcı programlar ile bu işlemi çok zahmetsiz şekilde yapabilirsiniz. Colorpic ve Color Finder programlarıyla kodunu almak istediğiniz bölgenin üstüne tıkladıktan sonra size 4 farklı türden renk kodunu verecektir.  Biz buradan RGB HTMLkodunu kullanacağız. Yani ‘#’ işaretiyle başlayın kodu.

Aşağıdaki sitelerden web sitenize uygun veya istediğiniz renk kodunu kullanabilirsiniz.

 

WordPress’de kodun temaya yerleştirilmesi ve aktif edilmesi

WordPress admin paneline giriş yaptıktan sonra ‘Görünüm‘ sekmesinden ‘Düzenleyici‘ bölümüne giriş yapıyoruz. Karşınıza çıkan CSS düzenleme ekranında hiçbir değişiklik yapmadan, sağ tarafta listelenen tema dosyalarından “Tema üst bölümü (header.php)” dosyasına tıklıyoruz.

Uygulama öncesi karşınıza en üstte şöyle veya benzer bir kod çıkması gerekir;

<!DOCTYPE html>
<html>
<head>

yukarıdakine benzer bir kod yapısı yok ise endişelenmeye gerek yok. Mevcut sayfada CTRL+F yaparak <head> kodunu aratıyoruz. Bu etiketten sonraki satıra aşağıdaki kodu yerleştirip kaydediyoruz.

Uygulama sonrası;

<!DOCTYPE html>
<html>
<head>
<meta name="theme-color" content="#FFBA02"> <-- Kalınlaştırılmış kod eklenecek.

Kodumuzu yukarıda belirttiğimiz şekilde uyguladıktan sonra dosyamızı kaydediyoruz ve mobil cihazdan Chrome’a girerek test yapıyoruz. Not: #FFBA02 belirlediğimiz rengin kodudur arkadaşlar siz istediğiniz gibi değiştirebilirsiniz.

Renk kodu gözükmedi mi?

1- Web sitenizde önbellekleme (cache) eklentisi kullanıyor musunuz? Evet ise önbelleği temizleyip tekrar deneyin.

2- Sürekli girdiğiniz tarayıcıdan mı denediniz? Evet ise tarayıcı ayarlarından geçmişi silerek tekrar deneyin.

Bu yazıya yorum yapılmamış.

YORUMUNUZU YAPIN!