Как красиво оформить первые буквы в названии поста, виджета и абзаца

Приветствую вас, читатели и гости блога. Давайте сегодня поговорим о том, как в блоге красиво выделить заглавные буквы. А именно, в заголовке статьи, в названии виджета и в сообщении.

С заголовком вроде как и ясно. Нажал клавишу Shift и делу конец. Но с помощью CSS есть возможность сделать первую буковку более интересной.
И даже если случайно напишите её обычным шрифтом, она при публикации автоматически станет заглавной.


Попробую объяснить подробнее, чтобы было понятно что мы делаем. Для этого мы сначала зададим элемент  :first-letter и добавим к нему определённый селектор. А в скобках пропишем свойства, отвечающие за цвет и размер  буквы.

1. Заглавная буква для заголовка сообщения.

Код

h2:first-letter {color: #CB941C; font-size:40px  ; }

Здесь мы задали цвет #CB941C и размер 40px буквы. Можете поменять на своё усмотрение. Если  ещё добавить в код свойство text-shadow:, то у нас появится и тень у буквы. И код будет выглядеть уже так-

h2:first-letter {color: #CB941C; font-size:40px ; text-shadow: 0 0 0.1em #BB1818, 0 0 0.1em #BB1818, 0 0 0.1em #BB6006;}

Цветовые значения тоже устанавливайте свои и размер тени 0 0 0.1em (сверху, справа,снизу, слева).

Если вы не меняли в шаблоне блога теги h1-h3, то у вас вместо  h2 может быть или h1  или h3. Всё это можно будет увидеть сразу когда установим код в шаблоне блога.

Заходим в шаблон - изменить и перед строкой ]]></b:skin> вставляем его. У кого ещё нет опыта работы с шаблоном блога, предлагаю прочитать этот пост, о том как найти строку в шаблоне правильно. И сделайте на всякий случай резервную копию. Когда код установлен, жмём клавишу предварительный просмотр и сразу видим результат. Если всё осталось по - прежнему меняйте тег h2 на h1 или h3, о чём говорилось выше.

2. Заглавная буква для названия виджета.

код

h3.post-title:first-letter{color: #CB941C; font-size: }

С цветом и размером мудрим также, как в первом варианте. С тегами h1-h3 тоже. Значение тени text-shadow:, на ваше усмотрение. Забыла ещё сказать, что можно задать жирный текст букве, добавив в код font-weight: bold;.

3. Красивая первая буква в сообщении. Как-то вот так она будет выглядеть.

Код, приведённый ниже, вставляем также перед заветной строки ]]></b:skin>. Никуда от неё не денешься.

.post-body:first-letter {
float:left;
color: #CB941C;
line-height:50px;
padding-top:1px;
padding-right:5px;
font-family:Georgia,Arial,times;
font-size:70px;

Разберём , что можно поменять. #CB941C-цвет буквы,  line-height:50px;- в режиме просмотра определитесь с этим значением. Можно ставить и больше и меньше. Georgia, Arial,times - оставляйте как есть или примените свои шрифты. font-size:70px;-размер буквы на ваше усмотрение.

Обращу внимание, что при установке этого кода, результат сразу не будет виден. Как в первых двух. И заглавная буква будет отображаться только при написании нового сообщения и последующих. В старых постах стиль останется прежний.

Вот так, с помощью нескольких строчек CSS, добавленных в шаблон, мы сделали такую красоту. Мелочь, а глаз радует.

И на сегодня ставлю точку в шпаргалке. Что непонятно, пишите, разберёмся.

оформите подписку на новые шпаргалки

Введите Ваш email ...: