چگونه سبک Blockquotes را در مضامین وردپرس سفارشی کنیم

نقل قول ها اغلب به یاد ماندنی ترین قسمت مقاله شما هستند. آنها همچنین به اشتراک گذاشته شده ترین قسمت هر پست یا ارائه هستند. به همین دلیل روزنامه ها و سایت های رسانه اصلی جریان سبک متن خود را برای برجسته سازی سفارشی می کنند. در این مقاله ، ما به شما نشان خواهیم داد که چگونه سبک blockquotes را در وردپرس سفارشی کنید و 9 مثال زیبا از سبک blockquotes سفارشی را به شما نشان دهیم.

وردپرس به شما امکان می دهد با استفاده از قسمت نوار ابزار در بخش نوشتن خود ، نقل قول های مسدود شده را در پست ها و صفحات خود اضافه کنید.

با این کار HTML کمی در پست شما اضافه می شود که می توانیم از آن برای شخصی سازی سبک استفاده کنیم. توجه: ما در ویرایشگر پست وردپرس از حالت متن استفاده می کنیم. در زیر مثالی از HTML آورده شده است که باید مشاهده کنید.

 Ea possunt paria non esse. Pudebit te ، inquam ، illius tabulae ، quam Cleanthes sane commode verbis depingere solebat. حواله فوری و حواله ای. vero displicuit ea، quae tributa est animi virtutibus tanta praestantia؟ Sint ista Graecorum ؛ چگونه می توان گفت ، آیا شما راحت تر ، بدون مالوموس استفاده loqui؟ Huius ego nunc auctoritatem idem facia.
 مرد خردمند  

برای شخصی سازی سبک blockquotes در قالب وردپرس شما ، باید فایل style.css طرح زمینه خود را اصلاح کنیم. شما می توانید این کار را با رفتن به Appearance »Editor در سرپرست وردپرس خود انجام دهید یا پرونده ها را از طریق FTP ویرایش کنید.

در مرحله بعد ، شما باید از یکی از سبک های پیشنهاد شده در زیر استفاده کنید و سبک های پیشنهاد خود را نادیده بگیرید. اگر هیچ یک وجود ندارد ، به سادگی اینها را اضافه کنید همچنین بیش از آنچه شما می خواهید این دو سبک را با هم ترکیب کنید و مطابق میل دل خود تنظیم کنید بسیار خوشحال هستید.

1 نقل قول کلاسیک CSS h4>

معمولاً افراد از CSS background-image برای افزودن علامت نقل قول بزرگ در blockquote استفاده می کنند. در این مثال ما از CSS برای افزودن علامت های نقل قول بزرگ استفاده کرده ایم.

مسابقه {
font-family: جورجیا ، serif؛
اندازه قلم: 18px؛
نوع قلم: مورب؛
عرض: 450 پیکسل
حاشیه: 0.25em 0؛
بالشتک: 0.25em 40px؛
ارتفاع خط: 1.45؛
موقعیت: نسبی؛
رنگ: # 383838؛
پس زمینه: #ececec؛
}

نقل قول: قبل از {
نمایش: بلوک؛
محتوای: " 201C"؛
اندازه قلم: 80px؛
موقعیت: مطلق؛
سمت چپ: -10 پیکسل؛
بالا: -10 پیکسل؛
رنگ: # 7a7a7a؛
}

نقل قول blockquote {
رنگ: # 999999؛
اندازه قلم: 14px؛
نمایش: بلوک؛
margin-top: 5px؛
}
 
نقل قول blockquote: قبل از {
محتوای: " 2014  2009"؛
}

2. نقل قول کلاسیک با تصویر

در این مثال ما از یک تصویر پس زمینه برای علامت های نقل قول استفاده کرده ایم.

مسابقه {
قلم: 16px italic Georgia، serif؛
عرض: 450 پیکسل
padding-left: 70px؛
padding-top: 18px؛
padding-bottom: 18px؛
padding-right: 10px؛
background-color: #dadada؛
border-top: 1px solid #ccc؛
مرز پایین: 3 پیکسل جامد # سی سی؛
حاشیه: 5px؛
background-image: url (http://example.com/wp-content/themes/your-theme/images/gray-georgia.png)؛
موقعیت-موقعیت: وسط سمت چپ؛
background-تکرار: بدون تکرار؛
text-indent: 23px؛
}

نقل قول blockquote {
رنگ: # a1a1a1؛
اندازه قلم: 14px؛
نمایش: بلوک؛
margin-top: 5px؛
}
 
نقل قول blockquote: قبل از {
محتوای: " 2014  2009"؛
}

3 نقل قول ساده h4>

در این مثال ما به جای پیشنهادات رنگی ، رنگ زمینه و مرز چپ را اضافه کرده ایم. احساس راحتی کنید و با رنگ ها بازی کنید.

مسابقه {
font-family: جورجیا ، serif؛
اندازه قلم: 16px؛
نوع قلم: مورب؛
عرض: 500 پیکسل
حاشیه: 0.25em 0؛
بالشتک: 0.25em 40px؛
ارتفاع خط: 1.45؛
موقعیت: نسبی؛
رنگ: # 383838؛
مرز چپ: 3 پیکسل نقطه چین # c1c1c1؛
زمینه: #eee؛
}

نقل قول blockquote {
رنگ: # 999999؛
اندازه قلم: 14px؛
نمایش: بلوک؛
margin-top: 5px؛
}
 
نقل قول blockquote: قبل از {
محتوای: " 2014  2009"؛
}

4. نقل قول آبی سفید و نارنجی h4>

نقل قول های Blockquote را می توان به صورت برجسته در آورد و می تواند به همان اندازه رنگی باشد که شما می خواهید.

مسابقه {
font-family: جورجیا ، serif؛
اندازه قلم: 16px؛
نوع قلم: مورب؛
عرض: 450 پیکسل
حاشیه: 0.25em 0؛
بالشتک: 0.25em 40px؛
ارتفاع خط: 1.45؛
موقعیت: نسبی؛
رنگ: #FFF؛
مرز چپ: 5 پیکسل جامد # FF7F00؛
پس زمینه: # 4b8baf؛
}

نقل قول blockquote {
رنگ: #efefef؛
اندازه قلم: 14px؛
نمایش: بلوک؛
margin-top: 5px؛
}
 
نقل قول blockquote: قبل از {
محتوای: " 2014  2009"؛
}

5. استفاده از Google Web Fonts برای Blockquotes در CSS h4>

در این مثال blockquote CSS ما از قلم Droid Serif از کتابخانه قلم های وب Google استفاده کرده ایم.

مسابقه {
import url (http://fonts.googleapis.com/css؟family=Droid+Serif:400italic)؛
font-family: 'Droid Serif'، serif؛
اندازه قلم: 16px؛
نوع قلم: مورب؛
عرض: 450 پیکسل
background-color: # fbf6f0؛
مرز چپ: 3 پیکسل نقاشی شده # d5bc8c؛
مرز راست: 3px dashed # d5bc8c؛
text-align: مرکز؛
}
نقل قول blockquote {
رنگ: # a1a1a1؛
اندازه قلم: 14px؛
نمایش: بلوک؛
margin-top: 5px؛
}
 
نقل قول blockquote: قبل از {
محتوای: " 2014  2009"؛
}

6. نقل قول گرد گوشه ای h4>

در این مثال ما blockquote با گوشه های گرد داریم و از drop shadow برای حاشیه ها استفاده کرده ایم.

مسابقه {
عرض: 450 پیکسل
background-color: # f9f9f9؛
حاشیه: 1 پیکسل جامد # سی سی؛
شعاع مرز: 6px؛
box-shadow: 1px 1px 1px #ccc؛
نوع قلم: مورب؛
}
نقل قول blockquote: قبل از {
محتوای: " 2014  2009"؛
}

7. استفاده از Gradient به عنوان پس زمینه برای Blockquote

در این مثال blockquote CSS ، ما از گرادیان CSS3 برای افزایش پس زمینه blockquote استفاده کرده ایم. شیب های CSS به دلیل سازگاری بین مرورگر مشکل است. ما توصیه می کنیم از آزمایشگاه های رنگی ، مولد گرادیان CSS استفاده کنید.

مسابقه {
عرض: 450 پیکسل
رنگ: #FFF؛
پس زمینه: # 7d7e7d؛ / * مرورگرهای قدیمی * /
background: -moz-linear-gradient (top، # 7d7e7d 0٪، # 0e0e0e 100٪)؛ / * FF3.6 + * /
background: -webkit-gradient (linear، top left، bottom left، stop-color (0٪، # 7d7e7d)، color-stop (100٪، # 0e0e0e)) / * Chrome ، Safari4 + * /
background: -webkit-linear-gradient (top، # 7d7e7d 0٪، # 0e0e0e 100٪)؛ / * Chrome10 + ، Safari5.1 + * /
پس زمینه: -o-linear-gradient (top، # 7d7e7d 0٪، # 0e0e0e 100٪)؛ / * Opera 11.10+ * /
background: -ms-linear-gradient (top، # 7d7e7d 0٪، # 0e0e0e 100٪)؛ / * IE10 + * /
زمینه: شیب خطی (به پایین ، # 7d7e7d 0٪ ، # 0e0e0e 100٪)؛ / * W3C * /
فیلتر: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 7d7e7d'، endColorstr = '# 0e0e0e'، GradientType = 0)؛ / * IE6-9 * /
حاشیه: 1 پیکسل جامد # سی سی؛
شعاع مرز: 6px؛
box-shadow: 1px 1px 1px #ccc؛
نوع قلم: مورب؛
}
نقل قول blockquote: قبل از {
محتوای: " 2014  2009"؛
}

8. نقل قول با الگوی پس زمینه h4>

در این مثال ما از تصویر پس زمینه به عنوان الگو برای نقل قول استفاده کرده ایم.

مسابقه {
عرض: 450 پیکسل
background-image: url ('http://example.com/wp-content/themes/your-theme/images/lines_paper.png')؛
حاشیه: 1 پیکسل جامد # سی سی؛
box-shadow: 1px 1px 1px #ccc؛
نوع قلم: مورب؛
}
نقل قول blockquote: قبل از {
محتوای: " 2014  2009"؛
}

9. استفاده از چندین تصویر در پس زمینه Blockquote

با استفاده از css می توانید از چندین تصویر در پس زمینه blockquote استفاده کنید. در این مثال ما از عنصر شبه blockquote: before برای افزودن تصویر پس زمینه دیگری به blockquote استفاده کرده ایم.

مسابقه {
عرض: 450 پیکسل
background-image: url ('http://example.com/wp-content/themes/your-theme/images/lines_paper.png')؛
حاشیه: 1 پیکسل جامد # سی سی؛
box-shadow: 1px 1px 1px #ccc؛
نوع قلم: مورب؛
}
نقل قول: قبل از {
موقعیت: مطلق؛
margin-top: -20px؛
margin-left: -20px؛
محتوای: url ('http://example.com/wp-content/themes/your-theme/images/pin.png')؛
}
نقل قول blockquote: قبل از {
محتوای: " 2014  2009"؛
}

امیدواریم که این مقاله برای یادگیری نحوه شخصی سازی سبک blockquotes در وردپرس مفید واقع شده باشد. اگر س anyال یا پیشنهادی دارید ، لطفاً در زیر نظر دهید.