Wordpress'те Blockquote кошуу

WordPress темаларында Blockquotes стилин кантип ыңгайлаштыруу керек

Цитаталар көбүнчө макалаңыздын эң эсте каларлык бөлүгү болуп саналат. Алар ошондой эле ар кандай посттун же презентациянын эң көп бөлүшүлгөн бөлүгү. Ошондуктан гезиттер жана ири медиа сайттар блоктордун цитата стилин өзгөчөлөштүрөт. Бул макалада биз WordPressте блок тырмакчалардын стилин кантип ыңгайлаштырууну жана ыңгайлаштырылган блок тырмакчаларды стилдөөнүн 9 сонун үлгүсүн көрсөтөбүз. WordPress жазуу бөлүмүңүздөгү куралдар панелинин аймагын колдонуп, постторуңузга жана баракчаларыңызга блокировкаларды кошууга мүмкүндүк берет.

Бул сиздин постуңузга бир аз HTML кошот, аны биз стилди ыңгайлаштыруу үчүн колдоно алабыз. Эскертүү: Биз WordPress пост редакторунда текст режимин колдонуп жатабыз. Төмөндө сиз көрүшүңүз керек болгон HTML кодунун мисалы.

Ал дал келе алган жок. Кечиресиз, Cleanthes таблицасын эске салам, анда сүрөт үчүн абдан колдонулган сөздөр бар. Шашылыш, бирок, аларды кайтарып берүү үчүн эч нерсе жок. Бирок алардын көз карашында бул туура эмес болсо, мындай кереметтүү жандын касиети кимге таандык? Аныкы гректер; Анда эмне үчүн "сага бир нерсе туура келсе, биз кадимкидей англисче сүйлөгөндү жактырбайбызбы?" Ал эми менде азыр, ошол эле эрктин бийлигине баш ийип.
Акылдуу адам

WordPress темаңыздагы блок тырмакчалар стилин ыңгайлаштыруу үчүн, биз темаңыздын style.css файлын өзгөртүүбүз керек. Сиз муну төмөнкүгө барып жасай аласыз Көрүнүш » Редактор WordPress администраторуңузда же файлдарды FTP аркылуу түзөтүңүз. Андан кийин төмөндө сунушталган стилдердин бирин колдонуп, блокировка стилдерин жокко чыгарышыңыз керек болот. Эгерде жок болсо, жөн гана аларды кошуңуз. Сиз ошондой эле эки стилди айкалыштырууга жана аларды өзүңүздүн каалооңузга ылайыкташтырууга ашыксыз.

1. Классикалык CSS Blockquote

Адатта адамдар блокировкага чоң тырмакчаларды кошуу үчүн CSS фон сүрөтүн колдонушат. Бул мисалда биз чоң тырмакчаларды кошуу үчүн CSS колдонобуз.

Жөн гана классикалык Css Blockquote мисалы

blockquote {font-family: Грузия, serif; шрифт өлчөмү: 18px; шрифт стили: курсив; туурасы: 450px; маржа: 0.25em 0; толтуруу: 0.25em 40px; катар бийиктиги: 1,45; салыштырмалуу позиция; түс: #383838; фон: #ececec; } blockquote: алдында {дисплей: блок; мазмуну: "201C"; шрифт өлчөмү: 80px; позициясы: абсолюттук; сол: -10px; бийиктиги: -10px; түс: #7a7a7a; } blockquote {түсү: #999999; шрифт өлчөмү: 14px; дисплей блогу; жогорку чек: 5px; } блокировкалар: чейин {мазмун: »2014 2009″; }

2. Сүрөт менен классикалык блок датасы

Бул мисалда биз тырмакчалар үчүн фон сүрөтүн колдонобуз.
Таанышуу үчүн сүрөт менен классикалык блок цитата

blockquote {шрифт: 16px Грузия курсив, сериф; туурасы: 450px; толтуруу-сол: 70px; үстүнкү толтуруу: 18px; түбүндө толтуруу: 18px; оңго толтуруу: 10px; фон түсү: #dadada; үстүнкү чек: 1px катуу #ccc; төмөнкү чек: 3px катуу #ccc; маржа: 5px; фон сүрөтү: url (http://example.com/wp-content/themes/your-theme/images/gray-georgia.png); фон абалы: орто сол; фон кайталоо: кайталанбоо; текст чегинүү: 23px; } blockquote {түсү: #a1a1a1; шрифт өлчөмү: 14px; дисплей блогу; жогорку чек: 5px; } блокировкалар: чейин {мазмун: »2014 2009″; }

3. Simple Blockquote

Бул мисалда тырмакчалардын ордуна фон түсүн жана сызыкча сол чекти коштук. Түстөр менен ойногондон тартынбаңыз.
Жөнөкөй Css Blockquote мисалы

blockquote {font-family: Грузия, serif; шрифт өлчөмү: 16px; шрифт стили: курсив; туурасы: 500px; маржа: 0.25em 0; толтуруу: 0.25em 40px; катар бийиктиги: 1,45; салыштырмалуу позиция; түс: #383838; сол чек: 3px чекит #c1c1c1; фон: #eee; } blockquote {түсү: #999999; шрифт өлчөмү: 14px; дисплей блогу; жогорку чек: 5px; } блокировкалар: чейин {мазмун: »2014 2009″; }

4. Ак көк жана кызгылт сары Блоккота

Блок даталары дисплейге коюлушу мүмкүн жана сиз каалагандай түстүү болушу мүмкүн.
Көк фондо жана ак шрифттеги цитата мисал

blockquote {font-family: Грузия, serif; шрифт өлчөмү: 16px; шрифт стили: курсив; туурасы: 450px; маржа: 0.25em 0; толтуруу: 0.25em 40px; катар бийиктиги: 1,45; салыштырмалуу позиция; түс: #FFF; сол чек: 5px катуу #FF7F00; фон: #4b8baf; } blockquote {түсү: #efefef; шрифт өлчөмү: 14px; дисплей блогу; жогорку чек: 5px; } блокировкалар: чейин {мазмун: »2014 2009″; }

5. CSS'те блок цитаталар үчүн Google веб шрифттерин колдонуу

Бул CSS бөгөттөөлөрүнүн мисалында биз Google Web Font Library Droid Serif шрифтин колдонобуз.
Blockquote үчүн Css менен Google Веб шрифттерин импорттоо

blockquote {@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400italic); font-family: 'Droid Serif', serif; шрифт өлчөмү: 16px; шрифт стили: курсив; туурасы: 450px; backgroundcolor: #fbf6f0; сол чек: 3px чекит #d5bc8c; оң чек: 3px чекит #d5bc8c; текстти тегиздөө: борбор; } blockquote {түсү: #a1a1a1; шрифт өлчөмү: 14px; дисплей блогу; жогорку чек: 5px; } блокировкалар: чейин {мазмун: »2014 2009″; }

6. Round Corner Block Quote

Бул мисалда бизде тегеректелген бурчтары бар тырмакча бар жана чек аралар үчүн көлөкөнү колдонобуз.
Тегерек бурч блогу

blockquote {туурасы: 450px; backgroundcolor: #f9f9f9; чек: 1px катуу #ccc; чек радиусу: 6px; кутуча көлөкөсү: 1px 1px 1px #ccc; шрифт стили: курсив; } блокировкалар: чейин {мазмун: »2014 2009″; }

7. Blockquote үчүн фон катары градиентти колдонуу

Бул CSS блок цитатасы мисалында биз блокировканын фонун жакшыртуу үчүн CSS3 градиентин колдонобуз. CSS градиенттери кайчылаш браузер шайкештигинен улам татаал. CSS градиент генератору болгон colorlabs колдонууну сунуштайбыз.
Blockquote үчүн фон катары Css градиентин кошуңуз

blockquote {туурасы: 450px; түс: #FFF; фон: #7d7e7d; /* Эски браузерлер */ фон: -moz-linear-gradient(жогорку, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6 + */ фон: -webkit-градиент (сызыктуу, жогорку-сол, ылдый-сол, түс-токтотуу(0%, #7d7e7d), түс-токтотуу(100%, #0e0e0e)); /* Chrome, Safari4 + */ фон: -webkit-linear-gradient(жогорку, #7d7e7d 0%, #0e0e0e 100%); /* Chrome10+, Safari5.1+ */ фон: -o-linear-gradient(жогорку, #7d7e7d 0%, #0e0e0e 100%); /* Opera 11.10+ */ фон: -ms-linear-gradient(жогорку, #7d7e7d 0%, #0e0e0e 100%); /* IE10 + */ фон: сызыктуу градиент (төмөн, #7d7e7d 0%, #0e0e0e 100%); /* W3C */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = "#7d7e7d", endColorstr = "#0e0e0e", GradientType = 0); /* IE6-9 */ чек: 1px катуу #ccc; чек радиусу: 6px; кутуча көлөкөсү: 1px 1px 1px #ccc; шрифт стили: курсив; } блокировкалар: чейин {мазмун: »2014 2009″; }

8. Фон үлгүсү менен блокировка

Бул мисалда биз фон сүрөтүн блоктук цитата үчүн үлгү катары колдонобуз.
Блок Цитата Css Фондук Сүрөт Үлгү менен

blockquote {туурасы: 450px; background-image: url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png'); чек: 1px катуу #ccc; кутуча көлөкөсү: 1px 1px 1px #ccc; шрифт стили: курсив; } блокировкалар: чейин {мазмун: »2014 2009″; }

9. Бир нече тырмакчанын Фондук Сүрөттөрүн колдонуу

Сиз CSS аркылуу бир нече блок-цитатанын фон сүрөттөрүн колдоно аласыз. Бул мисалда биз blockquote: псевдо элементтин алдында блокировкага башка фон сүрөтүн кошуу үчүн колдонобуз.
Css колдонуп Blockquote ичинде бир нече фон сүрөттөрүн кошуңуз

blockquote {туурасы: 450px; background-image: url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png'); чек: 1px катуу #ccc; кутуча көлөкөсү: 1px 1px 1px #ccc; шрифт стили: курсив; } blockquote: мурун {позициясы: абсолюттук; жогорку чек: -20px; сол чети: -20px; мазмун: url('http://example.com/wp-content/themes/your-theme/images/pin.png'); } блокировкалар: чейин {мазмун: »2014 2009″; } Бул макала сиз WordPressте блок тырмакчаларды стилди үйрөнүүдө пайдалуу болду деп үмүттөнөбүз. Эгерде сизде кандайдыр бир суроолор же сунуштар болсо, төмөндө комментарий калтырыңыз.

Таштап Жооп