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.

ZOBACZ POST:  SEO na bloggerze {czyli co zrobić, żeby wpis był lepiej widoczny w wyszukiwarce?}

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 :)

ZOBACZ TEŻ POST:  Jak zmienić wygląd wypuntkowań w bloggerze?

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 :)