Про создание буквицы различными способами во всемирной паутине уже писано-переписано. В этой статье поговорим об очень лёгком способе создания буквицы на чистом CSS, причём без плагина и безо всякой правки каких-либо файлов движка и шаблона.
Честно говоря, я не сторонник использования буквицы - зачастую она выглядит просто неуместно, за исключением сайтов какой-либо литературной или исторической тематики, где сам стиль сайта предназначен для использования подобных украшательств. И не собирался я ни статью писать про это, ни использовать эту фишку у себя.
Однако, небольшая наша полемика с Игорем Черноморцем по поводу буквицы на его блоге в статье про плагин буквицы для WordPress, подтолкнула меня к попытке решения этой задачи совершенно другим способом - создать буквицу на чистом CSS без плагина, без правки кода каких-либо файлов движка и CSS шаблона. Стало просто интересно...
Итак, приступим...
Создаём CSS для буквицы
В данном случае CSS - это та основа, которая ляжет во все наши дальнейшие действия. Давайте-же создадим и разберём этот маленький и довольно простенький стиль.
/* Буквица */ .arkfirstletter { margin-right: 1px; /* Отступ справа */ font: 1.8em/1 Georgia; /* Размер и имя шрифта*/ font-weight: bold; /* Жирный шрифт */ text-shadow: 1px 1px 3px silver; /* Тень */ color: crimson; /* Цвет*/ }
Вот, собственно и весь стиль. Здесь мы просто определили класс arkfirstletter, который можно использовать где угодно. Почему именно arkfirstletter? Дело в том, что во многих источниках подобные фишки делают при помощи создания класса firstletter. И вот, во избежание возможных накладок одноимённых стилей я просто добавил своеобразный префикс. Вот и всё. В принципе, Вы можете поименовать этот класс как Вам угодно...
Остальные атрибуты данного стиля должны быть понятны из комментариев в коде css... И Вы можете их изменять под свои нужды.
Практическое использование стиля буквицы
Способ первый
Этот способ - скорее классика, его используют и при создании плагинов, и при ручной вставке кода. Суть его заключается в добавлении стиля буквицы в css-файл Вашей темы и добавлении специального шорткода, например - посредством правки злосчастного великомученика functions.php.
Давайте рассмотрим этот способ подробнее. Плагин мы с Вами писать, конечно-же, не будем, а вот вставкой кода позабавимся...
Открываем файл /wp-content/themes/Ваша тема/style.css и в самый конец вставляем вышеприведённый блок стиля.
Открываем файл /wp-content/themes/Ваша тема/functions.php и в самый конец перед закрывающим тегом
?>
вставляем следующий код:
function ark_firstletter($attr,$content) { return '<span class="arkfirstletter">'.$content.'</span>'; } // регистрируем шорткод add_shortcode( 'arkfirstletter', 'ark_firstletter' );
И теперь, в тексте статьи, при её редактировании мы в нужное место просто вставляем этот шорткод.
А в самой статье будет смотреться вот так:
В данном случае CSS - это та основа...
Наверное на этом можно было-бы остановиться, но это решение настолько банально и некрасиво, что мне захотелось чего-то большего...
Например, чтобы буквица была видна уже при редактировании статьи, а не только во фронтенде. И это оказалось решить довольно просто...
Открываем файл /wp-includes/js/tinymce/skins/wordpress/wp-content.css и в самый конец вставляем всё тот-же блок стиля, обозначенный в самом начале.
Вот и вся премудрость. Теперь и в редакторе наша буквица будет выглядеть точно так-же, как и при чтении статьи.
Минусы первого способа
- Вопреки моим заявлениям в начале статьи о том, что «создать буквицу на чистом CSS без плагина, без правки кода каких-либо файлов движка и CSS шаблона», мы всё-же внесли правки аж в три файла!
- При обновлении то-ли WordPress, то-ли редактора наша последняя вставка пропадёт и в редакторе вместо красивой буквицы опять будут шорткоды.
- При смене или обновлении шаблона исчезнут вообще все наши вставки и тогда уже шорткоды будут отображаться не только в редакторе, но и при чтении статьи!
- Может хватит уже насиловать functions.php и style.css?
Очень ненадёжный способ... И это не наш путь.
Способ второй
Вот это как раз и есть тот самый способ, о котором я писал вначале статьи - лёгкий, буквица на чистом CSS без плагина, без правки кода каких-либо файлов движка и CSS шаблона.
Не надо ничего никуда вставлять! Ни в файл стилей, ни в functions.php, ни куда-либо ещё.
За основу берём всё тот-же стиль, обозначенный в начале статьи, только слегка трансформируем его вот в такой вид:
<span style="margin-right: 1px;font:bold 1.8em/1 Georgia;text-shadow: 1px 1px 3px silver;color: crimson;"></span>
И теперь эту конструкцию просто вставляем в текст статьи, обрамляя нужную букву этим span.
Вот как-то так:
<span style="margin-right: 1px; font: bold 1.8em/1 Georgia; text-shadow: 1px 1px 3px silver; color: crimson;">В</span>от это как раз и есть тот самый способ
На выходе получим, что в редакторе, что в статье - одинаковый вид:
Вот и всё! Как Вам такой способ?
Общие минусы обоих способов
Общих минусов я увидел два:
- Что шорткод, что тег span вставлять приходится ручками, а набирать кучу непонятных символов очень не хочется, да и в памяти их правильное написание хранится не всегда. Впрочим, можно код просто где-то сохранить и в последующем использовать банальный копипаст. Однако тут есть выход поизящней, об этом чуть ниже, в разделе «Полезный инструментарий».
- В том случае, когда захочется убрать буквицу с сайта - придётся лопатить все статьи, где она использовалась и убирать коды, опять-таки ручками. Но и тут есть довольно простое и лёгкое решение - и о нём я тоже расскажу в разделе «Полезный инструментарий».
Полезный инструментарий
Наверное у каждого блогера есть некий набор инструментов, облегчающий ему жизнь и ведение блога. Расскажу о двух очень полезных инструментах, которые давно использую сам. Это плагины, о них я упоминал в статье Плагины WordPress 2015.
Инструмент № 1
Это плагин AddQuicktag. Он избавит нас от необходимости писать шорткоды и теги ручками.
Я не буду тут расписывать принципы его использования - он прост, как три копейки, разберётесь. Покажу лишь удобство его применения.
В принципе, тут всё понятно. Прописываем осмысленный заголовок, название шорткода, если используем шорткод, открывающий тег, закрывающий тег и отмечаем галочками где это применять. |
Это, конечно, только при использовании второго способа. В первом-же случае, она будет просто обрамлена шорткодом...
Таким образом мы очень изящно закрываем первый из общих минусов! Удобство и простота использования бесспорны!
Инструмент № 2
Это два плагина.
Search & Replace - ищет указанную строку в базе данных и заменяет её на другую.
Search Regex - поиск и замена в постах, страницах, комментариях и мета-данных, с полной поддержкой регулярных выражений.
Оба плагина почти идентичны, но в каких-то случаях ищет один, а в каких-то другой. Я при помощи этих плагинов много чего менял на блоге одним запросом. Например, адреса картинок, коды вставки блоков выделения текста и т.д... Хранятся они в деактивированном состоянии. При необходимости активирую и потом снова отключаю.
При использовании шорткода (первый способ) надо задать сначала поиск строки [arkfirstletter], а затем [/arkfirstletter]. В обоих случаях заменять на пустую строку.
При использовании второго способа искать надо вот такой фрагмент:
<span style="margin-right: 1px; font: bold 1.8em/1 Georgia; text-shadow: 1px 1px 3px silver; color: crimson;">
И заменить его на вот это:
<span style="">
Другими словами, мы просто удаляем стиль из тега span, а сам по себе пустой span никак не повлияет на внешний вид текста.
Хочу обратить внимание, что поиск и замена происходит сразу по всему блогу одним запросом. А это значит, что нет необходимости ковыряться в статьях и убирать код ручками.
Таким образом мы закрываем и второй из общих минусов.
Некоторые замечания
Зачастую, для оформления буквицы используют тег абзаца - P. Такой способ чреват появлением буквицы в неожиданных местах, правда это зависит от реализации, но кроме этого существуют и ограничения - только первая буква абзаца!
На мой взгляд, гораздо правильнее привязывать буквицу к тегу span. При таком подходе мы получаем практически неограниченные возможности, ведь этот span можно вставлять куда угодно!
Примеры:
Первый способ - это полная «Ж», по сравнению со вторым!
1. Привлекаем внимание к элементу списка.
2. А здесь просто Элемент...
√ Привлекаем внимание к абзацу...
Можно извращаться как угодно, даже выделить всю строку или её часть!
Ну и так далее, тут всё ограничено только Вашей фантазией...
Расширение возможностей
В том-же AddQuicktag можно прописать несколько вариантов буквицы с различным оформлением и использовать разную буквицу для разных элементов текста.
Правда тогда и убирать потом буквицу из статей придётся не одним запросом, а по количеству определённых стилей. Но в принципе, при использовании инструмента № 2 не имеет значения сколько запросов выполнять, один или три... Так, что это не проблема.
Не уверен, что сам буду использовать буквицу где-либо ещё, кроме этой демонстрационной статьи, но вот пока я её писал - мне даже понравилось... 😀
Вот и всё, что я хотел сказать по поводу использования буквицы в WordPress.
Удачи Вам и до встречи на моём и Вашем блогах!
Класс! Да, творчество в вордпресс не иссекаемо. Мне понравился способ без плагина, интересно и заманчиво. Может и себе применю. Так что спасибо за науку.
Если ты про второй способ, то попробуй. Легко и непринуждённо!![heart heart](https://obg.kz/wp-content/plugins/ark-wysiwyg-comment-editor/plugins/arkemoticons/img/18.gif)
Александр, ну вы должны были отличиться от всех и это заслуживает отдельных похвал![heart heart](https://obg.kz/wp-content/plugins/ark-wysiwyg-comment-editor/plugins/arkemoticons/img/18.gif)
Но, разве вы не знаете поговорку "Всё гениальное – просто" Так это не тот случай!!!
Вы с одной стороны избавили всех от лёгкого плагина для отображения буквицы в тексте, а с другой стороны предоставили другие плагины для реализации данной фишки.
Первый вариант вообще завал, мало кто захочет его использовать, но и остальные не такие уж и простые (во всяком случае на первый взгляд)
Вы меня простите конечно за впервые мою критику, но мне кажется, что тот плагин, о котором я писал, намного проще и не хуже. это конечно первичное моё мнение. Но…я уверен в том, что сейчас в ответе на мой коммент вы сможете меня переубедить! Вы же в этом профессионал
А зачем? Я же не говорил, что твой способ плох. Очень даже хорош. И для многих он прекрасно подойдёт. Но, если ты обратил внимание, то в комментариях под твоей статьёй несколько раз прозвучало, что ради нескольких строк css не стоит устанавливать плагин. И я с этим согласен.
Теперь, что касается
С чего ты это взял? Второй способ, о котором я говорил, не требует для реализации абсолютно ничего, кроме него самого! Вообще ничего.
И обрати внимание, что я не устанавливал никакие плагины специально для реализации этого способа. Эти плагины я использовал уже давно, как очень удобный инструментарий.
Ладно, допустим, плагин, о котором ты писал, добавляет в редактор свою кнопку – бесспорный плюс. Но разве кроме этих шорткодов никакие другие ты не используешь?
Инструмент № 1, о котором я писал, решает проблему вставки шорткодов и тегов в статьи и в статье я просто показал, как можно его использовать совместно с моим способом. Но ведь это совсем не обязательное условие…
Теперь, об инструменте № 2… Вот скажи, а разве в твоём случае, если ты захочешь убрать буквицу – он тебе не понадобится? Руками будешь шорткоды из статей выковыривать?
Вот и получается, что и при твоём способе надо ставить как минимум два плагина – плагин буквицы, и что-то подобное инструменту № 2… И в чём тогда разница?
А вот несомненный плюс моего способа в том, что я вижу буквицу уже сразу в редакторе статьи, а не только во фронтенде. Конечно, это на любителя, но мне это показалось очень удобным.
Ну, и как всегда, каждый ведь сам выбирает, что ему использовать. Ты показал отличный способ с плагином, я показал альтернативу, на мой взгляд, довольно неплохую – без плагина. Что-то подойдёт одному, что-то другому. Ни твой способ не отменяет мой, ни мой способ не отменяет твой.
Ну вот, я же говорил, что профессионал
Скажем так, почти переубедил, но есть пару моментов…
Почему то мне мало верится, что эти плагины популярны среди многих простых блогеров. Лично я впервые о них слышу и до сих пор не пользовался. Получается, что для меня и подобных мне, так и да придётся устанавливать дополнительные плагины.
Опа на, а вот здесь как раз вы меня подловили
Да, я использую другие шорткоды для оформления текста в рамки. Значит…мне наверно будет полезно установить тот плагин и упростить жизнь, хотя…она не такая уж и была тяжёлая, когда вручную вставлял шорткод!
Подведу итог:
Ваш способ великолепный! Мне понравилось то, что буквицу видно в редакторе. И ещё плюс в том, что не надо удалять шорткоды.Наверно всё-таки вам удалось убедить в том, в вашем способе достоинств больше чем в моём (хотя это не мой
)
Спасибо Александр
Возможно, что и так, хотя я об этих плагинах писал в своих обзорах…
А вот, кстати, их популярность:
AddQuicktag – более 80 000 установок.
Search and Replace – более 200 000 установок.
Search Regex – более 50 000 установок.
Это данные из репозитория вордпресс…
Как я уже говорил – вовсе необязательно. Можно просто тупо хранить строчку с тегом span в каком-нибудь текстовом файлике и, при необходимости копировать оттуда. А если в этом файлике хранить и другие свои шорткоды и важные вставки, да разместить его где-нибудь на Google Диске, например, то он всегда будет под рукой и доступен даже с мобильного устройства. В этом случае никаких дополнительных плагинов устанавливать нет необходимости. При условии, что потом это своё творчество не будем убирать из статей…
Просто раз я уже всё-равно использую AddQuicktag у себя на блоге, то грех было не совместить полезное с приятным. Что я и показал в статье. Но, как видишь, его использование совсем необязательно.
Кстати, у меня вся база с паролями и кодами доступа хранится на Dropbox.
Правда не в текстовом формате. Тем не менее я из любой точки и с любого устройства имею к ней доступ. Очень удобно!
Ух ты, какие бурные баталии из-за буквицы бывают)))
Все!!! Убедил!!! Протестирую сначала на тестовом блоге и…ВПРЕД!
Здравствуй, Саша! У меня два месяца не было интернета, только пару дней как подключили. Пока сидела без дела, написала книжку о бесплатных методах привлечения трафика, которая поможет зарабатывать в партнёрских программах новичкам. Сейчас делаю страницу захвата, хотела сделать на ней форму подписка, как на твоём блоге. То есть, чтобы была просто кнопка, а при нажатии на неё открывалось окошко с формой подписки. Прогуглила весь интернет, ничего не нашла. Хочу попросить у тебя скрипт для подключения такой функции. Поделишься? И не плохо бы тебе написать статью о таком способе размещения формы подписки. Будешь на первом месте в поисковой выдаче! Прости, что пишу не по теме статьи, но очень уж хочется настроить подписную страницу по современному. Добавила на неё различные эффекты к тексту и картинкам, а вот с формой заминка. Помоги мне пожалуйста!
Ира, здравствуй. Боюсь тебя разочаровать – тут нет никаких специальных и секретных кодов. Всё банально и просто.
Для создания самой формы использую плагин ContactForm7, для вывода её в модальном окне – плагин SBModal.
При этом, в верхнем меню это выглядит так:
А в виджете так:
Спасибо, Саша, за ответ. Жалко конечно, что это плагин выводит. Я к подписной странице плагин не приклею. Ну ничего, попробую разобраться, покопаюсь в кодах таких страниц. Ну а если не получится, то оставлю открытой форму подписки. Всего доброго!
Опа, только сейчас заметила, что у тебя пропал визуальный редактор комментариев. Хотела смайлик оставить, и не поняла куда всё делось!!!
😉
Да вроде ничего никуда не делось, всё присутствует. Визуальный редактор может не отображаться в каких-то случаях при просмотре с мобильных устройств…
Посмотри в сторону лайтбокс. По этому поводу в Сети полно примеров. В модальном окне можно вывести любое содержание.
Либо, действительно, сделай просто открытую форму. Вот глянь, когда-то делал страницу, правда она уже не актуальна, но в виде примера. Там форма открыта, вроде неплохо смотрится…
Кстати, там соцсети не отображаются, не обращай внимания – это я сам скрипт просто удалил. Потом переделаю…
А у меня на компьютере не отображается визуальный редактор. Видно какой то глюк. Сегодня тоже его нет. А когда пробую обновить страницу, то вместо сайта грузится фон и пусто, ничего нет. А при переходе с почты опять появляется, но без редактора. Может быть это только у меня? Хотя другие сайты грузятся нормально.
По поводу странички, спасибо за подсказку про лайтбокс. У тебя страничка классная, слов нет! Но мне хочется сделать с прибамбасами (потому что сама наверное такая) 😉
Увидела у одних ребят, и загорелось сделать подобное. Жаль я ссылку на неё удалила. Но вот что то подобное здесь – mail-scribe.ru/1shag-1day/7/index.html
Конечно это бзик, но просто хочется узнать как такое сделать. Я же учусь, и стараюсь не пропустить того, чего не знаю.
Ирина, ну не знаю… Вроде все заходят и у всех всё нормально отображается. А не поможет-ли тебе Ctrl+F5? А не отключены-ли в самом браузере Яваскрипты? Попробуй сменить браузер…
Посмотрел… Ну не-е-ет. Такого и даром не надо. Навязчивость раздражает. Я там нажал "Нет", после чего понял, что никогда больше туда не зайду и ничего мне от них не надо.
Ира, такой подход только распугает клиентов!
Да, я это понимаю, и не собираюсь так делать. Я просто сделаю форму в отдельном окне, и всё. А эти ди и нет я не буду делать. Кто не захочет подписываться просто закроет страницу не нажимая на кнопку.
Нажала Ctrl+F5, у меня открылось окно с историей.
Проверю в настройках браузера, раньше всё было включено. Может быть пока не было интернета что то отключилось. Да, попробовала зайти с другого браузера, вообще не соеденяет, выдаёт такую ошибку
“504 Gateway Time-out
The server didn’t respond in time.”
Спасибо, второй способ мне понравился, не знал что такую красоту можно сделать. Все довольно просто и понятно.
А ещё стоит обратить внимание на строку css
Размер шрифта определён в em, а это значит, что и на мобильных устройствах буквица будет смотреться гармонично и красиво.
Почему-то большинство публикаций на тему буквицы используют размер в px, а это жёсткая привязка размера и на мобильных устройствах будет выглядеть не к месту вообще…
У меня стоит плагин ультимат шорткод. Мне им очень удобно пользоваться. Он много шорткодов предлагает. Также там есть и буквица. Поэтому я у себя вывожу ее именно этим плагином. Просто мне так удобнее. Не нужно вручную прописывать.
Раньше я не использовал буквицы, но как статью у Игоря прочитал, так аж самому захотелось ее прикрутить. Теперь потихоньку буду вставлять буквицу во все посты. Так как-то оригинальнее текст смотрится.))) Главное, один раз ставить только в начале статьи, а иначе она приедаться будет.
Сергей, у каждого есть свой инструментарий и собственные предпочтения. Так и должно быть. Это нормально. Я просто показал свой, но можно и вообще без всего.
Когда-то я пробовал Shortcodes Ultimate, если речь о нём… Мне он показался излишне навороченным и тяжеловатым. Встроено множество шорткодов, из которых я использовал от силы два – три… Только тут ведь зависит от того, у кого какие нужды, сейчас глянул – более 300 000 установок, цифра говорит сама за себя.
Лично для меня оказалось проще использовать AddQuicktag – легкий, прописываю там только то, что необходимо… Хотя у него только 80 000 установок.
Да, в каждом абзаце – это явный перебор. Я вот попробовал использовать буквицу в каждом первом абзаце главы в статье – вроде так смотрится очень даже ничего…
Да, Александр, тут многое зависит от предпочтения вебмастера. Я может быть и попробовал бы ваш способ, но я специально для многих задач люблю пользоваться Shortcodes Ultimate. Да, он немного громоздкий – содержит шорткоды так сказать, на все случаи жизни. Но я много чего в нем использую. К примеру, делаю буквицы, спойлеры, различные вкладки, галереи, метки и так далее. Поэтому решил не собирать различные скрипты или мелкие плагины, а установить такой хороший сборник дополнительных функций.)))
Буквицу я только один раз в статье использую. Вообще считаю, что она на многие блоги пойдет. Не важно литературная тематика или нет. Просто ее нужно подходяще оформить. А так буквицы это хорошо. Они помогают человеку сконцентрироваться и сразу обратить внимание именно на начало текста. На сайте и блогах частенько появляются отвлекающие факторы. Буквица в этом плане немного помогает человеку сконцентрироваться на главном.
На мой взгляд – это абсолютно верное решение. Но тут, как я и говорил, всё зависит от нужд. Если Вы используете многие фишки этого плагина, то для Вас он великолепное решение. Мне-же, ради трёх-четырёх шорткодов его ставить наверное не резон. Хотя вот спойлер у Вас в комментах мне очень глянулся…
Насчёт буквицы, хоть я и заявлял, что считаю это излишеством и не буду использовать, тем не менее сам уже вторую статью так оформляю… Понравилось…![cheeky cheeky](https://obg.kz/wp-content/plugins/ark-wysiwyg-comment-editor/plugins/arkemoticons/img/06.gif)
Благодарю Вас, Александр, за столь обширный материал. Мне кажется, такая буквица очень пригодится для сайта со сказками. Выйдет очень похоже на настоящую книгу, знакомую с детства. Или с пословицами-поговорками.
А я в последнее время что-то ухожу от излишеств. Без них проще, но не так интересно конечно!
Да в принципе, Вы и правы. Когда идёт серьёзная работа с блогом, то излишества ни к чему. Это я тут могу развлекаться для собственного интереса. Ну и может кому-то это и пригодится – зависит от специфики блога…
Спасибо, Александр, взяла вашу информацию на заметку, со временем может пригодится!
Да, Лидия, так зачастую и бывает – смотришь и думаешь, а мне-то зачем? Но спустя какое-то время начинаешь вспоминать где эту фишку видел,
потому, что вдруг захотелось применить и у себя…
Здорово смотрится такая красивая заглавная буква! У себя на сайте использовать вряд ли буду. Но сама идея супер!
Надеюсь, многим Вашим читателям, Александр, она будет очень кстати!![](https://obg.kz/wp-content/plugins/ark-wysiwyg-comment-editor/plugins/arkkbabe/img/16.gif)
Спасибо, Юлия!
Ну да, как пел несравненный Андрей Миронов: "Вы оцените красоту игры!"![cheeky cheeky](https://obg.kz/wp-content/plugins/ark-wysiwyg-comment-editor/plugins/arkemoticons/img/06.gif)
Интересная информация, вы просто "творец". Беру на заметку.
Спасибо, Ольга! Думаю, что на Вашем блоге да при Вашей-то тематике буквица будет выглядеть очень гармонично…
Я тоже не сторонник выделения заглавной буквы, но способ очень понравился![](https://obg.kz/wp-content/plugins/ark-wysiwyg-comment-editor/plugins/arkemoticonssk/img/04.gif)
Александр, с вашими познаниями, вам надо авторские шаблоны под вордпресс верстать.
Спасибо, Андрей! Про шаблоны у меня была идея, но мне показалось это слишком хлопотным – в тонкостях создания шаблона надо разбираться а где взять на это время… Как-то пробовал создать в Артистере, но так нигде и не использовал. Считаю, что по-хорошему шаблон надо делать ручками. И не абы как – стотысячный клон подобных себе, а что-то оригинальное… Вряд-ли я такое потяну. Но, если честно, сама идея отложена на будущее с пометкой "когда-нибудь"…![cheeky cheeky](https://obg.kz/wp-content/plugins/ark-wysiwyg-comment-editor/plugins/arkemoticons/img/06.gif)
Согласен, шаблон нужно верстать руками. Желаю воплотить эту идею в жизнь 🙂
Найти более простое и легкое решение подвластно большому профессионалу! Идея мне тоже понравилась, тем более её реализация не требует особых усилий.
Спасибо, Людмила, только это не про меня… Я очень многих вещей не знаю и не умею… Так, что у меня только любительский уровень, можно сказать…
Прочитал, о буквицах раннее и не задумывался. Возможно по-тестю на своем новом блоге, так как в этот в дизайн не входит.
В принципе, стиль буквицы можно изменить под любой дизайн, но Вы правы – сама по себе буквица уместна не везде. В основном это зависит от тематики сайта…
Самым простым мне показался способ с помощью span, что трудного – в скопировать и вставить?
Не трудно. Я всего лишь автоматизировал этот процесс, упростив до безобразия…
Можно использовать псевдоэлемент ::first-letter
Из минусов — его тоже как-то контролировать нужно, иначе все параграфы будут им забиты, что не всегда желательно. Либо ввести дополнительный класс для данного эффекта (или его отсутствия). Оформление удобнее в одном месте иметь, думается.
Согласен, с отдельным классом – хороший вариант. В таком случае, если надоест буквица – достаточно удалить из css соответствующий селектор, либо изменить его. И не надо лопатить статьи.
Но в моём варианте больше гибкости в том плане, что можно использовать не только на первой букве, а в любой комбинации…
Александр, я ж не спорю 🙂
Просто ещё один вариант, как это сделать массово. Один из многих.
Ну так и я же не спорю…![cheeky cheeky](https://obg.kz/wp-content/plugins/ark-wysiwyg-comment-editor/plugins/arkemoticons/img/06.gif)
Саша, здравствуйте! А вы не рассматривали вариант с буквицей, которая вниз уходит, она в плагине называется плавающей почему то. Я бы хотела без плагина обойтись, но вот красивее, когда заглавная буква вниз уходит.
Лена, здравствуйте! Как Вы наверное заметили, я и эту-то буквицу в статьях почти не использую. Крайне и крайне редко. Как говориться – придумал, показал, поигрался и забыл… В принципе можно со стилями поиграть, чтобы буква уходила вниз. Но это уже не мой вариант. В своём я могу и целые строки выделять буквицей…
Э-Эх, Саша, какие у вас достойные игрушки
Я подожду, вот чек бокс в форме обратной связи дождалась :). Почитаю еще и сделаю. Спасибо вам!.
Елена, я не совсем понимаю, чего Вы именно хотите, но тут нет ничего запредельно-сложного. В стиль нужно просто добавить один параметр – vertical-align. Вот смотрите:
А вот код:
Здесь значение vertical-align:middle
А здесь
Здесь значение vertical-align:top
Полный список значений можно посмотреть и подобрать под свои нужды вот здесь…
Саша, спасибо Вам, за то что увидели у меня на сайте, что плагин отвалился. Я же использовала Simple Drop Cap, а он умер год назад, оказывается. Сейчас тему меняла, с плагинами запуталась и удалила его, а восстановить не могу. С новой темой столько проблем получила, что даже не все вижу на сайте. Даже не знаю, как теперь, в каждой статье шорт код удалять![devil devil](https://obg.kz/wp-content/plugins/ark-wysiwyg-comment-editor/plugins/arkemoticons/img/13.gif)
Мне нравился вид буквицы, поэтому Вашими рекомендациями не воспользовалась. Стили не изучила до сих пор :(, сожалею.
Елена, а зачем все статьи вручную лопатить? В этой-же статье я показывал два плагина, которые позволяют сделать нужную замену одним запросом: Search & Replace и Search Regex. На второй даже ссылка есть на репозиторий. Там, кстати, подобных плагинов немало. Иногда они здорово облегчают жизнь…
А если уж так нравится буквица, то посмотрите мой вариант, особенно второй. Ни от чего не зависит, будет работать всегда – там чистый CSS, а он никуда не денется….
Ну, думаю, не скоро мне захочется теперь буквицы ставить, после таких косяков. А с плагином Search Regex попробую разобраться. Получается я активировала плагин, нашла стиль своей буквицы, удалила стиль из тега span , плагин сработал и я могу деактивировать плагин, да? Щас попробую.
Не совсем так, Елена. Там принцип – найти и заменить. Вам нужно два поиска/замены сделать.
Кстати, интересно, у меня этот шорткод срабатывает и без всякого плагина… Еле написал этот ответ, а то всё буквицей получалось…![](https://obg.kz/wp-content/plugins/ark-wysiwyg-comment-editor/plugins/arkemoticonssk/img/17.gif)
Ну даже не знаю, что сказать. Это круто, очень круто! У меня нет теперь шорткодов! Саша! Какой Вы суперски умный. Спасибо.
Да, посмотрел – шорткодов, как и не было…
Я такой…![cheeky cheeky](https://obg.kz/wp-content/plugins/ark-wysiwyg-comment-editor/plugins/arkemoticons/img/06.gif)
А плагин теперь можно деактивировать, он своё дело уже сделал.