OBERZYJ TRZY NOWE MOTYWY!

Jak zmienić wygląd nagłówków i podtytułów w bloggerze?

Jak zmienić wygląd nagłówków i podtytułów w bloggerze?

Jak zmienić wygląd nagłówków i podtytułów w bloggerze? Niedawno pisałam, że warto w treści posta dodawać nagłówki i podtytuły. Czasem jednak domyślny wygląd tych elementów nie do końca nam odpowiada. Na szczęście w łatwy sposób można dostosować je do naszych preferencji i dziś pokażę Ci jak to zrobić.


We wpisie o Seo na bloggerze wspominałam o tym, by post dzielić na krótsze akapity i dodawać śródtytuły. Taki zabieg nie tylko ułatwia czytelnikom czytanie tekstu, lecz także pozytywnie wpływa na SEO (ale to pod warunkiem, że korzystasz właśnie z oznaczeń "nagłówek", "podtytuł" lub "mniejszy tytuł"). Jak oznaczyć tekst jako nagłówek opisałam w podlinkowanym wyżej wpisie, dziś z kolei chciałam pokazać jak zmienić wygląd tych elementów, tak by wszystko, było spójne z Twoim obecnym motywem i ładnie komponowało się z resztą posta.



Zacznijmy może od postaw. Nagłówki w poście (w kodzie) mają takie oznaczenia jak poniżej (od razu możesz też zobaczyć jak sformatowane są moje nagłówki i podtytuły):

h2 - Nagłówek

h3 - Podtytuł

h4 - Mniejszy tytuł




Jeśli nie wiesz jak te elementy prezentują się u Ciebie, a nie masz ich w żadnym poście i nie chcesz od razu ich umieszczać w tych już opublikowanych, to możesz utworzyć sobie stronę testową (zobacz: Jak utworzyć strony statyczne w bloggerze?) i tam dodać przykładowe teksty oznaczone jako nagłówek, podtytuł i mniejszy tytuł.



Jak zmienić wygląd podtytułów i nagłówków w bloggerze?


Żeby zmienić wygląd nagłówków i podtytułów musisz dodać nowy fragment kodu. Najłatwiej to zrobić w arkuszu CSS - to najbezpieczniejsza opcja dla osób, które mają małe pojęcie o kodzie i boją się, że coś nieoczekiwanego stanie się z szablonem.
Aby dodać ten kod wejdź w Panel bloga → Motyw → Dostosuj →  Zaawansowane →  Dodaj arkusz CSS.


Ale jaki kod dodać?

Wszystko zależy, który z elementów chcesz zmodyfikować i jakie zmiany chcesz wprowadzić. Powyżej masz nazwy selektorów przypisanych do konkretnego elementu. Jeśli chcesz zmienić wygląd nagłówka to modyfikowanym elementem będzie h2 (odpowiednio przy podtytule edytujemy h3, a przy mniejszym tytule h4).
Oprzyjmy więc nasz przykład na h2. Dodatkowo polecam dodać selektor .post-body - dzięki temu zmienimy nagłówki jedynie w sekcji posta, a nie na całej stronie.

Kod mógłby więc wyglądać np. tak:

.post-body h2 {
font-size:26px;
font-family:Playfair Display;
font-style:italic;
font-weight:bold;
text-transform:uppercase;
letter-spacing:1px;
text-align:center;
border-bottom:1px solid #000000;
padding-bottom:10px
}


Efekt końcowy:
Przykładowy nagłówek


Możesz wykorzystać wszystkie linijki kodu lub tylko te, które Cię interesują.
Poniżej omówię poszczególne możliwości:

font-size - odpowiada za wielkość elementu. Liczbę 26px możesz zastąpić swoją liczbą.

font-family - określa czcionkę tekstu. W tym miejscu możesz wybrać inną, która pasuje do Twojego motywu, np. Georgia, Times New Roman, Montserrat itd. Nazwy czcionek dostępnym w bloggerze znajdziesz np. w projektancie motywów. Niedługo przygotuję wpis jak dodać czcionkę niestandardową.

font-style - ten fragment określa czy tekst ma być pochylony (italic) czy normalny (normal). Jeśli Twój obecny nagłówek jest niepochylony i taki ma pozostać pomiń tą linijkę całkowicie.

font-weight - określa grubość tekstu. Do wyboru są dwie opcje:
  • bold - jeśli tekst ma być pogrubiony lub 
  • normal - domyślna grubość (i tutaj jeśli grubość domyślna, którą masz obecnie ci odpowiada to nie dodawaj w ogóle linijki font-weight)

text-transform - odpowiada za wielkość liter. I tak możesz wybrać między
  • uppercase (wszystkie litery duże), 
  • lowercase (wszystkie litery małe) lub  
  • capitalize (każda pierwsza litera wyrazu duża).

letter-spacing - tu określasz odstępy między znakami. Możesz zmienić 1px na wybraną wartość.

text-align - określa wyrównanie tekstu. Do wyboru masz:
  • left - wyrównanie do lewej (domyślnie)
  • right - wyrównanie do prawej
  • center - wyrównanie do środka
  • justify - wyjustowanie (nie polecam przy nagłówkach i podtytułach)

border-bottom - dodaje linię podkreślającą pod nagłówkiem
(możesz też użyć komendy border (ramka) lub border-left, border-right, border-top (linia z lewej strony, prawej lub nad tekstem)):
  • 1px - określa grubość linii, możesz zmienić wedle uznania (np. 5x by linia była gruba)
  • solid - w tym miejscu określamy wygląd linii 
    - solid - linia ciągła
    - dotted - linia kropkowana
    - dashed - linia przerywana
    - double - podwójna linia (min 4px)
  • #000000 - oznaczenie koloru (tu możesz wstawić kod HEX swojego koloru - przykładowe kolory znajdziesz tutaj)

padding-bottom - dodaje odstęp między nagłówkiem, a podkreśleniem. Możesz zmienić 10px na inną wielkość.
(jeśli używałaś border-left, border-right, border-top lub border, analogicznie dodajesz padding-left,padding-right,padding-top lub padding)


Jeśli chcesz by nagłówek miał obecną czcionkę, ale miał wielkość 32px i był pogrubiony, to kod będzie wyglądał następująco:

.post-body h2 {
font-size:32px;
font-weight:bold;
}

Efekt:
Przykładowy nagłówek


Wystarczy, że dodasz ten kod w arkuszu CSS i gotowe! Analogiczne postępujesz z h3 i h4 :)



Pamiętaj, że wszelkie zmiany dodane w arkuszu CSS czy kodzie są dopisane do Twojego obecnego motywu. Przy zmianie szablonu musisz je dodać na nowo.
Jeśli chcesz zachować swoje formatowania najlepiej zapisz je sobie na wszelki wypadek w notatniku.



Mam nadzieję, że instrukcja jest czytelna i łatwa do wprowadzenia. Oczywiście to nie wszystkie możliwości zmian, zdaję też  sobie sprawę, że nie każdy musi poruszać się w tym temacie swobodnie. Postanowiłam więc na grupie utworzyć specjalny post pod którym śmiało możecie zadawać pytania odnośnie tego zagadnienia :)


Brak komentarzy:

Prześlij komentarz

Jestem bardzo ciekawa Waszych opinii. Śmiało komentujcie. Konstruktywna krytyka mile widziana :)