Jak zaprezentować swoje pismo, aby błyszczało: 3 sztuczki stylizacji CSS

Opublikowany: 2022-03-22

Twoje pisanie jest centralnym punktem Twojego bloga.

Treść jest królem, prawda?

To właśnie przyciąga ludzi i sprawia, że ​​czytają Twojego bloga.

Ale równie ważne jest to, jak faktycznie prezentujesz swoje pisarstwo. To znaczy wizualnie.

Twoje treści mogą być świetne, ale jeśli komuś trudno je czytać, możesz tracić więcej czytelników, niż myślisz.

Słuchaj, nie jestem wyszkolonym pisarzem, ale jestem projektantem stron internetowych i wiem, co wygląda dobrze. A to, co zwykle wygląda dobrze, to nie tyle dekoracja i smak, co więcej o tym, co działa i co sprawia, że ​​rzeczy są łatwe do odczytania i zrozumienia.

Przez lata studiowałem różne sposoby wyświetlania treści w formie cyfrowej, więc chciałbym pokazać kilka szybkich i łatwych sposobów na ładną prezentację treści w postach na blogu z punktu widzenia projektanta stron internetowych.

Istnieje kilka sposobów, dzięki którym możesz szybko poprawić stylizację swojego bloga za pomocą odrobiny CSS (kaskadowe arkusze stylów), dzięki czemu Ty, autor, możesz zaprezentować swoje treści i maksymalnie ułatwić czytelnikom korzystanie z nich.

Dam ci kilka kodów przesuwania CSS, które możesz dodać do niestandardowego arkusza stylów i edytować według własnych upodobań. Postępuj zgodnie z instrukcjami, jak edytować CSS w swoim blogu, jeśli nie masz pewności, jak uzyskać dostęp do niestandardowego arkusza stylów swojego bloga.

Trzy sztuczki, aby stylizować treści, aby zaprezentować swoje pisanie

  1. Udekoruj swoje akapity

Aby upewnić się, że Twoje akapity są łatwe do odczytania, oto kilka wskazówek, o których warto pamiętać. Będziemy tutaj razem stylizować tag p (paragraf).

  • Wybierz czcionkę, która nie męczy oczu. Celuj w czcionkę szeryfową lub bezszeryfową, a nie odręczną.

Wybierz wagę, która nie jest zbyt cienka. Niektóre bardzo cienkie czcionki nie wyglądają zbyt dobrze w niektórych przeglądarkach i systemach operacyjnych (np. Mac lub PC), więc poproś innych, aby sprawdzili to za Ciebie i dali Ci kciuk w górę.

Jednocześnie wybierz czcionkę, która nie jest zbyt gruba. Chcesz, aby był wystarczająco kontrastowy z dowolnym pogrubionym tekstem.

Wybierając czcionkę, upewnij się, że używasz czcionki systemowej, czcionki przesłanej do plików bloga lub czcionki Google. Proponuję używać czcionek Google, ponieważ są one bezpłatne, mają największą różnorodność i są najłatwiejsze w użyciu. Aby uzyskać więcej informacji, sprawdź, jak używać fajnych czcionek na swoim blogu.

Po wybraniu czcionki przejdziesz do niestandardowego arkusza stylów i dodasz ten kod:

<pre>
P {
rodzina czcionek: WSTAW NAZWĘ CZCIONKI;
}
</pre>

  • Użyj rozmiaru czcionki, który jest łatwy do odczytania na ekranie o dowolnym rozmiarze. Sprawdź swojego bloga na telefonie i upewnij się, że tekst nie jest zbyt mały dla zmęczonych lub starszych oczu.

Dobry rozmiar akapitów to zwykle od 14 do 16 pikseli. Nie wszystkie czcionki wyświetlają się tak samo w tych samych rozmiarach, więc baw się nimi, aby zobaczyć, co wygląda najlepiej.

<pre>
P {
rodzina czcionek: WSTAW NAZWĘ CZCIONKI;
rozmiar czcionki: 16px;
}
</pre>

  • Użyj odpowiedniej wysokości linii (leading). Właściwe wysokości wierszy pomagają również w czytelności, ponieważ dają oddech Twoim akapitom. Prawidłowa wysokość wiersza to 1,5, czyli 1,5 raza wielkości tekstu (wysokość wiersza równa 2 byłaby z podwójnym odstępem).

<pre>
P {
rodzina czcionek: WSTAW NAZWĘ CZCIONKI;
rozmiar czcionki: 16px;
wysokość linii: 1,5;
}
</pre>

  • Unikaj czystego czarnego tekstu na białym. To trudne dla oczu. Zamiast tego wybierz ciemnoszary (podoba mi się #333333) dla swojej kopii, aby nieco zmniejszyć kontrast.

<pre>
P {
rodzina czcionek: WSTAW NAZWĘ CZCIONKI;
rozmiar czcionki: 16px;
wysokość linii: 1,5;
kolor: #333333;
}
</pre>

  • Unikaj wyrównywania akapitów do środka. Wyśrodkowanie kopii ciała wygląda amatorsko i utrudnia czytanie. Czemu? Za każdym razem, gdy twoje oko przesuwa się do nowej linii, musi zmagać się ze znalezieniem początku następnej, ponieważ nigdy nie znajduje się w tym samym miejscu. Zarezerwuj wyrównanie środka dla wierszy, podpisów lub krótkich fragmentów tekstu, który przyciąga uwagę i wybierz lewą stronę wyrównywanie lub uzasadnianie zwykłych akapitów. Wyjustowany tekst jest rozłożony tak, aby zarówno lewa, jak i prawa strona akapitu miały prostą krawędź.

<pre>
P {
rodzina czcionek: WSTAW NAZWĘ CZCIONKI;
rozmiar czcionki: 16px;
wysokość linii: 1,5;
kolor: #333333;
text-align: justuj;
}
</pre>

<pre>wyrównanie tekstu: do lewej; </pre> jest zachowaniem domyślnym i nie trzeba go określać, chyba że trzeba zastąpić poprzedni styl.

  • Na koniec dodaj spację. Będziesz potrzebować wystarczającej ilości odstępu między akapitami, aby uzyskać optymalną czytelność. Dobrą zasadą jest dodanie pod każdym akapitem marginesu równego około dwukrotności rozmiaru czcionki.

<pre>
P {
rodzina czcionek: WSTAW NAZWĘ CZCIONKI;
rozmiar czcionki: 16px;
wysokość linii: 1,5;
kolor: #333333;
text-align: justuj;
margines-dolny: 32px;
}
</pre>

  1. Użyj hierarchii

Używasz hierarchii, kiedy tworzysz zarys swoich postów za pomocą nagłówków i podtytułów.

Aby utworzyć wizualną hierarchię w swoich postach, stylizuj nagłówki i podtytuły, aby łatwo je rozróżnić. Oto kilka wskazówek:

  • Użyj tej samej czcionki we wszystkich nagłówkach w różnych rozmiarach.
  • Użyj czcionki łatwej do odczytania, takiej jak czcionka szeryfowa lub bezszeryfowa. Możesz zdecydować się na użycie tego samego kroju pisma, co kopia ciała, w grubszej grubości lub możesz wybrać inny krój, który ładnie kontrastuje z kopią ciała.
  • Ustaw nagłówki i podtytuły na pogrubienie lub większą wagę.
  • Użyj Typecast, aby bawić się różnymi czcionkami, rozmiarami i grubościami nagłówków i porównywać je z tekstem akapitu.

Oto przykład tego, co możesz wymyślić, aby zmienić rozmiar, jeśli twoje akapity są ustawione na 16 pikseli w rozmiarze czcionki. Następnie poszedłbyś stamtąd:

  • nagłówki h6 = 16px (zwykle taki sam rozmiar jak tekst akapitu, ale pogrubiony i w osobnym wierszu)
  • nagłówki h5 = 18px
  • nagłówki h4 = 22px
  • nagłówki h3 = 26px
  • nagłówki h2 = 30px
  • nagłówki h1 (tytuły Twoich postów na blogu) = 36px

Ponownie zagraj z Typecast, aby zobaczyć, co najlepiej wygląda w twoich oczach. Po wybraniu czcionek i rozmiarów, których chcesz użyć w nagłówkach, przejdź do niestandardowego arkusza stylów i dodaj ten kod CSS do wszystkich nagłówków:

<pre>
h1, h2, h3, h4, h5, h6 {
rodzina czcionek: WSTAW NAZWĘ CZCIONKI;
rozmiar czcionki: 36px;
grubość czcionki: pogrubiona;
}
</pre>

Następnie dodasz kilka nadpisań CSS, aby zmienić rozmiary dla każdego poziomu nagłówka:

<pre>
godz.2 {
rozmiar czcionki: 30px;
}

h3 {
rozmiar czcionki: 26px;
}

h4 {
rozmiar czcionki: 22px;
}

h5 {
rozmiar czcionki: 18px;
}

h6 {
rozmiar czcionki: 16px;
}
</pre>

  1. Użyj linków

Nie zmuszaj swoich czytelników do myślenia! Twoje linki powinny wyglądać jak linki, co oznacza, że ​​powinny być całkowicie oczywiste, że należy w nie kliknąć. Oto kilka sposobów, aby to zrobić:

  • Wybierz kolor linków, który kontrastuje ze zwykłym tekstem.
  • Zarezerwuj jeden kolor tylko dla swoich linków. Nie używaj tego samego koloru do nagłówków, podtytułów, tytułów widżetów paska bocznego ani żadnego innego tekstu.
  • Możesz jednak użyć tego koloru dla przycisków, jeśli chcesz, ponieważ są one również klikalnymi elementami.
  • Nie podkreślaj tekstu, który nie jest łączem, jest to mylące, ponieważ ludzie zwykle zakładają, że podkreślony tekst to łącze.

<pre>
a {
różowy kolor;
dekoracja tekstu: podkreślenie;
}
</pre>

Nadaj styl różnym stanom linków, aby jeszcze bardziej ułatwić czytelnikom ich rozróżnienie jako linki. Zmiana ich wyglądu, gdy użytkownik najedzie na nie kursorem, daje dodatkową wskazówkę, że jest to aktywny link.

<pre>
a:najedź {
kolor niebieski;
dekoracja tekstu: brak;
}
</pre>

Możesz także wybrać inny styl odwiedzanych linków, aby wskazać użytkownikom, że już odwiedzili dany link.

<pre>
a:odwiedzone {
kolor niebieski;
}
</pre>

Aby zaprezentować swoje pismo, aby świeciło, wystarczy kilka prostych zmian

To tylko kilka sztuczek, które pozwolą Ci zaprezentować Twoje teksty, aby były łatwe do odczytania, a tym samym wyróżnić Twoje treści!

W jaki inny sposób układasz posty na blogu, aby były czytelne dla użytkowników?

Czy chcesz dowiedzieć się więcej o tym, jak wykorzystać CSS, aby Twój blog był bardziej atrakcyjny dla czytelników i naprawdę prezentował swoje pisarstwo? Świetny! W takim razie chciałbym, abyś dołączył do mnie na bezpłatne szkolenie wideo na temat CSS. Wkrótce zaczyna się, więc zarejestruj się teraz.

Obraz dzięki uprzejmości Pixabay