Posztok formázása a Kinján

A Cinket is működtető Kinján blogolsz és szeretnél szép, jól működő posztokat csinálni? Összeszedtük, hogy kell szöveget formázni, kapcsolódó anyagokat beszúrni, médiát beágyazni, és még az is kiderül, hogy mit csinál a Kinja a képekkel.

Címek és ajánlók

A blogok címlapjain a címeket 65–70 karakternél elvágjuk. Az ennél hosszabb címek a posztok oldalain (a permalinkeken) olvashatók teljes terjedelmükben.

Advertisement

A posztok első bekezdéséből lesz az ajánló. Ezeket 330 karakter körül vágjuk el a címlapon, a permalinkeken természetesen nem nyúlunk hozzájuk.

Képek

Képet a szerkesztőben tudsz feltölteni, egyszerre akár többet is. Nem kell feltétlenül a menüvel vesződnöd, elég, ha behúzod a képeket a szerkesztőablakba. A képek viselkedését feltöltött méretük definiálja, és az, hogy megnyomtad-e rajtuk a jobb felső sarokban a ★ gombot.

  1. Alapesetben az első képből lesz a poszt ajánlóképe a blog címlapján, 132 pixel szélesen, 16:9-es képarányra vágva. Ha azt akarod, hogy a címlapon pont úgy nézzen ki, mint a permalinken, töltsd fel eleve 16:9-ben. A permalinken nem nyúlunk a kép arányaihoz.
  2. Ha megnyomod az első képen a ★ gombot, a kép eredeti képarányában, 636 pixel szélesen kerül ki a címlapra. Ugyanezzel a módszerrel bármelyik másik képből is csinálhatsz címlapi ajánlóképet!
  3. Ha bármelyik kép 636 pixelnél keskenyebb, akkor képarányának megtartása mellett 300 pixelre zsugorodik és jobbról melléfolyik a szöveg (ha még 300 pixelnél is keskenyebb, akkor képarányának megtartása mellett 300 pixelre nő).

Minden 636 pixelnél szélesebb kép 636 pixelben megjelenni, és kap egy nagyítót, ami eredeti méretére nagyítja. Ez a kép például 1280 pixel széles:

A pontosan 636 pixel széles képekhez nem nyúlunk – ha grafikont vagy finom képi elemeket ábrázoló képet töltesz fel, készítsd el eleve ekkorában és tűéles marad:

Így folyik a szöveg egy 636 pixelnél keskenyebb, 300 pixelre zsugorított kép mellé (ugyanígy folyna egy eredetileg 300 pixelnél keskenyebb, 300 pixelre hízlalt kép mellé is). Hogy legyen minek mellé folynia, itt egy kis szöveg:

„Az étlap sok mindent eldönt egy étteremben. Magyarországon különösen, ahol a tulajdonosok a beltéri dizájn helyett általában a menükártya megfogalmazásával jelzik, hogy az adott vendéglátóegység milyen vendégkörre számít. A Mágnáskertét lapozgatva először csak ámuldoztam azon, hogy minden étel neve legalább kétsoros. Aztán finoman analizálni kezdtem az ételneveket. A Mágnáskertben – úgy tűnik – hisznek a szómágiában. Ételeik prezentálásánál az a taktikájuk, hogy a tálba kerülő összes egzotikus hozzávalót felsorolják, hogy a végén, késleltetett slusszpoénként, az egészet megkoronázzák még valami teljesen funkciótlan, ám rém drágának hangzó összetevővel.”

Advertisement

Akkora képet töltesz fel, amekkorát akarsz, több megás gifeket is szeretettel várunk.

Közcímek

HTML-nézetben tudsz közcímeket adni, ehhez a szerkesztőben meg kell nyomni a HTML gombot. A h1-es közcím a poszt címe, ezt ne használd poszton belül. H2-től indul a buli, amit így tudsz csinálni:

<code><h2>Neobarokk faanyag + pártszerűtlen szakszervezeti vezér</h2>

A Kinján így fog kinézni:

Neobarokk faanyag + pártszerűtlen szakszervezeti vezér

A HTML hat közcímszintet tud, pont úgy kell a többit is csinálni, mint a h2-t, bemutatunk mindegyikből egy példát.

h3: Vízilóvese kolibriszempürével

Ha a h2-t túl nagynak érzed egy poszton belül közcímnek, használd helyette a h3-at.

h4: Frenetikus csülök

A h4 például arra jó, hogy egy poszt végére írt frissítést közcímmel emelj ki, ne csak úgy odaírd a semmibe.

h5: Átkozott hentesáru

Egyre kisebb súlyú, de ha sok közcímed van egy posztban, nem jön rosszul a h5, ha nem akarod a szöveget nehézkessé tenni.

h6: Meghökkentő találkozás egy pártelnök szellemével

Ez a legkisebb, a Kinjában ez már csak egy ponttal nagyobb betű, mint a szövegtörzs.

Linkekből készített ajánlók

Ha egy bekezdésben linkelsz – a saját oldalad egy posztjára, más kinjás posztra, külső blogposztra, szinte bárhova –, akkor a bekezdés alá ajánlót készítünk a linkből:

Ha két posztra is linkelsz egy bekezdésben, akkor az ajánlók között nyilakkal lehet lapozgatni:

Az ajánlógenerátor szinte minden strukturált tartalommal működik, tehát olyan dolgokkal, amiknek van címe, képe, szövege. Ha nincs rá szükség, ki lehet ikszelni. Ha később meggondolod magad, kattints újra a linkre, és generáld újra.

Szövegformázás

Félkövér betűt a strong taggel készíthetsz:

<code><strong>Mi ez a mártásmánia, Kovács elvtárs?</strong>

Dőlt betűt az em taggel:

<code><em>Megvan! Parasztvakítás.</em>

Áthúzott szavakat a del taggel:

<code><del>Bogád riporter kidülledő szemmel dicséri a fátyoltésztás izét</del>

A poszt végére a kép forrását vagy egyéb kiegészítő információt a small taggel tudod odaírni:

<code><small>Fotó: Szily László</small>

Ha nem akarsz kézzel HTML-t szerkeszteni, ezeket a tageket megtalálod a szerkesztőben az Aa gomb alatt, akárcsak h2-től h4-ig a közcímeket.

Hosszabb idézetet és annak forrását a blockquote és a cite tagekkel tudod megjeleníteni:

<code><blockquote><p>Nem akarunk hinni a szemünknek: a szomszédos asztalnál maga Nagy Sándor államtitkár, egykori MSZOSZ-elnök szövi szorosabbra a kapcsolati hálót egy üzletember-külsejű üzletemberrel. Nagy Sándor nem viselkedik pártszerűen, mert sehol sem látunk virslit vagy barnakenyeret a közelében. De legalább kiderült, hogy nem kaptattunk hiába, ezt a helyet tényleg szereti a szolidáris baloldal.</p> <p><cite>Szily László: Prolik homárszószban</cite></p> </blockquote>

Mindez így fog kinézni a Kinján:

Nem akarunk hinni a szemünknek: a szomszédos asztalnál maga Nagy Sándor államtitkár, egykori MSZOSZ-elnök szövi szorosabbra a kapcsolati hálót egy üzletember-külsejű üzletemberrel. Nagy Sándor nem viselkedik pártszerűen, mert sehol sem látunk virslit vagy barnakenyeret a közelében. De legalább kiderült, hogy nem kaptattunk hiába, ezt a helyet tényleg szereti a szolidáris baloldal.

Szily László: Prolik homárszószban

Ebből a blockquote-nak külön gombja van a szerkesztőben, a forrás feltüntetéséhez használt cite-ot viszont már csak HTML-nézetben tudod használni.

Advertisement

Felsorolást szintén lehet készíteni a szerkesztő Aa menüjéből, egyébként az ul és li tagekkel HTML-nézetben tudsz:

<code><ul> <li>tejszínes tormakrémleves lazacjuliennel</li> <li>kakasleves csirkemájgaluskával, zöldségekkel</li> <ul>

A Kinján így fest majd:

  • tejszínes tormakrémleves lazacjuliennel
  • kakasleves csirkemájgaluskával, zöldségekkel

A számozott lista ugyanígy működik; vagy az Aa menüből, vagy kézzel az ol és a li tagekkel:

<code><ol> <li>szegfűgombás libamájjal bélelt, fátyoltésztában sült szűzpecsenye</li> <li>báránycsülök pirított báránymájjal és tejfölös tepertős puliszkával</li> <ol>

A végeredmény:

  1. szegfűgombás libamájjal bélelt, fátyoltésztában sült szűzpecsenye
  2. báránycsülök pirított báránymájjal és tejfölös tepertős puliszkával

Vízszintes elválasztóhoz HTML-nézetben használd a hr taget:

<code><hr>

Ezt kapod:


Ha forráskódot vagy nyers HTML-t szeretnél a posztba illeszteni úgy, hogy változtatás nélkül jelenjen meg, használd a code taget, amit az Aa menüből is elérhetsz:

<code><?php echo("Hello World!"); ?>

Videók, zenék, tvitek, külső média

A legtöbb külső cucc beillesztésénél nem kell sem embedkóddal, sem HTML-nézettel vesződnöd, egyszerűen másold be a szerkesztőbe az URL-t, a többit a Kinja megcsinálja.

Advertisement

Ha a poszt első képe elé teszed a külső cuccot – vagy nem is használsz a posztban képet –, akkor az lesz a nyitókép (nyitóhang, nyitótvit, stb.), és ugyanazok a méretezési szabályok vonatkoznak rá, mint az állóképekre.

Például egy Youtube-os videó URL-je a Kinjába másolva automatikusan így fog kinézni:

Ez a technika a legtöbb szolgáltatóval működik. Így néz ki például videó a Vimeóról:

Így néz ki egy tvit a Twitterről (a benne lévő képet vagy videót is áthúzzuk):

Így néz ki egy zeneszám a Soundcloudról:

Így néz ki egy kép az Instagramról:

Ha olyan szolgáltatóról szeretnél beilleszteni cuccot, amit nem támogatunk közvetlenül, akkor szerezd meg az embedkódját, válts HTML-nézetre, és másold be az embedkódot. Így fest például egy videó kódja az Indexen:

<code><iframe title="indavideo video player" scrolling="no" class="indavideo-player" id="player-0dbe4b93cd" type="text/html" width="640" height="360" src="http://embed.indavideo.hu/player/video/0dbe4b93cd/" frameborder="0"></iframe>

És így néz ki a Kinjába ágyazva:

Ha kérdésed vagy észrevételed van, írd meg válaszban!

Utolsó frissítés: 2015. január 21.