SÄ hÀr anpassar du blockquotes-stil i WordPress-teman

Add Blockquote in WordPress

Citat Àr ofta den mest minnesvÀrda delen av din artikel. De Àr ocksÄ den mest delade delen av ett inlÀgg eller presentation. Det Àr dÀrför tidningar och mainstream-mediasidor anpassar sin blockquote-stil sÄ att den sticker ut. I den hÀr artikeln visar vi dig hur du anpassar blockquotes-stil i WordPress tillsammans med att visa dig 9 vackra exempel pÄ anpassade blockquotes-stil.

Med WordPress kan du lÀgga till blockcitat i dina inlÀgg och sidor genom att anvÀnda verktygsfÀltet i ditt skrivavsnitt.

Detta kommer att lÀgga till lite HTML i ditt inlÀgg som vi kan anvÀnda för att anpassa stylingen. Obs! Vi anvÀnder textlÀget i WordPress-postredigeraren. Nedan följer ett exempel pÄ HTML som du ska se.


<blockquote>Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Urgent tamen et nihil remittunt. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Sint ista Graecorum; Cur igitur, cum de re conveniat, non malumus usitate loqui? Huius ego nunc auctoritatem sequens idem faciam.
<cite>Wise Man</cite></blockquote>

För att anpassa blockquotes-stilen i ditt WordPress-tema mÄste vi Àndra stilen.css-filen för ditt tema. Du kan göra detta genom att antingen gÄ till Utseende »Redaktör i din WordPress-administratör eller redigera filerna via FTP.

DÀrefter mÄste du anvÀnda en av stilarna som föreslÄs nedan och ÄsidosÀtta dina blockcitationstilar. Om ingen finns, lÀgg bara till dessa. Du Àr ocksÄ vÀlkommen att kombinera de tvÄ stilarna och skrÀddarsy efter ditt hjÀrta.

1. Klassisk CSS Blockquote

Vanligtvis anvÀnder mÀnniskor CSS-bakgrundsbild för att lÀgga till stora citattecken i blockcitationstecken. I det hÀr exemplet har vi anvÀnt CSS för att lÀgga till stora citattecken.

Klassiskt exempel pÄ endast CSS med citat


blockquote {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	width: 450px;
	margin: 0.25em 0;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
	color: #383838;
	background:#ececec;
}

blockquote:before {
	display: block;
	content: "201C";
	font-size: 80px;
	position: absolute;
	left: -10px;
	top: -10px;
	color: #7a7a7a;
}

blockquote cite {
	color: #999999;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}
 
blockquote cite:before {
	content: "2014 2009";
}

2. Klassisk block citat med bild

I det hÀr exemplet har vi anvÀnt en bakgrundsbild för citattecken.

Klassisk blocknot med bild för offertmÀrken


blockquote {
	font: 16px italic Georgia, serif;
	width:450px;
	padding-left: 70px;
	padding-top: 18px;
	padding-bottom: 18px;
	padding-right: 10px;
	background-color: #dadada;
	border-top: 1px solid #ccc;
	border-bottom: 3px solid #ccc;
	margin: 5px;
	background-image: url(https://example.com/wp-content/themes/your-theme/images/gray-georgia.png);
	background-position: middle left;
	background-repeat: no-repeat;
	text-indent: 23px;
} 

blockquote cite {
	color: #a1a1a1;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}
 
blockquote cite:before {
	content: "2014 2009";
}

3. Enkel blockquote

I det hÀr exemplet har vi lagt till bakgrundsfÀrg och streckad vÀnster kant istÀllet för blockkurser. Lek gÀrna med fÀrgerna.

Enkelt CSS blockquote-exempel


blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left:3px dashed #c1c1c1;
background:#eee;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "2014 2009";
}

4. VitblÄ och orange blockquote

Blockcitat kan göras för att sticka ut och de kan vara lika fÀrgglada som du vill att de ska vara.

BlÄ bakgrund och vitt exempel pÄ typsnitt



blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #FFF;
border-left:5px solid #FF7F00;
background:#4b8baf;
}

blockquote cite {
color: #efefef;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "2014 2009";
}

5. AnvÀnda Googles webbteckensnitt för blocknoteringar i CSS

I det hÀr CSS-exemplet har vi anvÀnt Droid Serif-teckensnitt frÄn Googles webbteckensnittsbibliotek.

Importerar Google Web-teckensnitt i CSS för Blockquote


blockquote {
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400italic);
font-family: 'Droid Serif', serif;
font-size:16px;
font-style:italic;
width:450px;
background-color:#fbf6f0;
border-left:3px dashed #d5bc8c;
border-right:3px dashed #d5bc8c;
text-align:center;
} 
blockquote cite {
color: #a1a1a1;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "2014 2009";
}

6. Round Corner Blockquote

I det hÀr exemplet har vi blockcitat med rundade hörn och vi har anvÀnt skugga för grÀnser.

Runda hörn blockquote



blockquote {
width: 450px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "2014 2009";
}


7. AnvÀnda Gradient som bakgrund för Blockquote

I detta CSS-blockquote-exempel har vi anvÀnt CSS3-gradient för att förbÀttra blockquote-bakgrunden. CSS-lutningar Àr knepiga pÄ grund av kompatibilitet mellan webblÀsare. Vi rekommenderar att du anvÀnder colorlabs, CSS gradient generator.

LÀgga till CSS Gradient som bakgrund för Blockquote


blockquote {
width: 450px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#7d7e7d", endColorstr="#0e0e0e",GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "2014 2009";
}


8. Blockquote med bakgrundsmönster

I det hÀr exemplet har vi anvÀnt en bakgrundsbild som mönster för blockquote.

CSS blockquote med bakgrundsbildmönster



blockquote {
width: 450px;
background-image:url('https://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "2014 2009";
}

9. AnvÀnda flera bilder i Blockquote-bakgrund

Du kan anvÀnda flera bilder i blockquote-bakgrund med css. I det hÀr exemplet har vi anvÀnt blockquote: före pseudo-element för att lÀgga till ytterligare en bakgrundsbild till blockquote.

LĂ€gga till flera bakgrundsbilder i blockquote med CSS



blockquote {
width: 450px;
background-image:url('https://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote:before{
position:absolute;
margin-top:-20px;
margin-left:-20px;
content:url('https://example.com/wp-content/themes/your-theme/images/pin.png');
}
blockquote cite:before {
content: "2014 2009";
}

Vi hoppas att du tyckte att den hÀr artikeln var till hjÀlp nÀr du lÀr dig hur du anpassar blockquotes-stil i WordPress. Om du har nÄgra frÄgor eller förslag Àr du vÀlkommen att lÀmna en kommentar nedan.