Fotók elhelyezése a css bloggeren keresztül (blogspot)
Képek közzététele a CSS-en keresztül a Bloggerben (Blogspot)
A CSS tulajdonságok használatával beállíthatja a weboldal szinte bármely elemének megjelenítését, beleértve a képeket is. Ebben a cikkben foglalkozunk a blokk struktúrájával a képekről, és milyen alapvető szelektort használhatunk a Blogger blogbejegyzéseiben szereplő képek megalkotásához. És fontolja meg azt a kérdést is, hogy miként lehet az első képeket (előnézet) elkészíteni az azonos méretű bejegyzésekben, és ugyanolyan stílust adni nekik.
Tehát kezdjük el a hozzáadott képek blokkjait.
A HTML formátumban hozzáadott kép a legegyszerűbb kóddal rendelkezik:
Minden paraméter - leírás, eszközleírás, méret, stb. és szükség esetén további blokkokat írnak elő manuálisan. Ez a módszer jó a fejlett bloggereknek.
A betöltéskor a kép egy további tárolóba kerül, és az egész HTML így néz ki:
Ez a tartály rendelkezik saját választójával - .szeparátorral. amely felhasználható a teljes képblokk kialakításához.
Ha az aláírás hozzáadódik. akkor a blokk helyett a képet egy táblázatban csomagolják:
| Képaláírás |
Az egész tervnek van egy választója: .tr-felirat-konténer. és egy különálló aláírással rendelkező cella .tr-felirat.
Képszelektorok a CSS sablonban Blogger
A sablon kezdetben már tartalmaz minden szükséges szelektorot, és ha kívánja, hozzáadhatja vagy módosíthatja a meglévő CSS-tulajdonságokat. A sablonkód ebben a szakaszában kezdetben így néz ki:
poszt-szervezet img. post-body .tr-felirat-konténer. Profil img. Image img,
.BlogList .item-thumbnail img padding: $ (image.border.small.size);
háttér: $ (image.background.color);
határ: 1px szilárd $ (image.border.color);
-moz-box-shadow: 1px 1px 5px rgba (0, 0, 0, 1);
-webkit-box-shadow: 1px 1px 5px rgba (0, 0, 0, 1);
doboz árnyék: 1px 1px 5px rgba (0, 0, 0,1);
>
poszt-szervezet img. post-body .tr-felirat-konténer párnázás: $ (image.border.large.size);
>
poszter .tr-felirat-konténer szín: $ (image.text.color);
>
post-body .tr-felirat-konténer img padding: 0;
háttér: átlátszó;
határ: nincs;
-moz-box-shadow: 0 0 0 rgba (0, 0, 0, 1);
-webkit-box-shadow: 0 0 0 rgba (0, 0, 0, 1);
box-shadow: 0 0 0 rgba (0, 0, 0,1);
>
Nincs sok stílus, a különböző blokkok szelektorait kombinálva közös tulajdonságok írására, de a szükséges tulajdonságokat csak a szükséges szelektorokra lehet leírni, elkülönítve őket. A post képekhez a következők tartoznak:
- .post-body img - az üzenetben lévő képek vagy a .entry-content img, amely lényegében ugyanaz;
- .elválasztó - a konténer a képen az aláírás nélkül;
- .post-body .tr-caption-container img - annak a képnek a kiválasztója, amelyhez az aláírást hozzáadták;
- .tr-caption-container - az egész asztal kiválasztója a képen;
- .tr-felirat - egy szelektor a kép aláírásával rendelkező cellához;
Hogyan készítsünk minden képet az azonos méretű blogbejegyzésekben?
Az általános stílus megkérdezésével néha szükség van arra, hogy az üzenetek képei ugyanolyan magasságban vagy szélességben legyenek, függetlenül az eredeti méretétől. Ez mind nagyon egyszerű, minden attribútum szélességét hozzáadhatja a kívánt értékhez minden alkalommal, vagy egyszerűen megteheti: csak adja hozzá a következő CSS-t a sablonhoz:
poszt-szervezet img <
magasság: 150px; / * magasság, bármely kívánt érték, akkor a% * /
szélesség: auto; / * szélesség, kötelező érték * /
>
poszt-szervezet img <
magasság: automata; / * magasság, kötelező érték * /
szélesség: 150px; / * szélesség, bármely kívánt érték, lehet% * /
>
A Bloggerben csak az első postkép stílusának megváltoztatása
Sajnos a standard sablonválasztók használatával ez nem lehetséges, még pszeudoosztályokkal is.
De a címke . mint bármely más, külön osztályt lehet hozzáadni a szükséges stílussal. Üzenet létrehozásakor csak a HTML szerkesztési módba kell lépnie, és hozzá kell adnia az első képcímkéhez.
Például:
CSS-ben globálisan állítsa be, például:
első img float: left;
határ-sugár: 5px;
margin: 5px;
magasság: 200px;
szélesség: auto;
>
Ne felejtsük el, hogy a szkript működtetéséhez csatlakoztatni kell a jQuery könyvtárat a bloghoz. hacsak természetesen korábban nem tetted.
Remélem, ez a post hasznos.
"de egyszerűen meg tudod csinálni - csak add hozzá a következő CSS-t a sablonhoz egyszer:
. "- nem működik Igen, a kép szélessége kiegyenlített (ha a második opciót használja), de a kép minősége jelentősen romlik, míg az eredeti képek nagyobbak.
Próbáltam sok kódot, amit a hálózaton találtam. De minden esetben a képek minősége romlik. Itt van egy teszt blog - test-blogger-9.blogspot.com. a különböző méretű és minőségű képek eredetiek, és minden fotó nagyon látható minőségromlás a blogon.
Itt vannak olyan blogok, ahol több fotó van a hozzászólásokban, és mindez minőségromlás nélkül:
Fontos számomra, hogy a minőség nem elveszett és összehangolt, amikor egyszerre több (10-15) képet tölt le egy üzenetben, mint ezek a blogok, hogy ne mindent kézzel szerkesztsünk. Kérem, segítsen.