Uwaga: Poniższy artykuł pomoże Ci w: Jak powiększyć literę pierwszego akapitu w Bloggerze (styl magazynu)
Nasza strona jest obsługiwana przez naszych użytkowników. Czasami uzyskujemy linki partnerskie, gdy klikasz linki partnerskie na naszej stronie internetowej
Skontaktuj się z nami w sprawie pytań
Dodatkowa stylizacja to zawsze dobry sposób na dostosowanie bloga za pomocą prostych, ale unikalnych funkcji.
Stylizacja tekstu Twoich postów jest dość łatwa do wykonania, ale niektóre rzeczy wymagają trochę dodatkowej wiedzy.
Otrzymałem pytanie od czytelnika, jak powiększyć pierwszą literę pierwszego akapitu i nadać jej styl, tak jak w czasopismach, więc pomyślałem, że pomogę!
Q:
Technika lub styl nazywa się a kapsel.
Można to zrobić za pomocą CSS i dostosować, jak chcesz.
Inicjały zwracają uwagę na akapit i mają bardziej charakter redakcyjny lub starej książki.
Aby uzyskać taki wygląd w Bloggerze, najpierw utworzymy podstawowy styl, który będzie wyglądał mniej więcej tak:
Krok 1 – Przejdź do sekcji Szablony na pulpicie nawigacyjnym Bloggera, a następnie wybierz opcję Edytuj kod HTML.
Kliknij wewnątrz pola tekstowego i naciśnij klawisze CTRL i F (lub CMD i F na komputerze Mac), aby otworzyć pole wyszukiwania w górnym rogu. Szukaj:
i naciśnij enter. Powinien znaleźć pierwszą instancję, ale dotyczy to widoku mobilnego. Naciśnij ponownie Enter, aby przejść do drugiej instancji.
Krok 2 – Tuż przed i po
Krok 3– Zaraz pod tym drugim wystąpieniem elementu
Krok 4 – Teraz odwiedź Szablon > Dostosuj i wejdź do sekcji CSS (Zaawansowane > Dodaj CSS). Tutaj będziemy stylizować literę.
W polu tekstowym CSS dodaj następujący kod:
.post-body p.first:first-child:first-letter { float:left; wypełnienie: 5 pikseli; rozmiar czcionki: 50px; rodzina czcionek: Georgia; waga czcionki: pogrubiona; przekształcanie tekstu:wielkie litery; }
Możesz zmienić czerwone elementy, aby odzwierciedlić żądany rozmiar czcionki i nazwę czcionki.
Zmiany powinny pojawić się w sekcji podglądu i powinny wyglądać jak podgląd powyżej.
Jeśli nie chcesz dodać dodatkowej stylizacji, gotowe!
Dodatkowa stylizacja
Spróbujmy czegoś innego. Wyróżnijmy literę kolorem tła i zaokrąglonymi rogami:
CSS dla tego stylu to:
.post-body p.first:first-child:first-letter { float:left; wypełnienie: 5 pikseli; rozmiar czcionki: 50px; rodzina czcionek: Georgia; waga czcionki: pogrubiona; przekształcanie tekstu:wielkie litery; kolor tła:#cccccc; kolor:#ffffff; promień obramowania: 5px; prawy margines: 5 pikseli; }
Po raz kolejny możesz zaktualizować elementy zaznaczone na czerwono.
Kolor to twój kolor czcionki i promień granicy to rozmiar zaokrąglonych rogów (wskazówka: spróbuj zmienić promień obramowania na 20 pikseli, aby zobaczyć, co się stanie!).
Możesz swobodnie bawić się różnymi stylami i pomysłami CSS, aby dopasować swój własny szablon!
