Wyróżnienie podtytułu we wpisie

14.05.2015


Czasem zdarza się tak, że nasz wpis musimy podzielić na parę części. Składa się on wtedy z podtytułów, które zazwyczaj wyróżniamy za pomocą wyśrodkowania, pogrubienia i nadania koloru w edytorze tekstu. Jednak można to zrobić w całkiem inny sposób, który nada naszym podtytułom atrakcyjnego wyglądu. Do tego będzie nam potrzebny CSS i kod HTML, który będziemy wstawiać we wpisie, ale na początek zobrazuje wam o co mi chodzi, bo obawiam się, że nie każdy może zrozumieć. Jest jedna wada - trzeba za każdym razem nasz podtytuł wstawiać ręcznie.





1. Pierwsze co musimy zrobić to przejść do posty - edytuj - HTML, a tam zaczyna się już nasza zabawa.



2. Jeśli mamy już napisany tekst. to teraz wybieramy sobie miejsce na nasz podtytuł i wklejamy następujący kod:

<div class="podtytul">
<div style="text-align: center;">
<span class="podtytul2">TUTAJ WPISZ SWÓJ PODTYTUŁ</span>
</div>
</div>
<br/>

podtytul - to jest nasz selektor tzw, ogólny, możecie sobie go zmienić. Jak ktoś woli mieć tu napisane rozowekwiatki to proszę bardzo, macie okazje na tworzenie swojego selektoru :)
podtytuł2 - dotyczy tylko tekstu jaki umieścimy w podtytule

Teraz to będzie się prezentować mniej więcej tak:


Zapisujemy i na tym kończymy zabawę w edytorze tekstu.
Jakby ktoś się zastanawiał co to jest <br/> to jest nic innego jak enter. Tak się ją oznacza w HTML. Natomiast </div> no to są zamknięcia naszej klasy i stylu.

3. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS



4. Tworzymy styl dla naszego podtytułu. Pamiętajmy co wpisaliśmy w <div class="...">  oraz <span class="..."> ponieważ to będą nasze selektory. U mnie to wygląda tak .podtytul oraz .podtytul2 Kiedy już mamy nasz selektor to dopisujemy style, ja wybrałam sobie różowe tło, marginesy wewnętrzne, biały tekst i wielkość czcionki. Cały kod prezentuje się tak:

.podtytul {background: #ffb4a3; padding: 10px; color: #fff; font-size: 14px;}
.podtytul2 {bakground: #ffb4a3;}

Efekt:


Na koniec przygotowałam dla was 4 gotowce oto one:

.tutaj wasz selektor {padding: 10px; text-align:center;border-left:13px solid #da3f7d;border-right:13px solid #da3f7d;background:#eee; text-transform:uppercase;}
.tutaj wasz selektor 2{background: #eee;}

Efekt:


.tutaj wasz selektor  {padding: 10px; text-align:center;border-style: double; border-color: #ffd966 ; background:#fff; text-transform:uppercase;}
.tutaj wasz selektor 2{background: #fff;}

Efekt:


.tutaj wasz selektor {background: #e06666; padding: 10px; border-radius: 15px;}
.tutaj wasz selektor 2 {background: #e06666; color: #fff; font-size: 14px;}

Efekt


.tutaj wasz selektor {background: #ccc; padding: 10px; border-radius: 15%; box-shadow: 0px 2px 7px #444}
.tutaj wasz selektor 2 {background: #ccc; color: #666; font-size: 14px;}

Efekt:



Wszystko co jest w kodach pogrubione jest wartościami zmiennymi.

Na koniec chciałabym podziękować wszystkim co głosowali na mnie w konkursie. Wygrałam, a moja siostra już nie może się doczekać swojego zestawu książek. Oprócz tego moja praca będzie wystawiona na Targach Książki w Warszawie - radość jest wielka! :)

24 komentarze:

  1. Bardzo przydatny post! Z pewnością kiedyś skorzystam :)



    INNA MYŚL - zapraszam!

    OdpowiedzUsuń
  2. Br/ to raczej center niż spacja
    To jest dobry sposób ale w każdym poście musisz go dodawać oddzielnie

    OdpowiedzUsuń
    Odpowiedzi
    1. Właśnie zobaczyłam, że zrobiłam błąd, bo napisałam < / br > za miast < br / > i napisałam, że to spacja - zdarza się. Po prostu myślałam o czym innym, a napisałam jeszcze co innego. < br / > to jest inaczej przejście do następnej linii czyli enter. Wspomniałam o tym na początku, że niestety trzeba dodawać za każdym razem ;)

      Usuń
    2. Każdemu się zdarza :-)

      Usuń
    3. No pewnie, że tak :) Szczególnie jak się myśli o wszystkich rzeczach na raz ;)

      Usuń
  3. Pomoc wielgaśna, szkoda że akurat nie pasuje zbyt do mojego wyglądu, ale może następnym razem spróbuje! Ładny blog, na pewno zaraz lecę na diy, albo te sprawy, hah;D

    Pozdrawiam / kam-ilaablog.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Mam nadzieję, że coś w DIY Cię zainteresuje :)

      Usuń
  4. Super, że chce Ci się takie triki opisywać :) Wiele osób na pewno z tego skorzysta :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Szczerze mówiąc z jednej strony muszę, bo w ten sposób szlifuje to czego się dowiedziałam na kursach, a z drugiej strony grafika zaczęła być w jakiś sposób moją pasją, więc robienie instrukcji to dla mnie przyjemność :)

      Usuń
  5. Kochana super post bardzo mi pomoglas bo jestem bardzo nie w temacie a tak moge ulepszyć bloga!:) buziaki:*

    OdpowiedzUsuń
  6. nawet nie wiesz jak ja Cię uwielbiam za te posty z instrukcjami <3
    http://creamshine.blogspot.com

    OdpowiedzUsuń
  7. Jak zwykle jesteś bardzo pomocna dla blogerów, bardzo wyczerpujący post, powinnaś byc nauczycielką informatyki:P

    OdpowiedzUsuń
    Odpowiedzi
    1. Ja jako nauczycielka to baaardzo złe połączenie :)

      Usuń
  8. Bardzo pomocny post, zresztą jak cały twój blog :) Na pewno skorzystam z tego :)

    http://just-aulia.blogspot.com/

    OdpowiedzUsuń
  9. Bardzo pomocny post dla początkujących blogerów.
    http://alia-natalia.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. Myślę, że nie tylko dla początkujących, ponieważ dużo osób, które nie są początkującymi nie wiedzą o różnych rzeczach, które można zrobić za pomocą CSS czy HTML, bo najzwyczajniej w świecie nie mają do tego głowy, nie interesuje ich zabawa z kodami albo nie mają czasu

      Usuń
  10. Bardzo ładnie to wygląda ;) Ale u mnie niezbyt by pasowało.
    http://przyszopceuszatych.blogspot.com/

    OdpowiedzUsuń
  11. Akurat do nagłówków w tekście wolę h4 - nie trzeba ręcznie, bo mniejszy nagłówek jest dostępny w edycji posta, a jednocześnie nie jest to ten sam selektor co tytuły wpisów czy gadżetów, więc można było łatwo napisać kod. Ale stosuję coś takiego do przypisów i innego rodzaju wyróżnienia, które nie jest wcale podtytułem - wymyśliłam je by w pewnym tekście wyróżnić wspomnienia głównej bohaterki. To fajna opcja :)

    OdpowiedzUsuń
  12. Niestety to nie jest ta zasada działania ;) Selektor h4 w tym wypadku nie zadziała, ponieważ jest to fragment tekstu, który został wyróżniony/przerobiony na podtytuły, a nie bezpośredni tytuł danego gadżetu, tytuł wpisu czy opcja zaznaczona w edytorze tekstu jako podtytuł, to jest pokazany całkiem inny sposób zrobienia podtytułu. Tak na marginesie - podtytuły, które wyróżniamy we wpisie to nie jest selektor h4, a h3 (nie mylić z selektorem na tytuł wpisu, bo on wygląda trochę inaczej). Druga sprawa to jest taka, że jeśli zrobimy podtytuł w edytorze wpisu i nadamy mu styl to wiadomo, że każdy podtytuł będzie wyróżniony (ramką, obramowaniem, tłem). Ta opcja podana w tym wpisie umożliwia nam na wyróżnienie tylko np. jednego podtytułu. Jest to przydatne kiedy piszemy wpis, zaznaczamy w edycji wpisu podtytuł, ale chcemy, aby tylko jedno z podtytułów było wyróżnione, wtedy mamy taki efekt jaki chcemy czyli jeden wyróżniony podtytuł za pomocą kodu podanego powyżej i podtytuły, które nie są wyróżnione (zrobione w edytorze). Mam nadzieję, że rozumiesz mniej więcej o co mi chodzi, bo zdaję sobie sprawę z tego, że może to wyglądać trochę chaotycznie :D

    OdpowiedzUsuń
  13. Nie jest to ta sama zasada działania, ale podobny efekt. Co do podtytułów we wpisie, to faktycznie, gdy klikniemy ,,podtytuł" dostajemy h3, ale mamy też opcję nagłówek i mniejszy nagłówek, aż przed chwilą sprawdziłam wszystkie - h4 to mniejszy nagłówek. Nigdy zaś nie myślałam nad wyróżnianiem jednego podtytułu, tylko wolałam wszystkie mieć takie :) To zapewne stąd nieporozumienie. Tak więc, podobną rzecz mam użytą tylko przy przypisach, z selektorem ,,przypis".

    OdpowiedzUsuń
  14. Mniejsze nagłówki faktycznie mają selektor h4. Mniejsze nagłówki są dla mnie mało przydatne - podtytuły bardziej się przydają. Ja bardzo często używam jednego wyróżnienia dla podtytułów, dlatego, że więcej mi nie potrzeba np. jak mam wpis i chce podtytuł i do tego podtytułu inne podtytuły nie wyróżnione (a często tak piszę) to niestety zostaje mi robota ręczna :)

    OdpowiedzUsuń
  15. Dziękuję za ten wpis. Takie wyróżnienie podtytułu i zrobione przez Ciebie gotowe przykłady bardzo mi się przydały :)
    Jeszcze "remontuję" bloga i głównie korzystam z Twoich rad. Przejrzałam naprawdę wiele stron, lecz od Ciebie nauczyłam się najwięcej.

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona