mojwp.ru
Услуги по доработке ваших сайтов >>
Назад

Большая первая буква абзаца автоматически и вручную

Опубликовано: 11.08.2012
11
156

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

Если сейчас не понятно, то ниже представлена картинка с примером. Скажу, что полученные знания позволят Вам делать аналогичные большие буквы и для всех абзацев статьи, правда уже вручную.

Я предлагаю сделать намеченное двумя способами: при помощи CSS3 и классической связкой CSS+HTML (кроссбраузерно).

Внимание! Я выпустил новую тему Romb для ваших статейников и блогов. Максимально быстрая по Google PageSpeed и максимальная оптимизация под SEO.

Для начала обещанный пример:

Большая первая буква абзаца автоматически и вручную

Вот нечто подобную букву сейчас попробуем сделать. Для начала автоматически при помощи CSS3.

Как сделать большую букву автоматически

В данном методе при помощи некоторых параметров CSS3 мы автоматизируем процесс выделения заглавной первой буквы статьи. Все, что нам необходимо, это добавить в файл стилей (style.css) следующую строку:

Немного поясню: английская буква p (самая первая) - это тег <p>,обозначающий абзац (аналогично нажатие клавиши Enter во время набора статьи). Структура вашей статьи содержит именно такие теги, когда вы начинаете новый абзац. Вот для него мы и задаем необходимые параметры.

То, что стоит в представленном коде после этой буквы p, а именно first-child:first-letter, позволяет автоматически вычислить первую букву в статье.

Однако предложенного кода будет мало, т.к. необходимо узнать название класса, где располагается данный абзац. Делается это так же двумя способами, о которых я рассказал в следующем видео-подкасте:

Обещанная ссылка на дополнение FireBug (для FireFox).
И ссылка на дополнение для Chrome - FireBug.

Далее нам нужно настроить индивидуальный внешний вид заглавной буквы, который будет подходить дизайну вашего сайта. Как сделать это "на лету" показано в следующем видео-подкасте:

Есть и минус подобной автоматической замены при помощи CSS3 - старые браузеры не поддерживают данную технологию. Так же у полу-браузеров Internet Explorer нет поддержки подобных функций. Надеюсь что вскоре большинство пользователей интернета перейдут на нормальные браузеры, которые позволяют реализовывать ранее не доступные вещи.

Делаем большую букву кроссбраузерной вручную

В данном способе вам придется вручную определять каждую букву, которую хотите сделать большой. Плюсом данного способа является то, что вы можете сделать такой большой не только первую букву, но и любую по тексту. Фактически можете каждый абзац сделать с большой буквы - времени много не занимает.

Чтобы подобное реализовать, необходимо будет в файле стилей style.css прописать любое название класса с атрибутами из примера выше. Выглядеть это будет примерно так (класс bigletter я придумал):

Здесь у нас все те же атрибуты, только в самом начале немного изменилось: я прописал новый класс и не использовал тег p. Почему так - об этом далее.

Набирать статью в WordPress можно как в Визуальном режиме, так и в режиме HTML. Для этого в админке есть одноименные переключатели. Чтобы воспользоваться вторым кроссбраузерным способом, необходимо в режиме HTML взять с двух сторон любую выбранную вами букву в следующую конструкцию:

Как раз первая буква О будет у меня большего размера. При этом я только прописал название класса в стандартном теге HTML. Аналогичную конструкцию можете применять сколько угодно раз по статье/сайту.

Надеюсь материал преподнесен понятно. Если же есть вопросы или не понятные моменты, то пишите в комментариях, чтобы другие читатели сайта так же могли найти ответы. Со своей стороны готов дописать статью в "узких" моментах.

Большая первая буква абзаца автоматически и вручную
5 (100%)
Проголосовало: 1

Давай, оцени статью!

Автор:
Виталий
Поделиться
Похожие записи
Комментарии:
  • Марат
    Опубликовано: 11.08.2012 Ответить на сообщение

    Попробовал первым способом - не работает что-то.

    • Виталий
      Опубликовано: 11.08.2012 Ответить на сообщение

      1. какой браузер и версия?
      2. установлен плагин на подобие New Adman или WhyDoWork AdSense?

      • Марат
        Опубликовано: 11.08.2012 Ответить на сообщение

        мозилла 13.0.1
        не установлено.

        • Виталий
          Опубликовано: 11.08.2012 Ответить на сообщение

          если действительно нужна такая штука, то стукни в личку

        • Марат
          Опубликовано: 11.08.2012 Ответить на сообщение

          теперь уже 14.0.1 )

  • seogrot
    Опубликовано: 11.08.2012 Ответить на сообщение

    Сам не использовал никогда подобные стили, но на некоторых сайтах очень даже симпатичненько смотрится.

  • Марат
    Опубликовано: 11.08.2012 Ответить на сообщение

    Спасибо большое за помощь:) mojwp.ru отличный помощник 🙂

  • Женя
    Опубликовано: 11.08.2012 Ответить на сообщение

    Когда изучал CSS практиковал немножко. Иногда очень необходимо даже.

  • Александр
    Опубликовано: 02.12.2012 Ответить на сообщение

    Пробовал, не выходит, можете помочь?

  • Антон
    Опубликовано: 11.01.2015 Ответить на сообщение

    Здравствуйте!Помогите,пожалуйста,сделать красную строку в теме вордпресса UU2014.Если не затруднит,максимально подробно,т.к. первый раз сталкиваюсь с ведением блога :)Спасибо.

    • Виталий
      Опубликовано: 11.01.2015 Ответить на сообщение

      Добрый день. В статье все подробно рассказано. Даже видео есть.
      Если это не поняли, то обратитесь за услугами.

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.