Видеоурок: Меняем картинку для шапки блога
Хотя авторы шаблонов оформления действительно вкладывают душу в свои творения и делают гармоничный дизайн, каждый блоггер видит свой блог по-своему. И поэтому всегда хочется что изменить в готовой теме блога.
Самым ярким элементом оформления блога является его шапка. Именно шапка задает настроение и тематику блога и много говорит о его авторе.
Сегодняшний видеоурок рассказывает о том, как можно добавить в шапку свою картинку: определить размер для нее, сделать нужный файл и изменить настройки темы блога для отображения этой картинки.
Все действия в программе PhotoShop в этом уроке выполняются с помощью инструмента Move Tool (Указатель)
Скачать видеоурок «Меняем картинку для шапки блога» 5 Мб
Если ваш блог стал популярным и благодарные посетители буквально атакуют его своим вниманием, то выделенный сервер как раз и поможет вам справиться с таким наплывом читателей. Он обеспечит повышенную производительность и безопасность вашего проекта в Интернете.
Вы правы, иногда хочется, что то поменять в своем дизайне. Нужно подумать, как лучше это сделать.
Дизайн блога, как одежда – всегда хочется примерить или даже купить что-то новенькое
Марина! СПАСИБО! Просто сверхполезная статья! Пойду менять шапку!))
Спасибо, за дельный сайт и уроки. Как раз собралась менять шапку на одном из своих блогов. Правда, для начала придется ее как следует прорисовать.
Ну, что девочки, встретим новый год в новых “шапках”?
Приглашаю вас к себе в гости на “Самопрезентацию” и узнать кое-что обо мне.
Спасибо большое! В гости уже сходила
Хоть шапку менять умею, но очень интересно было посмотреть и послушать, спасибо!))
Спасибо, Маруся, что зашла в гости
Марина, а откуда нужно заходить чтобы редактировать тему… Что то я торможу… Прямо их блога? Если из панельки инструментов заходишь, то она выглядит совсем по другому. Помогите пожалуйста разобраться!
Нужно зайти в админпанель блога, найти в левом меню пункт Внешний вид – Редактор, а там уж искать файл для редактирования.
Посмотрите еще мои видеоуроки, я там подробно все показываю:
http://marina-makarova.info/?p=117
http://marina-makarova.info/?p=130
http://marina-makarova.info/?p=221
Если не получиться, то заходите и спрашивайте
Марина, подскажие пожалуйста, я нарисовала шапку на 1из блогов. Буквы др сделала и чобы название блога недублировалось, убрала в настройках блога его название.
Шапка то мне нравится, но во первых, она не кликабельная.
а во-вторых получается, что главная станица блога у меня без названия.
вот тут посмотрите: http://women.zakonyuspeha.ru/
подскажите как сделать ее шапку кликабельной?
Не все темы поддерживают логотип блога в виде картинки. У меня тоже такая проблема была на “Розочках” в шаблоне Pistachio
и сам заголовок блога появляется в названии главной страницы.
Я оставила там текстовый заголовок блога, но в стилях сделала его “прозрачным”. От этого, правда, вся шапка блога не стала кликабельной, но какая-то часть ее, где располагался заголовок, кликается
Вот кусок кода в файле style.css, который нужно добавить для прозрачности (выделено жирным)
.header h1{
font-size: 48px;
margin-bottom: 10px;
font-weight: bold;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
}
Марина, у меня не получилось, почему-то когда подставляю эту часть картинку вобще не видно
вот у меня такой код там:
#header{float:left;height:320px;width:1000px;padding:0;background:url(‘images/var1.jpg’) no-repeat;margin:0px;padding:0px;}
#header h1 {margin:0px;font:50px Georgia;color:#FFFFFF;text-align:right;font-style:italic;padding-top:20px;}
#header h1 a {font-weight:normal;color:#FFFFFF;}
#header h1 a:hover {text-decoration:none;}
Нужно этот код вставлять не для картинки просто в #header, а для заголовка Н1.
Зпись #header h1 обозначает “Заголовок Н1, который расположен в хедере”. И тебе нужно код добавлять именно для него.
Ну, например, в
#header h1 {margin:0px;font:50px Georgia;color:#FFFFFF;text-align:right;font-style:italic;padding-top:20px;}
добавляешь еще
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
Чтобы получилось так:
#header h1 {margin:0px;font:50px Georgia;color:#FFFFFF;text-align:right;font-style:italic;padding-top:20px; filter:alpha(opacity=0); -moz-opacity:0; opacity:0;}
Марина, спасибо, все получилось.
только я еще увеличила размер букв перед тем как сделать их бесцветными, чтобы увеличить кликабельную область
Молодец, Мариночка!
ксати, жалко, что вы убрали последние комменты с этого блога. Было очень удобно)
Было удобно? Ну чтож, я добавлю их в сайдбар
Марина я снова к вам, по поводу букв . Дело в том что в Мозиле буквы прозрачные, а в интернет-эксплорере -остались белыми
что можно сделать?
Вот тут я так сразу и не знаю что ответить…
У меня на Розочках так сделано, и буквы в эксплорере тоже прозрачные.
Будем наедятся, скоро появится и гайд для тех кто пользуется оперой
Установите себе Mozilla Fifefox и в таких ситуациях пользуйтесь еще и этим браузером.
Ой, как все толково “разжевано”. Девочки, подскажите ктонить, где взять картинки для смены шапки блога?
Лоис, зайдите на сайт http://www.lenagold.ru/ – там миллионы картинок
Спасибо Марина! Для меня урок был очень полезен. Я визуал, одно дело прочесть, другое увидеть.
Спасибо за ваши инструкции и видео. Но мне у вам просба. Я смотрела видео – Меняем картинку для шапки блога- а я не как не смогла понять одно место – сервис и дальше не как. На моем компютере нет таких мест. Как можно свами встретиться на скайпе? Если это вас не сложно.
Мой скайп: maigavilcina
Чтобы в браузере InternetExplorer открыть средства разработчика, можно нажать клавишу F12 на клавиатуре.
Марина добрый день!Подскажите пожалуйста, установил шаблон в wordpress, решил заменить картинку в шаблоне, заменил, но, новая картинка больше по размерам и теперь она у меня отображается на половину. Что мне нужно сделать, чтоб она отображалась полностью?Спасибо!
Здравствуйте, Денис!
Скорее всего вам нужно увеличить высоту height для элемента header. Посмотрите, какая высота вашей новой картинки в пикселях и подставьте это значение в файл style.css . Найдите там фрагмент типа этого:
#header { padding: 0 35px; height: 200px; background: url(images/header.jpg) no-repeat center; position: relative; z-index: 100; }
и поставьте нужное значение.
Спасибо, все получилось!
Марина, я только установила Фотошоп. И какое счастье, я случайно попала на Ваш сайт. Как Вы всё понятно объясняете. Я в очередной раз убеждаюсь, что женщины доходчиво всё растолковывают в сравнении с мужчинами. Желаю Вам и дальше радовать своих посетителей. С наступающим Новым годом!
Спасибо, Ольга
Мы ведь привыкли по сто раз объяснять детям, пока они поймут, поэтому и получается это у нас лучше, чем у мужчин
Марина добрый день!
Подскажите пожалуйста, выбрал трехколончатый шаблон для своего сайта (сайдабар слева и справа), единственная проблема, при создании страниц меню, у меня автоматически созданная страница добавляется в верхнем уровне меню над шапкой. Как мне отменить автоматическое добавление в верхнем уровне меню? В админ панеле в разделе меню “Автоматически создавать новые страницы верхнего уровня” галочка не стоит.
Марина! Я – чайник. Создала свой сайт после самостоятельного обучения. Естественно, установила бесплатный шаблон, нашла тот, который мне нравится. Но он меня не совсем устраивает, хочу поменять фон и заголовок, но незадача получается. Посмотрела ваш урок, попыталась сделать шапку и не смогла – как-то интересно залит и фон и шапка в серый цвет, размеров нет. Сижу, экспериментирую на Денвере, но ничего не выходит. Я экономист по образованию и, хотелось бы писать самой на темы, в которых разбираюсь, хотелось бы что-то и зарабатывать (что греха таить), да вот – не получается. И посещаемость низкая и ТИЦ ни в дугу, что делать? Может бросить, чтобы не позориться. Много советчиков в интернете, но интерес у всех меркантильный. Я бы и не прочь оплатить – но чтобы цена подъемная и результат был. Подскажите честно, как быть?
Александра!
С вашим блогом действительно что-то не так – он скорее всего под фильтром АГС у яндекса
потому что в поиске яндекса всего 1 страница. Поэтому и посещаемость небольшая.
Насчет меркантильного интереса советчиков могу сказать только то, что люди работают – собирают информацию, проверяют ее на практике, делают курсы, а это все конечно должно стоить денег. Кто же будет на шару работать?
Марина добрый день!
Подскажите пожалуйста, не знаю как в стандартное теме Twenty Ten изменить размер рисунка в шаке. В редакторе стилей стоит следующий код:
#site-generator a {
background: url(images/wordpress.png) center left no-repeat;
color: #666;
display: inline-block;
line-height: 16px;
padding-left: 20px;
text-decoration: none;
где именно мне нужно указать размер картинке в пикселях 955 на 380 ?