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

красивая первая буква в заголовке
Приветствую вас, читатели и гости блога. А давайте сегодня поговорим о том, как в блоге красиво выделить заглавные буквы. А именно, в заголовке статьи, в названии виджета и в сообщении. С заголовком вроде как и ясно. Нажал клавишу 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 ...:


5 комментариев:

  1. Доброго времени суток Вика! У вас столько красивых фишечек! Подскажите пожалуйста, при оформлении Красивая первая буква в сообщении, если вначале устанавливаешь картинку слева, а потом текст, то почему-то эффекта "красивой первой буквы" нет? 1.Можно ли настроить так чтоб в начале картинка была, а потом текст с красивой буквой? 2.И можно ли настроить, чтоб текст выравнивался по всей ширине автоматически? С уважением к вам и к вашему труду!Тата.

    ОтветитьУдалить
  2. Тата. картинку и заглавную букву не получиться вставить сразу или то или другое. А вот можно ли настроить, чтоб текст выравнивался по всей ширине автоматически? не совсем поняла. Пишите сообщение и располагаете по центру в редакторе. Или что хотите..

    ОтветитьУдалить
  3. Вика, благодарю за ответ! Все понятно! Подскажите, у вас такой симпатичный в сайтбаре раздел "Последние сообщение" с ротацией, если описание на установку такой красоты? С уважением Тата.

    ОтветитьУдалить
  4. Tata, Вы у меня уже не первая спрашиваете о нём. Где-то я начинала писать пост об этом . В ближайшие дни опубликую.

    ОтветитьУдалить
  5. Вика, вот здорово! Он правда очень интересный! Буду благодарна. С уважением Тата.

    ОтветитьУдалить

Пользовательский поиск