WordPress Websitenizi Düzenlemenize Yardımcı 5 CSS Kod Parçası

CSS en başta biraz kafa karıştırsa bile, üzerine düşüldüğünde kolaylıkla öğrenebileceğiniz bir kodlama dilidir. CSS öğrenmenin en güzel yolu ise bu dilin kurallarını genel olarak öğrendikten sonra, sürekli CSS kod parçaları üzerinde oynamalar yaparak (tecrübe ederek) öğrenme yoludur.

Bu yazımda CSS’in en temel bazı özelliklerinden bahsettikten sonra WordPress websitelerinizi düzenlemenize yardımcı olabilecek 5 CSS Kod parçasını ve nasıl çalıştıklarını sizlerle paylaşacağım.

css kod parçası

CSS Nedir ? CSS Kod Parçası Ne İşe Yarar?

CSS’in açılımı Cascading Style Sheet’tir. Peki bu ne anlama gelir ?

HTML’i websitenizin iskeleti olarak düşünün. CSS ise bu evin boyama işinin yapılmasını sağlayan işlemdir. Evinizi ne zaman boyarsanız, evin görünününde değiştiğini bilirsiniz. CSS sayesinde de websitenizin görünümünü, renklerini, yazı tiplerini ve daha pek çok tasarımsal özelliğini değiştirebilirsiniz. Peki evinizi ne renge boyarsanız, nasıl süslerseniz süsleyin iskeletinde bir değişme olur mu? Tabikide hayır. İşte CSS’i aynen böyle düşünmelisiniz. CSS bir websitesinin ana iskeletini değil, daha çok tasarımsal yüzünü düzenlemeniz için kullanılan bir dildir.

Her ev boyandığı gibi, her WordPress temasıda CSS kullanır. Çeşitli CSS kod parçaları ile WordPress websitenizin görünümünde değişiklikler yapmanız mümkündür.

Yazı Tipinizi Değiştirmek ve CSS Kodlarını Yazmak İçin Ufak Bir Ders

Genesis Framework tarzı bir tema ile çalışıyorsanız, yazı tipinizi değiştirmek için CSS’e ihtiyaç duyarsınız. Fakat korkmayın. Bu işlemi yapmak gerçekten kolay.

CSS kodları ile sitenizde düzenleme yapmak için CSS dosyalarınızı, Jetpack’in Özel CSS ayarlarını veya herhangi bir başka eklentiyi de kullanabilirsiniz. Bu yardımcı programlar websitenizde varolan CSS ayarlarının yerini, yeni yazacağınız kodların almasını sağlarlar. Yani temanızın stil dosyalarında bir yazının rengi kırmızı iken, bu eklentiler üzerinde yazdığınız kod mavi ise, bu yazının rengi mavi olacaktır.

Yazı tipinizi değiştirirken, hangi alanda yazı tipi değişikliği yapmanız gerektiğine karar vermelisiniz.

WordPress’te 7 ana alanda yazı tipi değiştirebilirsiniz:

  • 6 Farklı Başlık Tipi
  • Genel (body) Yazı Tipi

Değiştirmeniz gereken alanların etiketleri oldukça basittir. Örneğin “Başlık 1” ögelerinde değişiklik yapmak istiyorsanız h1, “Başlık 5” ögelerinde değişiklik yapmak istiyorsanız h5 etiketini kullanmanız gerekmektedir.

Aşağıda CSS kodu ile “Başlık 5” yazı stilini değiştirdiğiniz örnek bir kod bulunmaktadır:

h5 { font-family: 'Georgia'; }

Evet, gördüğünüz gibi oldukça basit. Yukarıdaki kodu kopyalayıp, kendi CSS ayarlarınıza yapıştırarak kullanabilirsiniz. Fakat, bu konuyu daha iyi anlamanızın daha doğru olduğunu düşünüyorum. Birazcık işin derinine inelim.

Kodumuzda (h1) yazan ilk bölüm değiştirmek istediğiniz ögedir. Bu sembol ({ ) kodunuzu girdiğiniz bölümü açar ve bu sembol ise  ( } ) kapatır.

Aşağıda yazı stilinizi yani fontunuzu değiştirmek için kullanılan başka bir CSS örneğini inceleyebilirsiniz:

body {font-family: 'Arial'; }

Elementimizi h5’ten body’e çevirerek Stil dosyamıza şimdi “websitenizin temel fontunun” yani yazılarınızın Arial fontunda olması gerektiğini söyledik.

Oldukça basit değil mi?

Not: Eğer temanız Google Fontlarını destekliyorsa, bu fontların isimlerini de CSS’de kodlarınıza ekleyerek kullanabilirsiniz.

Font Rengini Değiştirmek

Bu CSS ipucunu öğrendikten sonra sitenizde yer alan her yazının rengini değiştirebilirsiniz. Önceki başlıkta yer alan kodlar gibi, renk değiştirmek içinde sadece ufak bir kod parçasına ihtiyaç duyarız.

Örnek olarak “Başlık 2” ile yazılmış yazıların rengini değiştirelim:

h2 { color: #4f4f4f; }

Dikkat ederseniz şimdiki konumuz yani değiştirmek istediğimiz eleman h2 ve önceki kodlardaki gibi ({}) bu iki sembolün arasında kodumuz bulunuyor. Yazıların fontunu çağıran sınıf “font-family” iken, rengini çağıran CSS sınıfı color’dur.

Not: Yazı renklerininin RGB kodlarını veya CSS üzerinde hangi kelime ile çağırabileceğinizin yer aldığı bu listeyi inceleyebilirsiniz.

Bir diğer dikkat etmeniz gereken nokta ise font’da kullandığımız (‘ ‘) sembollerini renk belirlerken kullanmıyoruz.

Font ve renk değiştirmeyi öğrendiğinize göre, şimdi ufak bir ipucu ile işlerinizi daha kolay hale getirelim. Aynı elemente farklı değişiklikler yaparken, CSS üzerinde tek bir kod parçası içinde düzenleme yapabiliyoruz. Örneğin sayfamızın body kısmının hem fontunu hemde renklerini değiştireceksek aşağıdaki kodu yazıyoruz:

h2 { font-family: 'Roboto'; color: #4f4f4f; }

Yukarıdaki örnekte iki farklı CSS kodunu tek bir element üzerinde uyguladım. Bir elementte birden çok değişiklik yaparken kod parçalarının sonuna (;) sembolunu koymanız yeterlidir.

Arka Plan Rengi Değiştirmek ve Hiç Bilmediğiniz Bir Tarayıcı Aracı

CSS kod parçası kullanarak websitenizdeki herhangi bir ögenin rengini değiştirmek oldukça basittir. Tek bilmeniz gereken elementin ne olduğudur.

Pek çok tasarımcının – ben dahil – kullandığı İncele Bölümü hakkında da biraz bahsedeyim. Eğer websitenizde değiştirmek istediğiniz kısmın hangi elemente bağlı olduğunu bilmiyorsanız, incele bölümünü kullanarak bunu rahatlıkla bulabilirsiniz.

Bu işlemi yapabilmek için websitenizde ilgili alanda sağ tıklayıp, en alt seçenekte yer alan İncele butonuna basmanız yeterlidir.

Örneğin bir websitesinde header kısmınızın arkaplan rengini değiştirmek istiyorsunuz. Headerınızın üstüne gelip inceleye bastıktan sonra gerekli element adını bulabilirsiniz. Daha sonrasında ise aşağıdaki css kod parçası örneğinde olduğu gibi arkaplan rengini değiştirebilirsiniz:

#benim-headerim { background-color: #D65050; }

Stil dosyamızda değiştirmek istediğimiz bölümün “benim-headerim” ne olduğunu belirttik, daha sonrasında ise (background-color) kodunu kullanarak arkaplan rengimizi RGB değerleri #D65050 olan renge çevirdik.

Bu örnekte olduğu gibi websitenizde bulunan herhangi bir kısmın üzerinde değişiklik yapmanız mümkündür. Kafanız karışıyorsa, Google Chrome’un İNCELEME aracını kullabilirsiniz.

Google İnceleme Aracının bir diğer harika özelliği ise gerçek zamanlı değişiklikler yapmanıza izin vermesidir. Bu bölüme giriş yaptıktan sonra “Websitenizde kaydedilmeyen, sadece nasıl bir değişiklik olacağını gösterecek şekilde” web siteniz üzerinde oynamalar yapabilirsiniz.

Float Özelliği

Bazen website menünüzün veya sidebarda bulunan bileşenlerinizin farklı bir şekilde yerleşmesini isteyebilirsiniz. Mesela solda bulunan bir menü ögesini alıp en sağa koymak isteyebilirsiniz.

Bunu yapabilmek için CSS üzerinde Float özelliğini kullanmanız yeterlidir. Bir önceki adımda anlattığımız İnceleme aracında yer değişikliğini istediğiniz ögenin, mesela bir menü ögesinin yerini soldan sağa almak isteyebilirsiniz.

Bunu başarbilmek için aşağıdaki kodu kullanabilirsiniz:

#menu-ogesi-1 { background-color: #D65050;  float: right;}

Bu işlemin oldukça basit olduğunda hem fikiriz değil mi? Eğer CSS hakkında sormak istediğiniz bir soru varsa, yorumlar kısmından bana sorularınızı yöneltebilirsiniz.

Eğer bir ögeyi sola yaslamak istiyorsanız “right” özelliği yerine “left” özelliğini kullanabilirsiniz. CSS Properties listesini kontrol ederek background-color, float veya font-family ile neleri kullanabileceğinize göz atabilirsiniz. Bu bir CSS dersi olmadığı için, burada tüm listeleri ve özellikleri anlatmıyorum. CSS çok büyük bir dünyadır fakat öğrenmesi oldukça kolaydır.

Yazıları Hizalandırmak

Yazılarınızı hizalama işlemini WordPress’te yeni bir yazı eklerken yapabilirsiniz, evet. Fakat bileşen yazılarını veya menü yazılarını hizalamak isterseniz nasıl yapacaksınız ?

Tabiki CSS kod parçalarını kullanarak. CSS kod parçası çalışmalarını kullanarak kolay bir biçimde istediğiniz yazıyı hizalayabilirsiniz.

Örneğin aşağıdaki kod parçasında bir WordPress websitesindeki bileşenlerin yazılarını ortaya hizalamayı gösterdim.

.footer-widgets .widget-title { text-align: center; }

Değiştirmek istediğiniz yerin adı sizin temanızda farklı olabilir. Burada önemli olan ana fikri öğrenmenizdir.

İşte bukadar!  5 çok basit CSS kod parçası ile WordPress temanızda değişiklikler yapmanız oldukça kolay. CSS dilini öğrenmek başta biraz kafa karıştırabilir, fakat web tasarım ve geliştirme ile uğraşan herkesin CSS bilmesi çok önemlidir. Bunun yanında basit bir blog yönetiyorsanız, temel derecede CSS bilmeniz sizin için faydalı olacaktır. Bu şekilde websitenizdeki ufak değişiklikler için her seferinde CSS yazabilen insanları tutmanız gerekmez.

Umarım bu yazım sizler için faydalı olmuştur. Eğer sizinde eklemek istedikleriniz, sormak istedikleriniz var ise yorumlar kısmında herkese yanıt vermek için sabırsızlanıyorum.

Yazar
Yasin Atagün

Kimler Neler Demiş?

avatar
  Takip Et  
Bildir