szablony i inne poczynione przeze mnie bloksowe dodatki...
Blog > Komentarze do wpisu

Jak poprawić CSS bloxa po zmianach SEO

Operacja nie jest aż tak straszna jak się wydaje, a większość zmian można osiągnąć stosując dość uniwersalne deklaracje. Poniżej postaram się zaprezentować i pokrótce opisać definicje, które powinny działać z większością szablonów. Niestety nie mam uniwersalnego rozwiązania dla listy ostatnich komentarzy, bo tu sytuacja jest bardziej skomplikowana.

Tytuł bloga

Link z tytułem bloga został umieszczony dodatkowo w tagu h1, co daje nam następującą kolejność tagów (stosuję zapis jak dla selektorów CSS): DIV#BlogTytylText h1 a

Dodatkowy tag h1 wywołuje (zazwyczaj) dwa efekty:

  • Zwiększenie rozmiaru bloku z tytułem. Wynika to z faktu, iż jest to element blokowy, któremu przeglądarki przypisują domyślnie pewien margines (górny i dolny).
  • Zmiana rozmiaru czcionki. Ten efekt związany jest także z domyślnymi stylami przypisywanymi przez przeglądarkę nagłówkom.

Niwelację tych efektów, w większości przypadków, zapewni taka definicja:

#BlogTytulText h1{
   margin:0;
   font-size:1em}

Tytuł wpisu na stronie głównej

Po zmianach tytuły wpisów na stronie głównej stają się linkami do ich pełnych wersji (wraz z komentarzami). Kolejność tagów jest zatem następująca: DIV.BlogWpisItemTytul a

Zmiana ta, w większości przypadków, zmienia jedynie kolor czcionki oraz dodaje podkreślenie. Możliwe jest jednak, iż także wielkość czcionki (i nie tylko) ulegnie zmianie (zależy od konkretnego kodu CSS). Antidotum powinien stanowić poniższy kod:

.BlogWpisItemTytul a{
   color:RED; /*wpisz kolor taki jak był*/
   font-size:1em;
   text-decoration:none /*jeżeli nie odpowiada nam podkreślenie*/}

Jeżeli po wskazaniu tytułu pojawiają się niepożądane efekty, to możemy je usunąć stosując analogiczna definicję z użyciem selektora .BlogWpisItemTytul a:hover.

Tytuł na stronie komentarzy

Tutaj mamy identyczny problem, jak w przypadku tytułu bloga, zatem i rozwiązanie jest identyczne. Jedynym elementem, który wymaga zmiany jest selektor, co daje nam taki kod:

.TytulKomentowanegoWpisu h2{
margin:0;
font-size:1em}

Nazwa kategorii na stronach indeksu

Jest to zupełnie nowy element, który znajduje się w tagu h3 o identyfikatorze (id) BlogKategorieWybranaTytul. Jego ostylowanie jest możliwe przy wykorzystaniu selektora

#BlogKategorieWybranaTytul h3

Ostatnie wpisy na stronie komentarzy

Jest to element, którego dostosowanie może, zależnie od szablonu nastręczyć najwięcej kłopotów. Poniżej kilka porad, które mogą to ułatwić.

Na stronie głównej i stronie komentarzy wąska szpalta ma nadany inny identyfikator, odpowiednio BlogWazkaSzpalta oraz SkomantujWazkaSzpalta. Należy zadbać by miały one jednakowe ostylowanie, co wymaga uzupełnienia wpisów zawierających selektor #BlogWazkaSzpalta o dodatkowy selektor dla strony z komentarzami. Stosujemy zatem taką definicję (o ile nie zostało to już zrobione w szablonie):

#BlogWazkaSzpalta, #SkomentujWazkaSzpalta{
  TUTAJ POZOSTAWIAMY STARE DEFINICJE STYLÓW
}

Jeżeli powyższa czynność nie dała zadowalającego rezultatu, to możliwe, że selektory użyte do ostylowania ostatnich notek zawierają identyfikator wąskiej szpalty dla strony głównej. Zazwyczaj należy wówczas poprawić definicję dodając po przecinku identyczny selektor, ale z identyfikatorem dla wąskiej szpalty na stronie komentarzy, np.

#BlogWazkaSzpalta #BlogTytulyOstatnichWpisow li{}

zamieniamy na

#BlogWazkaSzpalta #BlogTytulyOstatnichWpisow li,
#SkomentujWazkaSzpalta #BlogTytulyOstatnichWpisow li{}

Mam nadzieję, że ta instrukcja pomoże przebrnąć przez proces aktualizacji szablonów.

czwartek, 06 grudnia 2007, s.z.y.m.o.n

Polecane wpisy

  • Pochwalmy się komentarzami

    Blogi oparte na systemie WordPress pozwalają na dołączenie wtyczki wyświetlającej ostanie komentarze pozostawione przez czytelników na blogu. Blox.pl domyślnie

  • Zaczynamy

    Co będzie można tutaj znaleźć? Szablony, linki do opisanych na moim głównym blogu skryptów i być może opisy dodatkowych bajerów ;) Zamieszczone tutej szablony

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
asmith
2007/12/08 20:57:45
Szymon, próbowałem tych zmian, ale tylko zrobiłem sobie bigos na blogu. Niestety nie rozumiejąc CSSa takie działanie na czuja okazuje się zgubne. Bardzo proszę o pomoc...
-
asmith
2007/12/09 18:19:25
Uff... udało mi się w miarę po sobie posprzątać, czyli wróciłem mniej więcej do stanu poprzedniego. Strona główna jest OK. Na stronie komentarzy pojawiły się linki do ostatnich wpisów, ale bez tła, za to przykryte zdjęciami :(
Czy jest sposób, żeby wąska szpalta na stronie komentarzy wyglądała tak jak na stronie głównej?
-
s.z.y.m.o.n
2007/12/10 13:36:24
Widzę, że miałeś pecha. Niestety trudno dać naprawdę uniwersalne rozwiązanie, zwłaszcza dla autorskich szablonów.

Co do wąskiej szpalty, to trzeba zrobić tak jak napisałem:

#BlogWazkaSzpalta, #SkomentujWazkaSzpalta{
TUTAJ POZOSTAWIAMY STARE DEFINICJE STYLÓW DLA SELEKTORA #BlogWazkaSzpalta
}

Powinno wystarczyć.
Dla innych selektorów używających id BlogWazkaSzpalta rób podobnie - po przecinku dodaj selektor z id SkomentujWazkaSzpalta
-
2007/12/10 23:14:46
dzięki, tym razem zadziałało ;)
do tego trochę eksperymentów z paddingiem i powiem, że całkiem, całkiem ... ;)
-
sylvio
2007/12/16 02:59:33
Ogólnie dzięki, dałem dzięki tobie radę:)
A czy da się tak:
- strona główna bez listy ostatnich notek
- ale strona notki z listą ostatnich?
pozdro.
-
s.z.y.m.o.n
2007/12/16 13:02:51
Da się - zobacz najnowszy wpis ;)
-
bartoszewsky
2008/02/07 14:26:23
Przypadkiem trafiłem na tę notkę, ale bardzo mi pomogła - naprawiłem wszystko co chciałem. :)
Wielkie dzięki!