Як красиво оформити текст в wordpress без плагіна

Як красиво оформити текст без плагіна

Вітаю Вас на своєму блозі!
У WordPress можна красиво оформити текст за допомогою плагіна  WP-Note або Special Text Boxes, а можна і без плагіна. Як відомо чим менше плагінів встановлено, тим краще. А може хтось взагалі не любить плагіни і намагається все робити без них. Найпростіший спосіб красиво оформити текст без плагіна, це за допомогою таблиці стилів style.css вашої теми.
Для початку потрібно написати властивості стилю, як ми будемо оформляти текст. Це можна зробити в текстовому редакторі notepad ++ або juffed. Так би мовити зробити заздалегідь кілька заготовок, а потім їх просто підставляти в потрібне місце

Ось приклад такого коду:

CSS1234567891011121314151617181920

Відео: Використання шорткодов для оформлення сторінок і статей на сайті Вордпресс

212223242526272829/ * Оформлення рамки блоку * /

Відео: WordPress. Фінти і настройки

.bloginfo { background:# eef0ed- border:1pxsolid# c0c0c0- padding:3px5px3px30px-

Відео: Зміна шрифтів на сайті #WordPress плагіном

margin:50px- text-align:justify--webkit-border-radius:5px--moz-border-radius:5px--o-border-radius:5px--khtml-border-radius:5px-border-radius:5px--webkit-box-shadow:5px5px5px#ABC-/ * Google Crome і Safari * /-ms-filter:"Progid: DXImageTransform.Microsoft.Shadow (color = # AABBCC, direction = 125, strength = 5)"-/ * Internet Explorer * / box-shadow:5px5px5px#ABC-/ * Opera і Firefox * /}/ * Оформлення заголовка блоку * /.bloginfo-head { font-size:1.4em- font-weight:bold- color:# ed802b- margin:005px0-}/ * Оформлення тексту блоку * /.bloginfo-txt { line-height:1.3em- color:# 0d7bb8- font-size:11px-}

Як бачите наш код складається з трьох блоків - це блок загальної рамки, блок заголовка і окремо йде блок вмісту рамки.

Трохи поясню, що в цьому коді за що відповідає:



1 блок.

.bloginfo - назва div класу. Тут можна написати будь-яку назву, головне щоб воно збігалося і в css і в блозі;
background: #eee url (images / img.jpg) no-repeat-  - фон нашої рамки з картинкою в кутку рамки, якщо потрібна. Міняйте колір на свій розсуд, також можна вставити будь-яку картинку;
border: 1px solid # c0c0c0- - окантовка нашої рамки. 1 піксель шириною, solid-суцільна лінія і колір окантовки. Тут також все можна змінювати на свій смак;
padding: 3px 5px 3px 30px; - відступи тексту всередині рамки починаючи зверху, зліва 30px місце для картинки. Якщо картинка не потрібна, то можна відступи зробити однакові;
margin: 10px; - зовнішній відступ рамки, відстань між рамкою і іншими блоками, тут треба експериментувати, для різної ширини рамки робити свій відступ, щоб було красиво;
text-align: justify; - вирівнювання тексту всередині рамки, зараз стоїть по всій ширині;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px; - цей код дозволяє виводити закруглені краї рамки, якщо вони не потрібні, то його можна видалити або за коментувати;
Цей код дозволяє виводити наш блок з тінню:
-webkit-box-shadow: 5px 5px 5px # ABC-/ * Google Crome і Safari * /
-ms-filter: "Progid: DXImageTransform.Microsoft.Shadow (color = # AABBCC, direction = 125, strength = 5)" - / * Internet Explorer * /
box-shadow: 5px 5px 5px # ABC-/ * Opera і Firefox * /

2 блок.

.bloginfo-head - назва div класу;
font-size: 1.4em- - розмір шрифту заголовка;
font-weight: bold-  - жирний шрифт;
color: # ED802B- - колір шрифту в заголовку;
margin: 0 0 5px 0- - відступ заголовка всередині блоку;

3 блок.

.bloginfo-txt - назва div класу;
line-height: 1.3em- - міжрядковий інтервал;
color: # 2d86de-  - колір шрифту;
font-size: 14px; - розмір шрифту вмісту блоку;

Складного тут немає нічого, розібравшись ви зможете робити будь-які рамки для оформлення своїх статей не використовуючи плагіни. Всі заздрості від вашої фантазії і бажання.

Далі для оформлення тексту його потрібно укласти в теги div блоку, приблизно так:

Тема блокувміст блоку1234<div class="Bloginfo"style="Text-align: left;"><div class="Bloginfo-head">Заголовокблока</div><div class="Bloginfo-txt">Содержімоеблока</div></div>

Ось кілька прикладів створення таких рамок:

Заголовоквміст блокуЗаголовоквміст блокуЗаголовоквміст блокуЗаголовоквміст блокуЗаголовокВміст блоку з тінню

Як бачите, можна створити будь-яку рамку не вдаючись до плагінів.
Якщо ваш блог коментують, то рекомендую поставити на свій блог бік "Мої друзі", як це зробити ви можете дізнатися, прочитавши цю статтю.
На цьому поки все. Удачі в оформленні блогу!

">
Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!