Как красиво оформить текст в WordPress без плагина

Приветствую Вас на своем блоге!
В WordPress можно красиво оформить текст с помощью плагина  WP-Note или Special Text Boxes, а можно и без плагина. Как известно чем меньше плагинов установлено, тем лучше. А может кто-то вообще не любит плагины и старается все делать без них. Самый простой способ красиво оформить текст без плагина, это с помощью таблицы стилей style.css вашей темы.
Для начала нужно написать свойства стиля, как мы будем оформлять текст. Это можно сделать в текстовом редакторе notepad++ или juffed. Так сказать сделать заранее несколько заготовок, а потом их просто подставлять в нужное место

Вот пример такого кода:

Как видите наш код состоит из трех блоков – это блок общей рамки, блок заголовка и отдельно идет блок содержимого рамки.

Немного поясню, что в этом коде за что отвечает:

1 блок.

.bloginfo   – название div класса. Тут можно написать любое название, главное чтобы оно совпадало и в css и в блоге;
background: #eee url(images/img.png) 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 блока, примерно так:

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

Как видите, можно создать любую рамку не прибегая к плагинам.
Если ваш блог комментируют, то рекомендую поставить на свой блог бок “Топ комментаторов”, как это сделать вы можете узнать, прочитав эту статью.
На этом пока все. Удачи в оформлении блога!

С уважением, Юрий Хрипачев.