Punktory są szczególnie skutecznym sposobem przekazywania pewnych informacji w Internecie. Oczywiście mogą one również bardzo dobrze drukować, ale jak wszyscy wiemy, czytanie w Internecie jest inne. Ludzie skanują więcej. Oczekują bardziej graficznej prezentacji tekstu. A ich oczy łatwiej się męczą.
Gdybyśmy mieli zrobić szybką listę korzyści płynących z podpunktów, moglibyśmy powiedzieć, że …
- Ułatwiają czytanie
- Break up copy
- Narysuj oko skanerów
- Podkreśl jednoczącą ideę między punktami
- Szybko komunikuj pomysły
I tak punkty punktowe są ważne, zwłaszcza w tekstach ciężkich postów. Ważne jest również, aby odpowiednio dobrać stylizację punktorów. Niektórzy mogą z tego szydzić, ale każdy pisarz, któremu zależy na swoich słowach, wie, że gdy lista punktowana nie wygląda dobrze, wydaje się, że odbiega od samej treści.
Poniżej omówimy kilka podstawowych zasad, których możesz użyć, aby Twoje listy punktowane wyglądały tak, jak chcesz.
Oto, co omówimy w tym artykule:
Tworzenie motywu potomnego
Podczas wprowadzania zmian do motywu najlepiej jest użyć motywu podrzędnego. W ten sposób, jeśli twój motyw zostanie zaktualizowany, nie stracisz swoich zmian. I tak właśnie będziemy używać tego samouczka (motyw potomny domyślnego motywu Twenty Twelve WordPress). Tutaj dowiesz się, jak stworzyć motyw potomny.
Uwaga: Niektóre bardziej zaawansowane motywy mogą już mieć specjalny arkusz stylów włączony do motywu dostosowań. Jeśli tworzenie motywu podrzędnego wydaje się nie działać dla ciebie, możesz poszukać rozwiązania online lub z autorem motywu. Jeśli masz problemy z tworzeniem motywu podrzędnego z konkretnym motywem, inni prawdopodobnie mają te same problemy.
Temat Bullet Points Style
Styl Twoich punktów jest kontrolowany przez Twój motyw. Aby zmienić ten styl, musisz wiedzieć, w jaki sposób szablon odwołuje się do nich w arkuszu stylów.
Styl dla Twoich punktów będzie podsekcją stylu twojej głównej treści. Wiele tematów prawdopodobnie klasyfikuje ogólną treść jako ” entry-content.”Innymi słowy, stworzą” klasę “o nazwie” entry-content”, a następnie odwołają się do tej nazwy (entry-content) w arkuszu stylów.
Ale istnieje również szansa, że Twój motyw może nadać mu inną nazwę, więc pierwszą rzeczą, którą powinieneś zrobić, to dowiedzieć się, jaką “klasę” Twój motyw przypisuje do treści na poście.
Znajdowanie nazwy klasy zawartości
Aby znaleźć nazwę klasy dla treści, możesz po prostu przejść do Postu, który już opublikowałeś, a następnie spojrzeć na kod tej strony. Możesz to zrobić, klikając prawym przyciskiem myszy na stronie, a następnie klikając “Wyświetl źródło strony” lub “wyświetl źródło” itp.
Następnie wybierz kilka pierwszych słów ze swojego postu i Wyszukaj kod tych słowa. Kiedy je znajdziesz, powinieneś również zobaczyć jakiś kod niedaleko od nich, który powie Ci, jaką klasę Twój motyw nadał treści na stronie.
Zrobiłem to w domyślnym motywie Twenty Twelve i znalazłem klasę ” entry-content.”Jak wspomniano, twój może być taki sam, ale może być również inny. Poszukaj tagu “class” wewnątrz div u góry treści.
* Uwaga: istnieje szansa, że Twój motyw jest o wiele bardziej złożony niż powyższy, i możesz znaleźć kilka klas. Jeśli tak, po prostu próbuj każdego z nich, aż znajdziesz ten, który działa dla ciebie.
Kod HTML dla podpunktów
Lista punktów w WordPress zostanie utworzona za pomocą dwóch różnych tagów.
Najpierw jest
- tag. “UL” oznacza “lista nieuporządkowana”, w przeciwieństwie do
- – co oznacza ” uporządkowaną listę.”Lista nieuporządkowana nie będzie numerowana (będzie zawierać podpunkty). Lista uporządkowana to lista numerowana.
Następny tag na liście wypunktowanej to
Jeśli utworzysz listę punktową w edytorze WordPress, a następnie przełączysz się na widok “tekst”, możesz zobaczyć te dwa tagi w akcji.
Stylizacja punktorów z CSS
OK, teraz zabawna część-właściwie Dostosowywanie listy punktorów. Jeśli jeszcze tego nie zrobiłeś, pamiętaj o aktywacji motywu podrzędnego. Teraz musisz przejść do arkusza stylów w swoim motywie podrzędnym. (Wygląd > edytor>styl arkusza stylów.css)
Pamiętaj, że w moim temacie klasa dla mojej zawartości została nazwana ” entry-content.”I właśnie tego będę używał w poniższych przykładach. Jeśli zauważyłeś, że twoja klasa została nazwana czymś innym, po prostu zastąp to.
Na początek przyjrzyjmy się domyślnemu stylowi list punktorów w motywie Twenty Twelve. Od tego momentu będziemy stopniowo zmieniać sytuację.
Oto domyślny wygląd.
Zmiana czcionki
Zaczniemy od czegoś naprawdę prostego. To pozwoli Ci zorientować się, jak rzeczy się zmieniają. Po prostu zrobimy czcionkę pogrubioną za pomocą następującego CSS.
.entry-content ul li{ font-weight: bold;}
Oto wynik.
W tym pierwszym pokażę wam, jak wygląda arkusz stylów w moim nowo utworzonym motywie potomnym.
Oczywiście możesz też zmienić kolor. Jako dramatyczny przykład zmienimy listę na jasnozieloną, dodając ” color: # 00ff00;”
.entry-content ul li{ font-weight: bold; color: #00FF00;}
A oto jak to wygląda.
Dodaj Różne Style
OK, teraz zaczniemy zmieniać same Naboje. Zmienimy wypełnione koła na puste koła, dodając ten kawałek CSS kod: list-style: circle;
Mój kod CSS wygląda teraz tak:
.entry-content ul li{ font-weight: bold; list-style: circle;}
I to jest rezultat.
Możesz również zmienić puste koła na kwadratowe, zmieniając
list-style: circle;
na
styl listy: kwadrat;
Oto rezultat.
Istnieje również styl “dysk”, który jest wypełnionym okręgiem.
.entry-content ul li { font-weight: bold; list-style: disc;}
A oto wynik:
Istnieją inne wartości, których można użyć z właściwością “list-style”, z których wiele odnosi się do użycia number (uporządkowanych list). Więcej informacji na ten temat znajdziesz tutaj.
Używanie obrazów jako punktorów
Możesz także dodawać obrazy jako punkty punktowe. Aby to zrobić, należy dodać następujący wiersz kodu CSS:
list-style-image: url (url-Twojego-obrazu);
Na przykład, jeśli czcionka zostanie pogrubiona, kod CSS będzie wyglądał mniej więcej tak:
.entry-content ul li{ font-weight: bold; list-style-image:url(http://mysite.com/images/bullet-16×16.png);}
Oto spojrzenie na obraz, który przesłałem. Wygląda to całkiem dobrze, ale zauważysz, że wyrównanie obrazu jest trochę nieprawidłowe. Obrazy wydają się być trochę za wysokie.
Jeśli tak się stanie, możesz zastosować inne podejście do korzystania z obrazów. Zamiast używać właściwości” list-style-image”, możesz użyć obrazu jako tła. To pozwoli Ci przenieść obraz, aby wyglądał dobrze.
Ponieważ używamy obrazu jako tła, musimy wskazać, że nie chcemy” normalnego ” punktu. Aby to zrobić, użyjemy “list-style-type: none;” oprócz kodu CSS w tle.
Kod, który umieściłem w moim pliku CSS, wyglądał mniej więcej tak jak poniżej. Numer 5px jest tym, czym grałem, dopóki nie wyglądał dobrze. Oczywiście twój obraz prawdopodobnie nie będzie wyłączony w dokładnie taki sam sposób, jak mój, więc będziesz musiał bawić się rzeczami sam, dopóki nie będzie wyglądać dobrze.
.entry-content ul li { font-weight: bold; list-style-type: none; background: url(http://mysite.com/bullet-16×16.png) no-repeat 7px 5px; margin: 0; padding: 0px 0px 3px 35px; vertical-align: middle;}
Oto rezultat.
Dodawanie Znaków Unicode
Czymś innym, co warto wypróbować, są znaki Unicode. Znaki Unicode to takie rzeczy jak…… .
Jak wspomniano powyżej, wpisując “list-style-type: none;” usuwa normalny punkt. I to jest to, co musisz zrobić tutaj. (Ponownie, nie chcemy, aby pojawiały się normalne punkty. Zastąpimy je znakiem Unicode.)
Dodamy również inną właściwość, która wskaże, że znak powinien być przed elementem listy.
Oto spojrzenie at używając znaku ∅ jako punktu.
.entry-content ul li { list-style-type: none; font-weight: bold;}.entry-content ul li: before { content:”∅”; padding-right: 5px;}
A oto jak to wygląda.
Jeśli chcesz, aby znak miał inny kolor niż tekst, po prostu dodaj właściwość kolor do górnej sekcji, aby zmienić kolor tekstu, lub dodaj właściwość kolor do dolnej sekcji, aby zmienić kolor punktora. Możesz też oczywiście dodać właściwości kolorów do obu.
W tym przykładzie dodałem właściwość color do obu.
.entry-content ul li { list-style-type: none; font-weight: bold; color: #2e89ff;}.entry-content ul li: before { content:”∅”; padding-right: 5px; color: #FFA62F;}
Oto rezultat.
Jak widać, nie używasz specjalnego kodu w pliku CSS, aby uzyskać znak Unicode. Wystarczy skopiować sam znak Unicode i wkleić go do kodu CSS.
Listę tych symboli można znaleźć tutaj. To długa lista, więc oto kilka z bardziej popularnych: strzałki, rysunek pudełkowy, elementy blokowe, kształty geometryczne, różne symbole i dingbaty.
WPMU DEV ‘ s Bullet Lists
I w końcu zakończymy to. Jak być może zauważyłeś, listy punktorów tutaj na WPMU mają Jasnoniebieski punkt z ciemnoniebieskim tekstem. Jest to tworzone przez oddzielenie punktu punktowego od tekstu, jak to zrobiliśmy powyżej ze znakami Unicode.
Małe niebieskie pole, którego używamy jako punktora, jest tworzone przez utworzenie pola z CSS (to dwie wartości 5px, które widzisz poniżej). Chociaż nie jest to dokładnie sposób, w jaki nasz kod jest skonfigurowany w naszym arkuszu stylów, poniższe poniżej powinny dać ten sam efekt.
.entry-content ul li { padding-left: 30px; color: #3d5365; font-size: 90%; position: relative; list-style-type: none;}.entry-content ul li:before { content: “; position: absolute; left: 10PX; top: 9px; width: 5px; height: 5px; background-color: #7AA8CC;}
I oczywiście tak to wygląda. (Dołączę tutaj zdjęcie, jeśli je zmienimy, a ty czytasz to w późniejszym terminie.)
Czas ugryźć kulę
Czy twoje punkty wyglądają tak, jak chcesz? Jeśli nie, może nadszedł czas, aby ugryźć kulę, zajrzeć do arkusza stylów i wprowadzić je w życie.
Zdjęcie: D. Sharon Pruitt
