Редактори, розмір і колір шрифту WordPress

19.05.2014

Cайти, Wordpress

,

При створенні сторінки або запису блогу доступні два режими редагування.

Візуальний редактор

За замовчуванням у блозі використовується візуальний редактор (на базі TinyMCE). Кнопки редактора дозволяють форматувати і вирівнювати текст, вставляти списки та багато іншого.

ru_visual-editor[1]

Редактор HTML

Редактор HTML володіє меншими можливостями, але дозволяє безпосередньо редагувати HTML-код сторінок і записів. Редактор HTML можна використовувати, коли треба додати міні-код, змінити властивості шрифту або вставити вихідний код програми.

Ваш код HTML повинен бути коректним і містити тільки допустимі теги HTML. На WordPress.com також заборонено використання JavaScript.

ru_html-editor[1]

Оформлення окремих записів і сторінок

Іноді засобами візуального редактора не вдається забезпечити потрібне оформлення запису або сторінки.

У цьому випадку на допомогу приходить міць текстового редактора! Ця стаття показує, як оформити записи/сторінки з використанням коду HTML в текстовому редакторі.

Знайомство з текстовим редактором

Для початку спробуйте переглянути в редакторі написану раніше запис або сторінку, щоб побачити, як виглядає код HTML. Перейдіть на вкладку «Текст» (поруч зі вкладкою «Візуально»). Експерименти краще проводити з чернеткою запису/сторінки.

ru_editor-tabs[1]

У текстовому редакторі все є текстом – посилання, цитата, і навіть зображення. Однак тут два види тексту: вміст запису/сторінки і щось ще.  Це “щось ще” і є код HTML.

Код HTML завжди починається і закінчується кутовими дужками: <і>. Усередині кутових дужок розміщуються теги HTML. Теги – це команди HTML , що визначають вигляд і поведінку запису/сторінки. Приміром, щоб додати посилання, ми використовуємо тег <a>. Для виділення частини тексту застосовується тег <em>.

Щоб початку застосування будь-якого ефекту перед оброблюваним текстом вставляється відкриває тег: <em>. Для закінчення дії ефекту вставляється закриває тег з косою рисою : </em>.

На людську мову теги HTML переводяться приблизно так: “почати виділення тексту”, “закінчити виділення тексту. ” HTML – це набір правил, відносно простий для написання людьми і дуже простий для розуміння комп’ютерами.

Розмір і колір шрифту окремого запису або сторінки можна змінити за допомогою тега <span>. Нижче наведені приклади оформлення тексту і код, необхідний для отримання результату.

Шрифт Georgia, размер 13 пкс:.

<span style=”font-family:Georgia; font-size:13px;”>Шрифт Georgia, розмір 13 пкс:.</span>

Шрифт Times New Roman, розмір 16 пкс.

<span style=”font-family:Times; font-size:18px;”>Шрифт Times New Roman, розмір 16 пкс.</span>

Шрифт Tahoma, розмір x-small

<span style=”font-family:Tahoma; font-size:x-small;”>Шрифт Tahoma, розмір x-small</span>

Шрифт Georgia рожевого кольору

<span style=”font-family:Georgia; color:#ff00ff;”>Шрифт Georgia рожевого кольору</span>

Розмір і колір шрифту

Шрифти можна міняти за допомогою HTML, але займатися цим кожен раз виснажливо…… та все ж таки почитайте про це :)

Для отримання вищенаведеного результату в редактор HTML був вставлений наступний код:

<span style=”font-family:comic sans ms;font-size:x-large;”>Шрифти можна міняти за допомогою HTML,</span> <span style=”font-family:georgia;color:#2233ff;”> але займатися цим кожен раз</span> <span style=”font-size:x-small;”>виснажливо…</span>  <span style=”font-family:arial;color:#ff00ff;font-size:xx-small;”>… та все ж таки почитайте про це :)</span>

При необхідності ви можете поекспериментувати з трьома елементами: font-family, font-size, and color.

  1. font-family – шрифт. Сайт з прикладами:  http://www.typetester.org/
  2. font-size – розмір шрифту
  3. color – колір шрифту (краще використовувати 16-ковий код). Один із сайтів для вибору кольору: http://www.visibone.com/colorlab/big.html

Е К С ПЕРИМЕНТУЙТЕ

Додаткові відомості

  • Пишіть коректний код HTML. Наприклад, після кожного відкриваючого тега <span> повинен бути той, що його закриває </span>.
  • Використовуйте прямі  (” “), а не парні лапки (“ ”).
  • Деякі властивості тексту (вирівнювання, колір) можна поміняти за допомогою кнопок візуального редактора.
  • Глобальна зміна шрифтів можливо за допомогою платної послуги «Custom Design».

За матеріалами WordPress support