Mój Blog - Mój Kod: Post od strony HTMLa i CSSa

Ostatnim razem omówiliśmy sobie ogólnie, jak wygląda post, z jakich selektorów jest zbudowany. W dzisiejszym wpisie wejdziemy w szczegóły - zajmiemy się datą, tytułem, zawartością oraz stopką.

Post od strony kodu

Zanim zajmiemy się wyglądem postu, pokażę wam, jak wygląda on w HTMLu i co możemy pozmieniać z poziomu kodu.
Przede wszystkim przechodzimy do ok. 440 wiersza kodu (u każdego może to być inna liczba; dlatego warto w tym miejscu kliknąć Ctrl + F, czyli szukaj i wpisać main). W momencie, kiedy ujrzymy duży zestaw kodu, który jest zwinięty (po lewej stronie, obok numeru wiersza, będą czarne strzałki), odszukujemy polecenie z id="main" oraz id="post". Tymi dwoma będziemy zajmowali się w związku z kodem.

Data postu

Na początek rozwińmy wiersz z main klikając na czarną strzałkę po lewej stronie. Dlaczego interesuję się główną stroną skoro wpis miał dotyczyć tylko postu? Otóż jeśli dobrze się przyjrzycie schematowi postu z poprzedniej instrukcji, zobaczycie, że data posta nie jest jego częścią. Jest ona częścią selektora .date-outer.
Posłużmy się sztuczką z szukaniem i wyszukajmy hasło date-header. Jest to selektor definiujący naszą datę. Dodatkową informacją jest, że data to nagłówek nr 2 (h2). Jest to o tyle ważne, że ten sam znacznik definiuje tytuły gadżetów w bocznych kolumnach! Ta wiedza będzie nam bardzo pomocna i pozwoli uniknąć problemów z tym elementem. Ale o tym kiedy indziej.
Wracam do daty. W CSSie będziemy ją definiowali jako h2.date-header. Jednak jeśli chcemy zmienić jej położenie, musimy to zrobić jeszcze w HTMLu.

Jakie mamy możliwości? Możemy ją wrzucić pod tytuł postu. Może być ona również w stopce. Aby to zrobić zaznaczamy 3 linijki kodu z datą:

<b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>

i wycinamy je. Najlepiej otworzyć notatnik i tam go wkleić, aby przez przypadek nie zgubić tego elementu. Ponieważ teraz przejdziemy do drugiego zestawu kodu z id="post". Zjeżdżamy na dół i rozwijamy go.

Post w najdrobniejszym szczególe

Zacznijmy od tytułu posta. Jest on nagłówkiem nr 3 (h3) i będziemy go oznaczać selektorem h3.post-title. Zaraz pod nim znajduje się .post-header, który jest wolnym miejscem np. na datę, etykiety i inne elementy postu. Selektor .post-outer zawiera w sobie przede wszystkim link typu "Czytaj więcej", a dopiero w nim znajduje się .post-body, który trzyma całą zawartość naszego wpisu (tekst, zdjęcia). Na samym dole mamy stopkę oznaczoną selektorem .post-footer. Ciekawostką jest, że w samej stopce znajdują się trzy wolne "linie" na elementy typu etykiety, komentarze, autor. Każda taka "linia" posiada osobny selektor np. .post-footer-line-1 czy .post-footer-line-2.

Zmiana położenia daty postu

Wracamy do naszych trzech linijek kodu z datą, którą mamy zachomikowaną w notatniku. Możemy ją umieścić przykładowo pod tytułem całego postu w .post-header.

 Odszukujemy diva z klasą post-header i pomiędzy jego znaczniki wklejamy datę.

Link "czytaj więcej"

Podobnie możemy postąpić z linkiem "czytaj więcej". Znajdziemy go tuż nad stopką:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

Jest on oznaczony selektorem .jump-link. Zaznaczamy całość, wycinamy i wklejamy tymczasowo do notatnika. A następnie przechodzimy do stopki oznaczonej selektorem .post-footer.

Stopka postu

Tak jak wcześniej wspominałam, stopka podzielona jest na trzy linie, trzy obszary, w których są różne elementy.

Weźmy dla przykładu stopkę postu z bloga pomocniczego.
W pierwszej linii znajdziemy link do autora, godzinę publikację, link do komentarzy i ikonkę szybkiej edycji postu.
W drugiej linijce są ikony do portali społecznościowych, ale co ciekawe, nie znajdują się one w .post-footer-line-2, ale w zupełnie innym divie:

<!-- IKONY DO PORTALI SPOŁECZNOŚCIOWYCH -->
<div class='post-share-buttons goog-inline-block'>
        <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
      </div>

Dopiero pod nimi mamy druga linijkę stopki, w której są etykiety, a trzecia linijka postu jest niewidoczna, ponieważ element, który się w niej znajduje, jest wyłączony (lokalizacja).
W kodzie będzie to się przedstawiało następująco:
PIERWSZA LINIA STOPKI

<div class='post-footer-line post-footer-line-1'>


<!-- AUTOR POSTA-->
<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>
                </a>
              </span>
            <b:else/>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <span itemprop='name'><data:post.author/></span>
              </span>
            </b:if>
        </b:if>
      </span>

<!-- CZAS NAPISANIA POSTU-->
<span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
          <b:if cond='data:post.url'>
            <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
            <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
          </b:if>
        </b:if>
      </span>

<!-- LINK DO KOMENTARZY-->
<span class='post-comment-link'>
        <b:include cond='data:blog.pageType != &quot;item&quot;                          and data:blog.pageType != &quot;static_page&quot;                          and data:post.allowComments' data='post' name='comment_count_picker'/>
      </span>

<!-- IKONY DO POSTU -->
<span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
            <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

<!-- IKONA SZYBKIEJ EDYCJI POSTU -->
        <b:include data='post' name='postQuickEdit'/>
      </span>

<!-- IKONY DO PORTALI SPOŁECZNOŚCIOWYCH -->
<div class='post-share-buttons goog-inline-block'>
        <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
      </div>
</div>

DRUGA LINIA STOPKI

<div class='post-footer-line post-footer-line-2'>

<!-- ETYKIETY POSTU-->
<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

TRZECIA LINIA STOPKI

<div class='post-footer-line post-footer-line-3'>

<!--LOKACJA-->
<span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span> </div>

W skład stopki wchodzi również krótka notka o autorze. Dla przykładu wrzucam screen z bloga Marty.

Odpowiada za niego następująca część kodu:

<!-- O AUTORZE -->
      <b:if cond='data:post.authorAboutMe'>
        <div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
          <b:if cond='data:post.authorPhoto.url'>
            <img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
          </b:if>
          <div>
            <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
              <span itemprop='name'><data:post.author/></span>
            </a>
          </div>
          <span itemprop='description'><data:post.authorAboutMe/></span>
        </div>
      </b:if>

Zmiana ułożenia elementów w stopce

Jak widzimy, stopka postu jest bogata w różne elementy. Nie wszystkie oczywiście są potrzebne, ale to już zależy od autora, co w tej stopce umieści. Jak będzie wyglądała stopka u mnie? W pierwszej linii umieszczę .jump-link, w kolejnej etykiety, a w ostatniej - link do komentarzy (zupełnie jak na GrafikUs'ie). Wycinam te trzy zestawy kodów i wrzucam je do notatnika, natomiast cała reszta jest przeze mnie kasowana. Zwyczajnie wychodzę z założenia, że nie ma co zaśmiecać kodu. Zostawiam jedynie notkę o autorze, bo w przyszłości może się to przydać.
Po wyczyszczeniu linijek stopki, cala sytuacja wygląda jak na obrazku poniżej.

Teraz pomiędzy znaczniki <div></div> wrzucamy wcześniej zachowany kod dotyczący linku "czytaj więcej", etykiet i linku do komentarzy.

Na blogu będzie to wyglądało następująco:

Skoro wszystkie elementy leżą tak jak powinny, przechodzimy na samą górę do arkuszy stylów i będziemy zmieniali wygląd poszczególnych elementów.

Wygląd daty w poście

Aby zdefiniować wygląd daty w poście, będziemy używać dwóch selektorów: .post-header i h2.date-header. Jest to o tyle ważne, że wygląd daty nie będzie przenosił się na nazwy gadżetów w bocznych kolumnach.

.post-header {
background:none;
margin:0;
padding:5px 10px;
border-bottom:1px solid #d0d0d0;
}

W pierwszej kolejności pozbywamy się tła za pomocą polecenia background:none. Usuwamy marginesy wokół tego elementu oraz nadajemy marginesy wewnętrzne (dokładniej omawiałam je w poprzednim tutorialu). Border oznacza obramowanie, natomiast po wskazaniu kierunku (w tym przypadku bottom - dół) otrzymujemy pojedynczą linię grubości 1 px, solid (ciągłą) i o danym kolorze.
Teraz zajmiemy się samą datą.

h2.date-header {
font-family:Verdana;
font-size:13px;
color:#d0d0d0;
font-weight:normal;
}

W pierwszej kolejności ustaliłam krój pisma na Verdanę, wielkość liter na 13 px, ich kolor na odrobinę ciemniejszy niż linia pod datą oraz font-weight:normal, czyli grubość liter na normalne. Można tutaj użyć także bold (pogrubione).

Wygląd tytułu posta

Tytuł posta jest pierwszym, co rzuca się w oczy, dlatego musi się wyróżniać rozmiarem oraz przykładowo kolorem. Tytuł jest także linkiem, a z poprzedniego wpisu wiemy, że inaczej może wyglądać link aktywny, inaczej taki, na który najedziemy myszką. Można to wykorzystać!

h3.post-title {
font-family:Verdana, sans-serif;
font-size:30px;
padding:0 10px;
margin:0;
font-weight:normal;
}

Tak jak wcześniej przy dacie, nadajemy naszemu nagłówkowi krój pisma, rozmiar tekstu, marginesy wewnętrzne i zerujemy marginesy zewnętrzne. Również i w tym przypadku wskazujemy, aby grubość tekstu była normalna (nie pogrubiona).

h3.post-title a {
text-decoration:none;
color:#000000;
}

h3.post-title a:hover {
text-decoration:none;
color:#ed1a45;
}

Powyższe linijki kodu będą mówiły nam, jak zachowuje się tytuł jako link i jako link, na który najeżdżamy myszką. Text-decoration:none usuwa nam podkreślenie, a color wskazuje na kolor liter.

Wygląd wpisu na blogu

.post-body {
background:none;
padding:10px 10px;
width:650px;
text-align:justify;
margin-left:auto;
margin-right:auto;
}

To właśnie w selektorze .post-body będzie znajdowała się zawartość naszego wpisu. Likwiduję w nim tło oraz narzucam mu marginesy wewnętrzne. Width to szerokość elementu. Text-align określa nam wyrównanie tekstu. W tym miejscu można wpisać left (do lewej), center (wyśrodkowany), right (do prawej) i justify (wyjustowany). Margin-left:auto oraz margin-right:auto to marginesy boczne. Jeśli wystąpią wspólnie, to w efekcie element uzyska lewy i prawy margines identyczne, a co za tym idzie - będzie na środku. Domyślnie elementy wyrównują się do lewej.

W kolejnym poście spodziewajcie się omówienia estetycznego stopki i elementów w niej znajdujących się oraz wygląd komentarzy. Natomiast po dzisiejszym tutorialu, blog pomocniczy wygląda tak:

Z małych zmian na blogu: jak pewnie zauważyliście, w nagłówku pojawiło się menu obrazkowe z odnośnikami do różnych miejsc, w których mnie znajdziecie. Jest tam m. in. mój profil na LubimyCzytać.Pl, na Instagramie, zapraszam także do mojego portfolio na Behance. Moje tablice na Pintereście dopiero raczkują, natomiast funpage na FB już niedługo ruszy pełną parą. A co na nim znajdziecie? Przydatne linki do tutoriali, stron z freebies, porady, kreatywne zadania itd. Zachęcam do polubienia!

Jeśli macie jakieś pytania w związku z HTMLem czy CSSem - pytać! Nie bać się! Sylwia nie gryzie :D