A blogunk külsejét nagy mértékben tudják befolyásolni a betűtípusok. Hiába szép a fejléc, hogyha a design nem odaillő, ormótlan, vagy épp túl egyszerű betűtípusokat tartalmaz. Éppen ezért ebben a cikkemben igyekszem néhány olyan tippet bemutatni, amivel szebbé tehetitek őket.
Az első, és legfontosabb: hova illesszük őket?
Nos, korábban már írtam egy
cikket, amelyben elmagyaráztam, hova illeszthettek kódokat, és milyen módon használhatjátok őket. Itt a legfontosabbak a következők lehetnek:
.post-title /a bejegyzés címe/
.column-right-inner h2 /a jobb oldali sidebar modulcímei/
.column-left-inner h2 /a bal oldali sidebar modulcímei/
Nekem az a tapasztalatom, hogy ezeket érdemes díszesebbé tenni, de persze bármi mással, a menükkel, a dátummal is elvégezhető.
Ezután: hogyan változtathatunk a betűtípuson?
Bár a sablontervező felajánl néhány lehetőséget, például a bejegyzés címe esetén, azonban előfordulhat, hogy nem csak ezekkel szeretnénk operálálni, hanem valami különlegesebbet szeretnénk az alap betűtípusoknál. Erre találták ki a Google Fontokat.
Először is, szükségetek lesz erre a
LINKRE. Itt válogathattok kedvetekre a betűtípusok között. Miután megtaláltátok a nektek megfelelőt, jegyezzétek meg a nevét. Másra innen nem is lesz szükségetek.
Ezután, itt van ez a kód:
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Font+Name">
Illesszétek be egy HTML modulba, ahova csak szeretnétek (oldalsávba, láblécbe, stb.), a végére pedig a Font+Name helyére írjátok be az előbb kiválasztott betűtípus nevét. Amennyiben több szóból áll, a szóköz helyett + jelet tegyetek.
Miután ez megvan, menjetek bele a sablontervezőbe, és a változtatni kívánt elemhez írjátok be ezt:
font-family: 'Font+Name';
(Értelemszerűen itt is cseréljétek ki a betűtípus nevére.) Tehát, ha például a bejegyzés címét szeretnénk megváltoztatni Tangerine-re, akkor így nézne ki:
.post-title{font-family: 'Tangerine';}
Miután ez kész, néhány egyszerűbb dolgot is beállíthatunk, például:
color: #ffffff /betűk színe/
text-align: center|left|right /szöveg igazítása középre, balra, jobbra/
font-size: 30px; /betűméret/
decoration: underline|overline|line-through /aláhúzott, alul-fölül, áthúzott betűk/
transform: uppercase|lowercase| /csupa nagybetű, kisbetű, a szavak első betűje nagy/
font-weight: bold /vastagbetű/
letter-spacing: 4px; /betűk közti távolság beállítása/
Ezek lennének a legegyszerűbb parancsok. Néhány különlegesebb:
Szöveg elforgatása:
transform: rotate(45deg);
Árnyék a szövegnek:
text-shadow: 2px 2px 5px #000;
Keret a szövegnek:
Ehhez ugyanazt használjuk, mint az előbb, csak kicsit kombinálva.
text-shadow: 1px 1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000, -1px -1px 0px #000;
Nos, ezek lennének. Nem olyan bonyolult, és szerintem sokat tud dobni a designon.