Художник

Приветствую Вас, Друзья! Эта статья является продолжением предыдущего поста: Как сделать резиновую шапку для сайта. Сейчас мы рассмотрим, как изменять шрифты и их размер в заголовке и подзаголовке, как смещать их в ту или другую сторону. А так же, научимся вставлять логотипы (картинки) в шапку темы WordPress – F2. Начнём с заголовка.

Как изменить шрифт в заголовке сайта

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

 Т.е. я вижу на своём компьютере объёмный, не совсем обычный шрифт с тенями. Но как же я удивился, когда на работе открыл свой сайт в компьютере начальника. На меня смотрел стандартный, как в газете “Правда” заголовок, безо всяких теней и выпуклостей. В чём секрет?

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

Давайте посмотрим в стилях какие шрифты предлагает автор шаблона. Мы видим, что для всех заголовков от h1 до h6 предложены шрифты: ‘Times New Roman’, Times, serif

h1, h2, h3, h4, h5, h6 {
color:#CC9900;
font-family:’Times New Roman’, Times, serif;
text-align:left;
}

h1 {font-size:2.6em;}
h2 {font-size:2.4em;}
h3 {font-size:1.8em;}
h4 {font-size:1.4em;}
h5 {font-size:1.2em;}
h6 {font-size:1em;}

Известно, что браузер читает и отображает самый первый по-порядку шрифт, который установлен на используемом компьютере. Если компьютер не видит первый шрифт, то отображается следующий, если и следующего не видит, отображается третий и т.д.. На данном сайте для заголовка в шапке установлены такие шрифты: PG Isadora Cyr Pro, Cambria Italic, Georgia, Arial, Helvetica, Sans-serif; – их мы и установим в тестовом блоге. На своих блогах Вы можете подобрать любые другие шрифты – о вкусах не спорят. И так, копируем строчку ниже:

font-family: Georgia, PG Isadora Cyr Pro, Arial,Helvetica, Sans-serif;

и вставляем вот сюда: (стрелка 1) затем, обновляем файл (стрелка 2).

Переходим на Главную страницу, обновляем и видим, что шрифт в заголовке изменился, но размер очень маленький.

Поэтому, установите под только что вставленной строкой вот эту строчку:

font-size: 60px;

Не забывайте обновлять файл после каждого изменения и просматривать изменения на главной странице, так же, не забывая её обновлять. Для максимального удобства откройте главную страницу сайта в одном окне браузера, а окно редактора в другом окне. Тогда не придётся всякий раз искать изменяемые блоки в редакторе.

Если заметили, я специально вставил изображение в шапку, но самой картинки ещё нет в шаблоне, её нужно ещё загрузить, но это чуть позже. Нужно сначала отодвинуть заголовок от картинки. Она будет такая же и на том же месте, как и на этом сайте в данный момент.

Вставьте ниже ещё эти строчки:

font-weight: bold;
letter-spacing: -1px;
margin-bottom: 0 !important;
padding: 0px 0 0 170px;
color:#32B8DA;

Где, внутренний отступ слева равен 170px. Меняя это значение, можно смещать заголовок правей или левей. Интервал между буквами равен минус (–1px), меняя это значение, меняется слитность букв. Пока наши стили выглядят вот так:

#headerlogo h1 {
margin:0;
font-size:3em;
font-style:italic;
font-family: Georgia, PG Isadora Cyr Pro, Arial,Helvetica, Sans-serif;
font-size: 60px;
font-weight: bold;
letter-spacing: -1px;
margin-bottom: 0 !important;
padding: 0px 0 0 170px;
color:#32B8DA;
}

Теперь добавим несколько слоёв разного цвета для объёма и  заголовок, пока оставим в покое. Вот эти строчки добавляем:

text-shadow: 0 1px 0 #cccccc,
0 3px 0 #c9c9c9,
0 4px 0 #4dbfda,
0 5px 0 #0164DC,
0 6px 0 #2E3F84,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);

Смотрим на изменения:

 

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

#headerlogo div.description {
margin:20px 0px 0px 10px;
background:transparent;
color:#A7A7A7;
font-family: Tahoma, Verdana, Georgia, Arial, Helvetica, Sans-serif;
font-size:18px;
/* text-shadow: -0,5px -0,5px #666, 1px 1px #FFF; color: #FF9900;*/
text-shadow: 0 1px 0 #000000;
}

Где, margin — наружный отступ сверху равен 20 px, отступ слева равен 10 px. Это значит, что изменяя отступ сверху, мы меняем расстояние между заголовком и подзаголовком.

color – цвет шрифта

font-family – названия шрифтов

размер шрифта — размер шрифта

text-shadow – текст с тенью, глубина тени и цвет тени

Чтобы сдвинуть весь блок заголовка с подзаголовком обратитесь вот сюда:

#headerlogo {
position:relative;
top:40%;
left:20px;
}

Изменяя процентное значение, будет меняться расстояние заголовка с подзаголовком от верха шапки. Ну, с заголовками вроде разобрались, (если что-то упустил, подскажите, добавим) начнём вставлять картинки (логотипы).

 

Как вставить логотип в шапку

 

комп в наушниках2

 

Логотип (лого, logo) – уникальный, фирменный знак сайта. Он может выглядеть по-разному – в виде картинки, которая своим видом частично рассказывает о содержании сайта. В виде надписи (название сайта, фамилия автора, url-адрес и др.) или какого-нибудь отличительного, запоминающегося знака. Почти на всех успешно развивающихся сайтах присутствует свой, неповторимый и запоминающийся знак-логотип. Знак можно создать самому или воспользоваться формой поиска и найти подходящий к тематике сайта. И так, Логотип придумали, давайте установим его на сайт. Запустите программу-клиент FileZilla, соединитесь с сайтом, откройте папку images, пройдя по пути: /public_html/wp-content/themes/f2/images. (стрелка 1)

Найдите нужное изображение (стрелка 2) и загрузите его в папку с изображениями. (стрелка 3)

В моём случае, файл имеет имя на русском языке и расширение PNG. Переименуем его – кликните по файлу правой клавишей мыши (стрелка 1) и в выпадающем контекстном меню выберите: Переименовать. (стрелка 2)

Особо не мудрствуя, назовём этот файл: – logotype.

 

Откройте в редакторе блога файл header.php (заголовок), пройдя по пути: админка/ внешний вид/ редактор/ header.php и вставьте вот эту строчку:

img src=»ПОЛНЫЙ АДРЕС САЙТА/wp-content/themes/f2/images/ИМЯ ФАЙЛА» style=»position:absolute; top: -60px; left: 0.8%;»

Где: значения

 top: — смещает картинку ближе или дальше от верха шапки

left: 0,8%; – расстояние от левого края шапки в процентах

Вот в это место: (стрелка 1), не забудьте Обновить файл (стрелка 2)

(все картинки кликабельны)

 

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

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

img src=»Полный Адрес Сайта/wp-content/themes/f2/images/logotype1.png» style=»position:absolute; top: -18px; right: 6%;»

Где: значения

top: – указывает на расстояние от верха шапки

right: 6%; – расстояние от правого края шапки в процентах

logotype1.png – Название картинок остаётся одинаковым, меняются лишь порядковые номера. Если первое изображение не имело цифровых значений, то все последующие имеют порядковый номер. Вот, как здесь, например:

 

Да, чуть не забыл, все эти картинки по слоям находятся над текстом. Но если нужно разместить картинку под текстом например, как у меня вот здесь:

 

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

div id=»header»

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

 

Удачи Вам!

  © Михаил Ковеньков

Поделиться ссылкой: