Смотрится очень эффектно, по-крайней мере, на мой вкус, и я подумала, что здорово было бы сделать в своем блоге так же.
Позже, когда я завела рубрику «Задайте свой вопрос», и стала публиковать ответы, так же задумалась, как здорово было бы интересней оформить письма от читателей.
Пока я была только в мыслях, от моего постоянного читателя Retliff поступил комментарий с просьбой рассказать, как сделать нечто подобное. Возможно, он подразумевал какое-то более простое решение, чем то, которое в итоге сделала я.
Пришлось от мыслей перейти к действиям, и вот что получилось. Частично можно увидеть уже в этой статье. Если вам нравится, и возникло желание сделать у себя так же, то читаем дальше инструкцию.
Главное, обращаю сразу ваше внимание на то, что после всех настроек, когда вы захотите, чтобы определенный кусок текста находился в определенном блоке, нужно будет править HTML код. Сложностей совершенно никаких в этом нет, но потребует от вас внимательности. Итак, приступим.
Первый шаг – это определиться, какую информацию будет нести каждый блок. Например, у меня сейчас созданы блоки
Каждому блоку нужно придумать свое название, которое вы должны всегда помнить, потому что постоянно будете его использовать.
Итак, у меня есть 4 вида блоков. Частично, все эти блоки выглядят одинаково – рамка, скругленные углы, тень, расположение картинки, отступы. А частично – по-разному, это цвет блока, картинка, шрифт.
Внешний вид всегда задается с помощью CSS стилей. И получается, что часть кода всегда будет одинакова для всех блоков, а другую часть кода нужно будет присваивать каждому блоку в отдельности.
Открываем Дизайн – Изменить HTML, находим строчку:
]]></b:skin>
Весь дальнейший код CSS вы должны поместить до этой строчки.
Итак, у нас есть названия блоков, и есть код, который для всех блоков одинаков. Внесем этот код в шаблон блога.
Дальше мы должны вставить код для каждого блока в отдельности. У меня этот код такой:
Сохраняем шаблон. Проделав это однажды, больше к этому мы не вернемся. Теперь главное запомнить, как в теле сообщения выделять нужные куски текста, чтобы они принимали тот внешний вид, который мы для них определили.
[ads1]Итак, вы пишите свою статью как обычно. Пользуетесь ли вы редактором блогов или отправляете через визуальный редактор Blogger – не важно. После того, как статья готова, но ещё не опубликована, переходим на вкладку Изменить HTML.
Находим тот абзац текста, который вы хотите выделить в определенный блок. И окружаем его тегами таким образом:
Вот таким не хитрым способом можно внести визуальное разнообразие в свои статьи. Надеюсь, это пригодится не только мне.
Удачи вам.
Доброго дня, читатели блога SEO-Дилетанта. Я всегда получаю много вопросов от вебмастеров, владельцев сайтов и блогеров об ошибках и сообщениях,…
*Рекламный обзор Доброго дня, читатели Блога SEO-Дилетанта. Кнопки «Поделиться» и «Подписаться на обновления» необходимы любому сайту для…
Доброго дня, читатели блога SEO-Дилетанта. На днях* в августе 2016 года я полностью перевела свой блог на защищенный протокол…
Доброго дня, читатели блога SEO-Дилетанта. Обычно подобные посты пишут в конце года, и я готовила его в декабре, но не успела…
Доброго дня, читатели Блога SEO-Дилетанта. В сети множество статей о создании и настройке блога на WordPress. Каждый автор видит…
Доброго дня, читатели блога SEO-Дилетанта. О том, как выбрать хостинг, написано немало статей. Только в Яндексе на данный…
This website uses cookies.
View Comments
«В Opera нет тени вообще.» — потому что не указано свойство box-shadow.
Спасибо большое за замечание, исправила. Как хорошо, когда есть кому подсказать:)
Классная статья! Искала как раз нечто подобное для своего блога. Иногда нужно выделить красиво текст даже для восприятия читателя.. Разбавлять картинками конечно вариант, но это легче для блога.
З.Ы. а если усложнить задачу? и можно добавить вместо заливки? - мне это не нужно, ну мало ли захочется проявить фантазию?))
Спасибо огромное, Катя! Я спрашивал именно об этом!-)
Пока ждал твоего ответа - нашёл в Интернете сервис "Рамочник".
Он позволяет оформить тект рамками, но никакой автоматизации процесса!-)
Как всегда всё очень доходчиво и профессионально!
Слово "Дилетант" в названии твоего блога уже давно утратило актуальность!-)
Погуляла по вашему блогу, стала очень красиво с этим нововведением. Как то даже лучше вычленяется нужная информация, взгляд, что называется сразу находить то, что искал.
спасибо, очень полезный трюк, за код отдельное спасибо :)
Очень красиво!
1.А если без картинки делать - то просто не ставить ссылку на нее?
2.В WP есть плагин который так делает? (просто завел недавно и там блог)
Усложнить задачу можно, только для этого нужно код дорабатывать. Дело в том, что картинка в блоке уже является фоном (background-image), т.е. заливкой, а залить один бокс двумя фонами сразу нельзя.
Сергей, я рада, что смогла угодить тебе. "Рамочник" теперь в топку? :)
Пока ещё мало где изменила, но некоторые статьи постепенно доработаю. Спасибо.