TIP#2871: WordPress a jak docílit toho, aby obrázky v příspěvcích měly stín?

Chcete trochu vylepšit příliš plochý design článků a svého webu na WordPressu? Můžete to udělat tak, že obrázky opatříte stínem. Budou vystupovat z jinak plochého článku a vylepší jeho čitelnost. 

Jde to přitom udělat velmi snadno. Stačí přidat odpovídající CSS kód, nemusíte si pořizovat žádné pluginy ani upravovat šablony. Vyplatí se ale mrknout do nastavení pro vaší šablonu, jestli to tam není možné zapnout. 

Přidání CSS kódu

Přihlaste se do administrace WordPressu.

Přejděte na Vzhled > Přizpůsobit.

Klikněte na Dodatečné CSS.

Přidejte následující kód:

img {
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

Praktičtější ale je to udělat pouze pro obrázky v příspěvcích.

.post img {
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

Případně to jde dělat pro jednotlivé konkrétní obrázky. Nejprve si přidejte třídu pro stín do Dodatečného CSS:

.shadow {
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

A poté můžete v editaci příspěvku na konkrétním obrázku na něj kliknout, v pravém panelu (musí to být blokový editor) jít na Další třídy CSS a tam přidat “shadow” (bez té tečky).

Výše uvedený CSS kód je případně ještě možné doplnit o spodní okraj, stín totiž zabere dole malé místo a další text, který p obrázku pokračuje, může působit jako příliš blízko. 

Jak to v praxi vypadá je možné vidět na 365tipů (tedy i v tomto článku), je zde tímto způsobem nasazený přídavek do CSS (bez rozšíření spodního okraje). 

Další jednoduchá možnost, pluginy.

Nejlépe třeba přes Simple Custom CSS and JS, které vám umožní přidat vlastní CSS a to pak používat. Případně pokročilejší CSS Hero.

Dřívější cesta byly spíš pluginy přímo pro stinování, ale s tím že dnes CSS už umí stín opravdu přímo, tak je to zbytečně složité. 

Úprava šablony

Nejednoduchá možnost by byla úprava šablony

Další tipy týkající se WordPressu

Blogování Jak na WordPress Wordpress WordPress.com WordPress.org