Tech Thursday: Fixa klickvänliga länkar med CSS

Som bloggare så är du van att ofta och mycket länka till både andras och ditt eget innehåll. Det kan vara ett sätt att hålla kvar läsarna längre på sin sajt, få gammalt innehåll att leva längre, dela med dig av tips, tjäna pengar genom affiliate eller sprida länk-kärlek till dina kollegor.

Hur länkarna på din blogg ser ut styrs av CSS-koden i din bloggmall eller för ditt tema. I vissa mallar är länkarna bra och tydliga. I andra fall kan de vara lite mindre framstående. Om du inte är nöjd med hur länkarna ser ut på din blogg och vill göra dem lite mer klickvänliga så kan du enkelt ordna detta med hjälp av lite CSS-kod.

» Läs mer: Tech Thursday – lär dig grunderna i CSS

css-lankar-insta

Länk-elementet i CSS

Som jag berättat tidigare i mitt inlägg om grunderna i CSS så är det HTML-kod som skapar olika element på en blogg som man sedan kan styla med hjälp av CSS. Länkar skapas i HTML med hjälp av a-taggen.

Det kan t.ex. se ut så här:
<a href=”http://teknifik.se”>Läs min blogg Teknifik</a>

För att ge alla länkar på en blogg eller webbplats en viss stil skriver man i stilmallen (style.css) t.ex.:

a {
color: blue;
text-decoration: underline;
}

 

Genom den här koden skulle mina länkar bli blå och understrukna.

Viktigt att tänka på här är att om man lägger en stil på <a>-elementet så påverkar det alla a-element på hela sidan. Det inkluderar länkar i menyn, sidmenyn, länkade bilder m.m.

Hur ser en riktigt bra och lockande länk ut?

Kutym för länkar i brödtext på webben är att de ska vara understrukna. Förr var de alltid blå men nu förtiden vill man ju gärna att färgen på länkarna ska stämma med ens bloggdesign.

Jag tycker att det är snyggt om länkarna är understrukna, i en utmärkande färg och kanske till och med i fet stil. Om man inte vill ha länkar som är understrukna tycker jag de åtminstone måste vara i en annan färg annars är det väldigt svårt att se att något är en länk.

» Läs mer om hur du gör din blogg lätt att läsa

Så ändrar du stil på länkar i brödtexten

Ofta så kan man ändra färg på länkar i inställningarna till sin bloggmall eller tema. Men eftersom dessa inställningar oftast då påverkar alla länkar på bloggen så kanske man vill sätta en egen stil specifik för länkar i brödtexten.

Identifiera elementet för ditt blogginnehåll

Det vi först måste göra då är att identifiera elementet som innehåller ditt blogginnehåll. Det gör du enklast i Google Chrome (eller Firefox) genom att använda utvecklarverktyget.

Markera en bit brödtext på din blogg och högerklicka på den, välj inspektera.

I den lilla fliken eller fönstret som nu öppnas kommer du i HTML-koden kunna se hur de olika elementen förhåller sig till varandra. Du vill här hitta det element som innefattar enbart texten i själva blogginlägget, inte rubriken eller metadatan som t.ex. publiceringsdatum.

css-lankar-blogg3

På min blogg ser vi att innehållet ligger i en <div> med klassen ”entry-content”. Perfekt!

Öppna din stilmall eller rutan där du kan skriva egen CSS-kod

I WordPress kan du nu trycka på ”Anpassa” i adminpanelen och välja ”Ytterligare CSS”. Om du har ett child theme kan du öppna style.css för det i ditt favoritprogram för att skriva kod och redigera där.

css-lankar-blogg2

Bloggar du via en annan plattform: leta efter ett läge där du får lägga till egen CSS-kod eller ändra eventuellt direkt i stilmallen för din bloggmall. Kom ihåg att kopiera hela koden och spara den i ett separat dokument på datorn först innan du börjar ändra – utifall att något går galet.

Din nya CSS-kod ska skrivas längst ned i dokumentet. Det är nämligen den kod som står längst ned som gäller! Den ”skriver över” annan kod som kommit innan.

Skapa en ny länkstil

För att skapa vår nya länkstil så börjar vi med att ropa in klassen för huvudelementet. I mitt fall ”entry-content”. Därefter berättar vi att det är just a-taggen vi vill sätta en stil på. Då ser det ut så här:


.entry-content a {
}

 

Alltså: genom att börja med klassen ”entry-content” visar vi att det bara är innehåll i detta element vi är intresserade av. Därefter skriver vi ut a-elementet för att visa att det är alla a-element inom denna klass vi vill jobba med.

Bra properties att använda för att styla länkar är t.ex. color, font-weight och text-decoration. Det kan t.ex. se ut så här:


.entry-content a {

color: #009999;

font-weight: bold;

text-decoration: underline;

}

 

Om du vill ta bort understreck på länkar använder du:


.entry-content a {

text-decoration: none;

}

Så styr du vilken färg länken får när man håller över den

Ett bra sätt att göra länkar extra klickbara och enkla att förstå är att sätta en hover-effekt på den. Alltså att något händer med länken när man håller muspekaren över den.

För detta använder vi en selector som heter :hover. För att skapa en annan länkstil när man håller musen över skriver vi t.ex.:


.entry-content a:hover {

color: #666;

}

 

Så nu när man håller musen över en-tagg inom elementet som har klassen .entry-content så kommer den länktexten ändra färg till grå.

Felsökning: blir det inte som du vill?

En sak som ofta händer när man skriver CSS-kod är att man tycker man ändrat något och så händer absolut ingenting. Då får man felsöka lite! Utvecklarverktyget med ”inspektera” i Google Chrome är jättebra för detta.

Om du gjort precis som jag beskrev men länkarna vägrar ändra sig: högerklicka på en länk i din brödtext och välj ”Inspektera”.

css-lankar-blogg1

Kolla så att det inte är några special-klasser som är inne och bråkar med dina länkar. Säg t.ex. att ditt tema har lagt in en egen klass på länkarna t.ex:
<a class="text-link" href="http://enlänk.se">Min länk</a>
Då är det den klassen du behöver anropa i din CSS-kod för att ändra på hur länken ser ut. Samma sak om temat sätter en särskild länk-stil på ett a-element som är inom en paragraph. I CSS skulle det se ut så här:


p a {

color: blue;

}

 

Om du gjort ändringar men inget visas på bloggen även fast du dubbelkollat att inget är knas med elementen och klasserna: dubbelkolla din syntax (alltså hur du skrivit koden).

Har du satt ett kolon efter varje property och semikolon efter dess värde? Har du använt punkt framför en klass du anropat? Har du klamrar runt dina properties?

Se även till att uppdatera sidan i webbläsaren (cmd+R på Mac, ctrl+R på PC).

Lycka till med dina länkar! Självklart kan denna metod även användas för att styla t.ex. knappar (knappar är ju också en typ av länkar).

Hur tycker du att en riktigt klickvänlig länk ser ut?

Elin Häggberg

Digital designer, medievetare och journalist. Bloggar om teknik och internet ur ett kreativt perspektiv på egna bloggen Teknifik. Brinner för jämställdhet inom tech och älskar att koda!

3 Comments
  1. Så bra och pedagogiskt! På tal om länkar, går det att ändra med CSS så att alla länkar automatiskt öppnas i ny flik?

    1. Oj, sorry för sent svar! 🙂 Nej denna funktion styrs via HTML/PHP-koden, inte CSS. I WordPress så får man klicka upp länken och välja ”Öppna i ny flik”. Det finns även plugins som kan lägga in att externa länkar automatiskt öppnas i ny flik. Kolla runt! /E

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>