Как изменить шрифт blogger

Выбираем понравившиеся нам шрифты, отметив, что нужен нам кириллический (см. скриншот вверху). Добавляем шрифты, нажимая на плюс или удаляем ненужные, нажимаем минус.

О том, как установить красивые шрифты в Блоггере — тема сегодняшней статьи. Способ установки, который опишу ниже, простой и доступный.

Меняем шрифт

Заходим на сайт гугл со шрифтами https://fonts.google.com/ 

Можно выбирать сразу несколько шрифтов, что бы в шаблоне была только одна строчка кода. Берём понравившиеся шрифты или один шрифт, отметив, что нужен нам кириллический. Добавляем шрифт(ы), нажимая на плюс или удаляем ненужные, нажимаем минус. Помните, чем больше шрифтов возьмёте, тем дольше будет загрузка вашего сайта. Ограничьтесь 2-3. Как только просмотрели и выбрали шрифт, кстати, их не много, нажимаем на чёрную полоску внизу сайта и всплывёт окно с кодами.
Лучше выбирать шрифты применив перевод, если не слишком хорошо владеете языком. А когда станете копировать коды, переключите перевод обратно.

копировать коды

1. Вот так примерно будет выглядеть ваш код:
<link href=»https://fonts.googleapis.com/css?family=IBM+Plex+Serif&display=swap&subset=cyrillic» rel=»stylesheet»>

2. Второй код — нужен для добавления в стили css.

На сайте можно сделать некоторые настройки стилей шрифта:

настройки стилей шрифта

Теперь код нужно вставить в шаблон вашего блога строго сразу после тега <head>.
Но сперва требуется добавить к коду слеш /, перед закрывающимся тегом:
<link href=»https://fonts.googleapis.com/css?family=IBM+Plex+Serif display=swap subset=cyrillic» rel=»stylesheet»/>
И убрать вот такие значки из кода, вставив на их место пробел.

Поменять шрифт можно у заголовков виджетов, полностью текста поста, заголовка блога и так далее.
Выбираем что будем менять и добавляем CSS код выше тега ]]></b:skin>.

Применить шрифт можно к любому тексту на вашем сайте, например:
.post h3 (или .post-title ) — заголовок поста
.post-body — сообщения
.title — заголовок блога
.sidebar — виджеты
и так далее.

Пример кода для заголовка статьи

.post h3 {
font-family: ‘IBM Plex Serif’, serif;
}
Если нужно вставить шрифт только в текст статьи, то в редакторе блога, в режиме xtml добавляем код:

<div style=»font-family: »Marck Script’, cursive;«>Ваш текст</div>

На место моего шрифта Marck Script’, cursive; добавить название своего.
Получится как то так:

Использовала шрифт Marck Script.

23
comments

Буковки большие и маленькие!

Доброго времени суток! Вы только, пожалуйста, не подумайте, что сегодня мы собираемся проверять ваше драгоценное зрение…

Дело-то оно хорошее, но сугубо личное и вот об этом-то я и хотела бы сегодня поговорить. Что до меня — я несколько лет назад сделала лазерную операцию на глаза и с тех пор абсолютно счастлива… но речь в этой статье пойдет не обо мне и не о замечательных возможностях современной лазерной микро-хирургии глаза [Об этом я как-нибудь к слову расскажу или вы можете почитать тут по-английски].

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

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

Чтобы увеличит размер шрифта в блоге, шаблон менять не надо!

Рассказываю по шагам как изменить размер да и собственно сам шрифт. Этот способ будет работать для New Blogger(XML) шаблонов.
——————————————————
Необязательная вставка для самых любознательных:

Шаблоны для Blogger(a) бывают двух типов New Blogger — это XML шаблоны и Blogger Classic — это HTML шаблоны. Вам не надо обладать большими познаниями в создании Web-страниц, чтобы отличить одно от другого. Если когда вы зайдете на вашу Панель Инструментов (Dashboard), вы увидите:


[Новое сообщение]
– Изменить сообщения – Настройки – Дизайн – Просмотреть блог

… это значит у вас New Blogger шаблон, а если вместо слова Дизайн у вас в Панеле инструментов будет слово Шаблон, значит у вас Blogger Classic шаблон и может быть, если вы не очень к нему ещё прикипели вам стоит его сменить. (В английской версии Layout=Дизайн и Template=Шаблон).

——————————————————
Теперь, собственно, я расскажу и покажу на картинках Как Увеличить Шрифт:

1) Заходим Панель Инструментов кликаем на Дизайн и выбираем [Шрифты и цвета] и вот что видим:

2) Прокручиваем мышкой цвета пока не доходим до [Шрифт текста] и кликаем на него! И тут видим, что у нас есть возможность выбрать не только шрифт, но и уменьшить или увеличить его. А во время всех этих операций у нас есть возможность приглядывать за результатом в нижней половине окна. Покажу это на картинках:


3) Теперь если нам все понравилось кликаем на [СОХРАНИТЬ ИЗМЕНЕНИЯ], а если мы к этим изменениям еще морально не готовы, то [УБРАТЬ ИЗМЕНЕНИЯ].

Итак, дело сделано и мы увеличили шрифт!

Наши дорогие читатели возможно стали счастливее,
а ни этого ли мы все хотим! ;)

Всем хорошего дня,
Света

PS Иногда, так бывает что у людей, кто бесплатно скопировал где-то на просторах интернета красивый шаблон для Blogger(а) нет доступа к управлению цветами и шрифтами блога — в дальнейшем я расскажу как с этой бедой бороться.

Комментарии и вопросы более чем приветствуются,
нужна помощь — поможем!
Читать дальше…

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

Так вот и возник вопрос, как же поменять шрифт, установленный по умолчанию в блоге на blogspot в шаблоне blogger. Глянул в интернете и нашел зацепку, правда при первом поиске этого элемента ничего не нашлось.

Итак, ищем следующий код с помощью комбинации клавиш Ctrl+F вызываем окно поиска и вставляем туда:
.post-body {

Далее находим участок кода примерно такого содержания (со временем может немного поменяться):
.post-body {
  font-size: 110%;
  line-height: 1.4;
  position: relative;

и меняем значение 110% например на 140% или на 150%. Я поставил в своем блоге 150% — пусть не напрягают свое зрение при чтении моего блога. Лучше конечно это сделать сразу — не все пользователи могут увеличивать масштаб страницы — для примера удерживаете кнопку Ctrl и крутите колесико мыши вверх для увеличения и вниз для уменьшения масштаба, или же комбинация клавиш Ctrl  и знак «+» для увеличения масштаба страницы; Ctrl и знак «-» для уменьшения масштаба. Если у вас тачпад на ноутбуке, то если установлены драйвера на тачпад, то должно работать следующий метод: ставите два пальца на тачпад примерно на расстояние 1 см друг от друга и плавно разводите их в стороны — масштаб должен увеличиться и для уменьшения нужно сделать наоборот — поставить пальцы пошире и приблизить их друг к другу.
Правда это работает не на всех тачпадах. Ну а вот первый метод думаю уникален — то есть универсален — работает во многих приложениях — в оффисе ворде, екселе в броузере.

Ну и вот скрин того что стояло по умолчанию в блоге 110%.

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

внешний вид заголовка сообщения Blogger.

Настройка заголовка сообщения Blogger

В этой статье я расскажу о названии с другой точки зрения, то есть о его внешнем виде. Размер шрифта и цвет заголовка блога определяются шаблоном и могут быть изменены путем поиска в шаблоне блока кода, который начинается с h3.post-title и который содержит информацию о цветах, размерах, полях. семействf шрифтов  между фигурными скобками.  .

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

Как добавить изображение в название сообщения

Поле название поста Blogger поддерживает теги HTML, как и образы . Также вы можете добавить изображения до и / или после заголовка . Если в » Редакторе Blogger вы вставляете в поле заголовка кода , как этот

<img src=»https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/s32/cuore.png» /> Post San Valentino <img src=»https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/s32/cuore.png» />

таким образом,


 Редакторе Blogger вы вставляете в поле заголовка кода


вы получите результат, подобный следующему

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

Индивидуальные настройки названия

Заголовки Blogger имеют символы одинакового размера и цвета . Вы можете создать многоцветный заголовок с разными символами, используя тег <font> и цветовые коды. Вот этот код

<font size=»5″ face = «Arial» color=»#000″><em>C</em></font><font size=»4″ face = «Verdana» color=»#0f0″><b>O</b></font><font size=»2″ face = «Courier» color=»#off»><em>L</em></font><font size=»4″ font=»Impact» color=»#f0f»><b>0</b></font><font size=»5″ face = «Arial» color=»#036″><em>R</em></font>

если вставить в поле « Заголовок» в редакторе Blogger, это приведет к такому результату

Были использованы разные семейства шрифтов и теги <em> курсив и <b> жирный шрифт. В текст заголовка также могут быть присутствовать изображения. Например с этим кодом

<font size=»5″ face = «Arial» color=»#000″><em>C</em></font> <img src=»https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/s18/cuore.png» /> <font size=»2″ face = «Courier» color=»#off»><em>L</em></font> <img src=»https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/s18/cuore.png» /> <font size=»5″ face = «Arial» color=»#036″><em>R</em></font>

приведет к наличию такого заголовка

Как добавить текст над заголовком и под заголовком сообщения

В типографии Occhiello определяется как текст, который появляется над заголовком статьи, а Cappello — как текст под заголовком . Желая получить такой результат

мы должны начать с кода, который определяет внешний вид Eyelet и Hat . Этот код должен быть вставлен в редактор Blogger в начале тела сообщения в режиме HTML. Вот пример кода

<style>.post-title small {display:block !important;color:#aaa;border-bottom:1px dotted #000;margin-bottom:10px;padding-bottom:15px;font-size:18px !important;font-weight:normal !important;}.post-title div {display:block !important;color:#aaa;border-top:1px dotted #000;margin-top:20px;padding-top:15px;font-size:18px !important;font-weight:normal !important;}</style>

это должно быть вставлено в статью таким образом

Структура заголовка, который будет вставлен в соответствующее поле, будет выглядеть следующим образом:

<small> Это текст над заголовком, расположенное над </small> Main Title <div>,
это текст под заголовком, который появляется под основным заголовком </div>

с Occhiello тегами <small> и </small> и Cappello между тегами <div> и </div>. В заголовке вы также  можете добавить что то одно. В коде есть параметры для цветовых кодов , для стиля границы , для размера символов и для полей между Ocello, Cappello и названием поста.

Если мы решим очень часто вставлять Occhiello и / или Cappello вместе с заголовком поста, то желательно вставлять код в шаблон, а не в каждый пост. Код должен быть вставлен в Тема> Изменить HTML, выше строки </head>, потом сохраните шаблон. При редактировании новой статьи просто введите структуру заголовка в соответствующее поле, не добавляя другой код.

Как показать часть названия красивом

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

часть названия красивом

с латинским названием вида курсив. После сохранения шаблона перейдите в Тема> Изменить HTML и, сразу над строкой ]]></b: skin>, вставьте этот код

.post-title span {font-style: italic;}

Затем сохраняете шаблон. При создании сообщения в поле заголовка вы будете вводить следующие символы:

Ромашка — <span> Рецепт ромашки </span>

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

Доброго времени суток, друзья. Сегодня шпаргалка о том, как легко можно заменить привычный шрифт на нестандартный. Именно такой (или любой другой) каким вы сейчас его видите. 


Можно добавить в блог новый и необычный шрифт от Гугл. Я писала об этом варианте в статье WEB-ШРИФТЫ для блога. Обойдёмся на этот раз без всяких скачиваний и подключений. Ниже приложила таблицу наиболее распространённых шрифтов. Ну и по теме немного информации в  самом посте. А пока перейду на обычный шрифт.

нестандартный шрифт в блоггере

К сожалению, в самом редакторе сообщений нам предлагается всего 7 стандартных видов. А если очень хочется чего — то необычного в тексте, будь то текст целиком, или отдельный фрагмент, или подзаголовок?

Попробуйте в черновике написать просто любое предложение. И в редакторе с помощью набора инструментов задаём ему синий цвет, нужный шрифт и размер. Допустим вот так

Этот текст будет примерно таким

Если перейти в режим HTML, то увидим весь код, а именно стили нашего текста, вот такого вида

<span style=»color: #45818e; font-family: Courier New, Courier, monospace; font-size: large;»>Этот текст будет примерно таким</span>

где

color: #45818e; — цвет самого текста
ont-family: Courier New, Courier, monospace; — семейство шрифтов
font-size: large; — размер шрифта

Собственно основные стили текста. Но сегодня речь о шрифтах. В таблице ниже вы можете выбрать нужный вам стиль текста и скопировать его название. К примеру я взяла шрифт Comic Sans Ms и заменила предыдущий на него. В результате получилось вот что. 


Этот текст будет примерно таким.

<span style=»color: #45818e; font-family: comic sans ms;font-size: large;»>Этот текст будет примерно таким.</span>

 распространённые русифицированные шрифты

Текст на странице Название шрифта
Шрифт — Arial
Шрифт — Arial Cyr
Шрифт — Arial Black
Шрифт — Book antiqua
Шрифт — Bookman old style
Шрифт — Calibri
Шрифт — Cambria
Шрифт — Candara
Шрифт — Century
Шрифт — Century gothic
Шрифт — Comic Sans Ms
Шрифт — Consolas
Шрифт — Constantia
Шрифт — Corbel
Шрифт — Courier
Шрифт — Courier New
Шрифт — Courier, monospace
Шрифт — Cursive
Шрифт — Franklin Gothic
Шрифт — Gabriola
Шрифт — Garamond
Шрифт — Georgia
Шрифт — Helvetica
Шрифт — Impact
Шрифт — Lucida console
Шрифт — Lucida Sans Unicode
Шрифт — Mistral (Mistral)
Шрифт — monospace
Шрифт — Monotype Corsiva
Шрифт — MS Sans Serif
Шрифт — MS Serif
Шрифт — Palatino Linotype
Шрифт — Sans-serif
Шрифт — Segoe print
Шрифт — Segoe script
Шрифт — Sylfaen
Шрифт — Tahoma
Шрифт — Times New Roman
Шрифт — Trebuchet ms
Шрифт — Verdana

Для информации — 

Параметр font-family определяет список семейств шрифтов. Обычно задаются несколько похожих шрифтов в порядке предпочтения, а их названия разделяются запятыми

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

Семейство шрифта (примеры)

  • <style=»font-family: ‘Times New Roman’, Verdana, sans-serif;»>
    пропала собака по кличке Дружок
  • <style=»font-family: ‘Monotype Corsiva’, sans-serif;»>
    пропала собака по кличке Дружок
  • <style=»font-family: ‘Comic Sans MS’, sans-serif;»>
    пропала собака по кличке Дружок
  • В интернете много информации по стилям шрифта, нет смысла повторяться. Ещё некоторые дополнения к статье про шрифты

    Размеры шрифта

    font-size: xx-small»> — очень очень маленький
    font-size: x-small»> — очень маленький
    font-size: small»> — маленький
    font-size: medium»> — средний
    font-size: large»> — большой
    font-size: x-large»> — очень большой
    font-size: xx-large»> — очень очень большой

    В Internet Explorer бывают проблемы с масштабированием текста. И чтобы их решить вместо пикселей используется значение em. 1em равен 16 пикселям.
    Допустим размер текста у нас рав 14px. Делим 14 на 16 получаем 14 / 16 = 0,875 em.

    font-size:0.875em;

    Имея минимальное представление о стилях шрифта, менять в Блоггер их можно где угодно. Это в самом посте, названии сообщения, подзаголовках, заголовках статей, гаджетов.

    В качестве примера покажу на заголовках гаджетов на тестовом блоге.  Все заголовки были обычные

    нестандартный текст в заголовке гаджетов

    Задала  некоторые стили для них и прописала непосредственно в шаблоне ко всем гаджетам сразу.

    шрифт заголовка гаджетов

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

    Возможно, кому — нибудь пригодится информация как подключить и использовать шрифт шрифт Font Awesome в блоге.

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

    Всем успехов и до встречи.

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

    Я добрался до вёрстки статей в корпоративном блоге, настроил интерлиньяж и делюсь опытом.

    Витторе Карпаччо «Святой Георгий и Дракон», 16 век. Дракон символизирует хаос и уродство корпоративной безблагодатности, а святой Георгий — систему, состоящую из взаимосвязанных компонент: мужика, копья, доспехов и лошади. Дама, взирающая на поединок, символизирует автора статей — юриста Алину. Алина, привет!

    Каждый четверг в блоге FreshDoc выходит статья с советами юриста.

    Три месяца я только редактировал черновики юристов и не мог повлиять на оформление. Результат выглядел плохо, я изводил коллег нытьём о нормах вёрстки, свисающих союзах, добре и красоте. Теперь мне доверили публикацию, я получил доступ к админке и оторвался, как мог.

    Сегодня я расскажу: что и почему было не в порядке, как я это исправил и что еще я бы сделал, чтобы настала благодать.

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

    Проблема

    Блог размещен на веб-сервисе Blogger. Статьи пишут и редактируют в Гугл-доке, а потом вставляют в режиме визуального редактирования. Из-за этого вид статей непредсказуемо разнится:

    Визуальный редактор Bloggera примитивен, в нем нельзя создать единый набор стилей. Изменить криво оформленный текст в редакторе не выйдет. Поплывут отступы, изменится расстояние между строками и абзацами. Точно задавать отступы редактор не даёт, это доступно только в режиме правки HTML. Чтобы привести все статьи к единому виду без трудоёмкой правки кода, придётся загнать их в Ворд, отформатировать и скопировать назад. А если позднее дизайн блога изменится, придётся переделывать.

    Решение

    Чтобы победить хаос и уродство, мало придумать метод. Нужна система.

    Текст в блоге размечен HTML-тегами, делящими текст на заголовки, абзацы и списки. Внешний вид этих элементов определяется специальными правилами — таблицами стилей CSS.

    Blogger позволяет задавать стили для всего блога. Но визуальный редактор вставляет правила оформления непосредственно в HTML-теги, после чего изменить их внешний вид через единый CSS уже нельзя. Разделим текст и правила оформления: напишем таблицу стилей и придумаем метод разметки текста.

    Таблицу стилей необязательно писать с нуля. Можно оформить текст в Ворде или Гугл-доке, скопировать в Blogger и посмотреть, какими правилами задано оформление в режиме правки HTML.

    Размечать текст HTML-тегами вручную трудоёмко. Нужна автоматизация. Кроме этого, в тексте нужно расставлять неразрывные пробелы — служебные символы, сцепляющие два слова вместе. Это нужно для привязки союзов к следующему слову и разделения чисел на разряды.

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

    Технология

    Текст статьи редактируем в специальном шаблоне Ворда со стилями, похожими на стили в блоге. Это помогает понять, где ставить ссылки, чтобы они не разрывались переносом строки, и следить за формой правого края абзаца. Хотя текст выровнен влево, правый край не должен выглядеть рваным и хаотичным (на картинке именно так).

    Текст в шаблоне я правлю в режиме отображения служебных знаков, обозначающих пробел, абзац и заголовки. Чтобы подготовить шаблон, я подобрал размер шрифта так, чтобы на строке помещалось 72 символа с пробелами. При такой длине стоит увеличить расстояние между строками, чтобы текст было легче читать.

    Готовый текст преобразовываем в «чистый HTML». Сохраняем разметку абзацев и гиперссылок, но убираем встроенные в теги стили. После этого текст слушается CSS.

    Получившийся текст с тегами отправляем в «Типограф». Он корректно расставляет неразрывные пробелы, правильные кавычки и заменяет дефисы на тире. Обработанный текст предсказуемо ведёт себя при любой ширине колонки, если в будущем она изменится.

    Копируем текст в Блокнот и размечаем заголовки тегами <H*>. В статье максимум три уровня заголовков. Первый — заголовок статьи, второй — раздела, а третий — строчный, с него начинается абзац. Если в популярной статье больше, её нужно переписать.

    Не правьте HTML в Гугл-доке. Он заменяет латинские кавычки спецсимволами, их браузер не понимает.

    Теперь организуем логические блоки.

    Не переключаясь в режим визуального форматирования, вставляем картинки, помещаем их в контейнер <div class=”el_pic”> </div>. Для картинок прописаны отступы от текста, но можно добавить и других правил. Например, чтобы они растягивались по ширине колонки.

    Размечаем фактоиды контейнерами <div class=”el_fact”> </div>. Фактоиды — выводы или цитаты, на которые редактор хочет обратить внимание читателя. Фактоид помогают разбить скучную портянку на небольшие блоки. В такой статье читателю проще ориентироваться, и выше вероятность, что он прочитает её до конца.

    Организуем маркированные списки <UL>. Теги списка помещаем внутри тегов <P> и </P>. Логически список — это длинное предложение, для удобства чтения разбитое на строки. Отступ между описательным предложением и элементами списка не нужен. Маркеры списка заменяю на короткое тире и делаю его чуть светлее цвета основного текста. Так маркеры опрятны, помогают читать и не мешают. Для списков с перечнем гиперссылок предусмотрен стиль lnk, с увеличенным расстоянием между пунктами, чтобы по ссылкам было легче попадать курсором или пальцем.


    Акронимы типа ОСАГО или ДТП заключаем в теги <acronym></acronym>. Акронимы состоят из заглавных, которые нужно разряжать — увеличивать расстояние между буквами. Такой акроним выглядит красиво и его проще читать. Это едва уловимая деталь добавляет редакторского пафоса.

    Помещаем статью в родительский контейнер <div class=”editore”> </div>. Таблица стилей действует только на текст внутри этого контейнера, чтобы правила не ломали стили других элементов страницы. Это называется инкапсуляцией правил оформления.

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

    Вот как выглядит верстка текста из Ворда в сравнении с полученным результатом:

    Что еще надо бы сделать

    • Переделать под новое оформление остальные статьи. На это нужно время, а его нет. По крайне мере, новые материалы будут выходить по технологии.
    • Сделать блогу нормальный дизайн. Его внешний вид за пределами добра и зла.
    • Подобрать гармоничную шрифтовую пару. Calibri и Cambria — не самое удачное сочетание.
    • Доделать CSS. Статья уже выглядит неплохо, но в стилях не хватает системности: гармоничных соотношений между размером шрифта и отступами. Еще не помешает привести единицы размеров к относительным величинам, привязанным к размеру шрифта.
    • Начать подбирать небанальные картинки и вменяемо их оформлять. Возможно, я доберусь и до них.

    Ссылки по теме

    Текстовый файл с таблицей стилей — для любопытствующих.

    О программе «Типограф».

    Convert Word documents to Clean HTML — чистит теги, заменяет <b> на <strong>, а <i> на <em>.

    Гигиенические требования к вёрстке в Советах Бюро Горбунова. Редактор не может не уметь верстать, потому что вёрстка — единственная физическая форма текста. Работа редактора — космос.

    Понравилась статья? Поделить с друзьями:

    Читайте также:

  • Как изменить шрифт bdo
  • Как изменить шрифт arduino ide
  • Как изменить шорткод woocommerce
  • Как изменить шов на швейной машинке
  • Как изменить шлюз сети

  • 0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии