Keresés a blogban

2010. február 23.

Betűméret növelése

Nagyon sok blogger használja az alapsablonokat. Ezekkel az a gond, hogy régiek, és még olyan monitorfelbontásra készültek, ami akkor volt használatos (pl. 600x800). Azóta viszont rengeteget változtak a monitorok, sokkal nagyobb felbontásban is nézhetik a blogodat. Mondom nézhetik, de nemigen olvashatják, mert a betűk nagyobb felbontásban már nagyon apróak. Ezt a gondot még a mostanában készült sablonokon is tapasztalhatjuk.
Nem minden sablon alkalmaz egyforma megoldásokat a betűméretek megadására, de az alább ismertetett módszer sok sablonnál alkalmazható.

Minden résznek megadják az alap betűnagyságát - body, header, sidebar, blogtitle, description, postfooter stb.
Ezt általában a következő módon: x-small, small, medium, large, x-large.
A változóknál pedig beállíthatjuk, hogy ennek az alap nagyságnak hány %-át akarjuk.

Változtassuk meg most az oldal (body) betűnagyságát.

Keressük meg a kódban ezt a részt:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Az x-small az alap nagyság, ezt írjuk át small értékre.
Ettől még számottevő változást nem érzékelünk, az alapot eggyel megnagyobbítottuk.

Most keressük meg ezt a részt (a kód elején van):
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">

Amit a default mögött látunk, az a szokásos, azaz a formázás nélkül látható alapérték (100%), amit a value mögött látunk, az az, amit mi akarunk, hogy legyen (100%). A % érték azt mondja meg, hogy az alap betűnagysághoz képest (small) hány % nagyságú betűk legyenek.
Írjuk át a value mögötti értéket pl. 130 %-ra
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 130% Georgia, Serif">

Mentsük a sablont, és nézzük meg, mekkora lett a betűnagyság. Ha jónak találjuk, rendben, ha nem jó, akkor kísérletezzük ki, hány %-ot kell beírnunk, hogy jól olvasható betűnagyság legyen.

Ugyanezzel a módszerrel lehet pl. a post-title, vagy a post-footer stb. betűnagyságait is megnövelni.

Ha sikerrel jártatok, írjátok meg!
Ha tetszett és segített neked ez a poszt, kérlek lájkold ezt az oldalunkat is:
LÁJKOLOM
Köszönöm. Wise Lady

9 megjegyzés:

mariam írta... [Válasz erre...]

Szia WL!
Megcsináltam a betűnagyobbítást, sikerült! :-)
A 130 % túl nagy lett, 115 - nél maradtam végül.
Köszi szépen!
Marica

Wise Lady írta... [Válasz erre...]

Nagyon örülök Marica, megnéztem, és jól olvasható lett.

yoen írta... [Válasz erre...]

Szia WL!
Nekem is sikerült, a 115% lett a nyerő itt is.
Köszönöm az újabb segítséget!
Itt megnézheted az új oldalamat: (a betűméret választást is itt alkalmaztam először, és sikerült a dobozok arányainak megváltoztatása is)
http://krizanten.blogspot.com/
És egy kérdésem is van: a fejléc képében a felső keretet szeretném a képhez igazítani, kérlek, segíts ebben, hogy szebb legyen!
Plusz új kérdés: milyen módon lehetne a weboldalba fórumot illeszteni?
Előre is köszönöm és üdv: Kinga

Wise Lady írta... [Válasz erre...]

admin: Nagyon jó lett, ügyes voltál!
A fejlécképet képszerkesztővel kell a megfelelő szélességűvé alakítani. A kódban a header résznél tudod kiolvasni, hogy hány pixelre kell módosítanod. Sajnos a te képed kisebb, mint a fejléced szélessége, ezért nagyítanod kell, a nagyítás pedig mindig képminőség romlást eredményez. Tanácsom, keress egy nagyobb képet, és azt kicsinyítsd le a megfelelő méretre.
Ha nem sikerül, emailben elküldheted nekem a képet, és akkor a megfelelő méretre szabom. (De inkább próbáld meg, hogy tudjad.)
Ránézve a blogodra úgy látom, hogy a fejléc kiszélesítése se történt meg.

#header-wrapper {
width:600px;
margin:0 auto 5px;
border:1px solid #b47b10;
}

Itt kell a 600 px értéket 900 px -re átírnod.
És ha jól számolom, akkor a képnek 888 px szélességűnek kell lennie.

yoen írta... [Válasz erre...]

Szia WL!
Mindig tudsz újat mondani:) Nagyon hálás vagyok a segítségedért és az ötletekért, amit megosztasz velünk!
A legújabb oldalamon is használtam, sikerrel!!!
Köszönöm!
Kinga

Wise Lady írta... [Válasz erre...]

Örülök, hogy hasznos volt! Nagyon jó az új oldalad, megnéztem.

Maimoni írta... [Válasz erre...]

Ahhh, Wise Lady, itt szórakozom az új blogsablonommal, és ismét te tudtál segíteni... Köszi!

Zsolt írta... [Válasz erre...]

Az én betü változóm így néz ki:


Szóval ezek szerint nem csak százalékos megadás lehetséges hanem pixel-es is.

A kétszer egymás után lévő "normal" szó mire utal?

Zsolt írta... [Válasz erre...]

A változót kiszűrte a rendszer... :D
Remélem így már látszódik:

value="normal normal 14px 'Trebuchet MS', Trebuchet, sans-serif;"

Megjegyzés küldése

Text Widget

Magyar nyelvű Blogger helpblog

-