Как найти и изменить код html

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

kak_najti_izmenit_html


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

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

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

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

Как найти и изменить html код сайта

Это интересно!

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

Термины и понятия

Было бы точнее называть статью «Как найти код css«, но я решила остановиться на «неправильном» названии, потому что в основном ответ на этот вопрос ищут в html. CSS и HTML — очень разные вещи, хоть и являются двумя частями одной системы. В интерете много технических статей, нам здесь достаточно будет понять, что:

  • HTML — отвечает за структуру сайта (что за чем следует, в каком порядке и т. д.). Это основа, на которой создан сайт. Если сравнить с домом, то это это его планировка, расположение комнат.
  • CSS — отвечает за дизайн (какие шрифты, размеры, цвета и подобное). Это общий стиль дома и стиль его отдельных комнат: какие обои будут, светильники, занавески, мебель. Поэтому документ, в котором прописываются коды css, называется «таблица стилей»

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

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

Однажды я посмотрела, что именно делает мастер. До сих пор не знаю, как устроен предохранитель. Но знаю, где его менять). Мотор я чинить сама бы не стала, а уж предохранитель заменить не сложно. Так же и с сайтами.

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

Нужно ли быть специалистом во всем

В seo-блогах часто ведутся дискуссии, нужно ли новичку глубоко разбираться в html, а еще лучше — научиться самим писать сайты, чтобы было все уникальное.. Ну, не знаю — каждому свое и тут уж кому что ближе. Мне интересно чуть больше, поэтому я сейчас дополнительно учусь у Владимира Беляева. В ноябре этого года Владимир открыл свой авторский блог. Его блог сделан на самом простом, бесплатном шаблоне, он его лишь чуть изменил под себя.

Через 10 дней существования блог занял 104-е место в рейтинге всех сайтов Рунета с посещаемостью около 1,5 тысяч человек в сутки. За 10 дней. Так в чем же дело? Владимир прекрасно разбирается в html, может заказать и купить себе уникальный шаблон. Но он хотел показать своим примером, что секрет кроется не в шаблонах, а в полезности информации.

Где прячется код html

Простите за отступление, вернемся к нашим кодам). Допустим, вы хотите изменить цвет шрифта заголовка блога. Будем рассматривать на примере моего тестового сайта.

  1. Открываем сайт в браузере Google Chrome (если еще не пользуетесь им, установите — он хорошо заточен для работы с сайтами, в нем много встроенных инструментов).
  2. Наводим курсор мышки на элемент, который собираемся изменить. В данном случае — на название блога. Щелкаем по нему «правой» мышкой и в появившемся окне выбираем ПРОСМОТР КОДА ЭЛЕМЕНТА.

ВАЖНО: не перепутайте с ПРОСМОТРОМ КОДА СТРАНИЦЫ! Вся страница нам сейчас не нужна, только отдельный элемент.

просмотр кода элемента

Щелкаем по нему  — в нижней части браузера появляется окно просмотра кода:

kak_izmenit_html_kod_stranicy_sajta

Красным выделена строка кода, которую мы меняем.

А вот в области, выделенной синим, содержится то, что мы ищем. Именно здесь вы можете найти точную (а не приблизительную) строчку кода, отвечающую за шрифты, цвет, размер, выделение и прочее. Таким образом вы можете узнать ЛЮБОЙ код любого элемента любого шаблона.

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

Общий принцип, где что ищется:

Название шрифта — в строке FONT FAMILY

Размер шрифта — в строке FONT SIZE

Как найти и изменить код html

Цвет шрифта — в строке COLOR

 

Как найти и изменить код html

Вот три основные строчки, в которых меняется название, размер и цвет шрифта любого элемента. Справа в строке style css дается позиция строчки в документе. Если вам нужно изменить какой-то другой элемент (например, нужно узнать, где находится строчка. в которой можно изменить цвет панели меню или цвет ссылок), все делается абсолютно так же.

ВНИМАНИЕ:

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

чтобы потом найти ее в таблице стилей.

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

#header h1 a, #header h1 a:visited {

Находим нужную строчку в файле «таблица стилей (style.css)». Это делается уже в админке. Настоятельно прошу, пока нет уверенности и полного понимания, все эксперименты проводить на тестовом поддомене, чтобы исключить поломку сайта.

Итак, заходим в админпанель: КОНСОЛЬ — ВНЕШНИЙ ВИД — РЕДАКТОР. В правом сайдбаре находим файл ТАБЛИЦА СТИЛЕЙ (STYLE.CSS), открываем его.

Теперь открываем строку поиска клавишами CTRL + F: в верхнем окне появится пустая строчка-окошко. Вставляем  в него ту строку, что скопировали в пункте 4.

И вы увидите, как в таблице стилей эта строчка выделится (на рисунке — оранжевым цветом):

Как найти и изменить код html

Вносим изменение в элемент. В нашем случае мы меняем цвет шрифта, поэтому в строке COLOR подставляем другое значение — того цвета, который хотим. В примере черный цвет, его значение:

#282828

Выбрать цвет можно в любом сервисе палитр веб-цветов: наберите в поисковике «Палитра веб-цветов» и подберите тот, что хотите. Выбираем цвет, копируем его цифровое значение и аккуратно подставляем взамен старого. после чего нажимаем ОБНОВИТЬ ФАЙЛ и переходим смотреть, что получилось.

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

Описывается это долго, но на практике все делается быстро, особенно когда появляется начальный навык.

Более подробно, как изменить те или иные элементы:

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

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

Как изменить Home на Главную

Как изменить «читать далее»

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

Это интересно!


Поделись своим мнением, нам не без разницы, что ты думаешь!

107 комментариев

  1. Александр 02.12.2012
  2. Лариса 02.12.2012
  3. ольга 03.12.2012
    • Larisa 03.12.2012
  4. Владимир Марник 03.12.2012
    • НеоБлоггер 03.12.2012
  5. радмир 04.12.2012
    • НеоБлоггер 05.12.2012
  6. Лариса 05.12.2012
    • НеоБлоггер 06.12.2012
  7. Ирина 06.12.2012
    • НеоБлоггер 06.12.2012
  8. Татьяна 06.12.2012
    • НеоБлоггер 06.12.2012
  9. НеоБлоггер 11.12.2012
  10. Фаниса 17.12.2012
    • Лариса 17.12.2012
  11. Фаниса 18.12.2012
    • НеоБлоггер 19.12.2012
  12. Фаниса 18.12.2012
    • Larisa 21.12.2012
      • Фаниса 21.12.2012
        • НеоБлоггер 21.12.2012
  13. НеоБлоггер 21.12.2012
    • НеоБлоггер 21.12.2012
  14. Larisa 22.12.2012
  15. Александр Ризун 03.01.2013
  16. Лариса 03.01.2013
  17. Юлия 05.01.2013
  18. Лариса 05.01.2013
  19. Юрий 19.01.2013
    • НеоБлоггер 20.01.2013
  20. Александр 20.01.2013
  21. Lada 13.02.2013
    • НеоБлоггер 13.02.2013
      • Lada 13.02.2013
  22. Татьяна Белокурская 01.03.2013
    • НеоБлоггер 01.03.2013
      • НеоБлоггер 01.03.2013
  23. allemiko 16.03.2013
    • НеоБлоггер 17.03.2013
  24. Елена 17.03.2013
    • НеоБлоггер 17.03.2013
  25. Вера 08.04.2013
    • НеоБлоггер 08.04.2013
      • Вера 09.04.2013
  26. НеоБлоггер 09.04.2013
    • НеоБлоггер 09.04.2013
      • Вера 09.04.2013
  27. НеоБлоггер 09.04.2013
  28. Александр 16.04.2013
    • НеоБлоггер 16.04.2013
      • Александр 17.04.2013
        • Лариса 17.04.2013
  29. ХМ 24.04.2013
    • НеоБлоггер 24.04.2013
    • НеоБлоггер 24.04.2013
  30. Валерий 14.06.2013
    • НеоБлоггер 14.06.2013
  31. Лора 11.08.2013
    • Лариса 13.08.2013
      • НеоБлоггер 13.08.2013
        • Лора 14.08.2013
        • Лора 14.08.2013
      • Лора 14.08.2013
        • НеоБлоггер 24.08.2013
          • Лора 27.08.2013
          • Необлоггер 30.08.2013
  32. Валентина 19.08.2013
  33. Валентина 19.08.2013
  34. Валентина 19.08.2013
    • НеоБлоггер 24.08.2013
  35. Виктор 28.10.2013
    • Александр Хрипунов 30.10.2013
      • Виктор 30.10.2013
        • Александр Хрипунов 05.11.2013
  36. Михаил 23.12.2013
    • Александр Хрипунов 24.12.2013
  37. Vadar 01.01.2014
  38. Светлана 11.04.2014
    • Александр 11.04.2014
  39. Светлана 11.04.2014
  40. Ольга Черныш 13.06.2014
  41. Flynn zcode 13.07.2014
    • Александр 28.07.2014
  42. Мария 30.07.2014
    • Александр 30.07.2014
  43. артем 14.09.2014
    • Александр 14.09.2014
      • артем 14.09.2014
        • Светлана 14.09.2014
          • Александр 14.09.2014
          • артем 14.09.2014
        • Александр 14.09.2014
          • артем 14.09.2014
  44. Алексей 11.10.2014
    • Александр 13.10.2014
    • Александр 13.10.2014
  45. Алексей 14.10.2014
    • Александр 14.10.2014
  46. bytrina 21.12.2014
  47. Василий 03.02.2015
    • Александр 03.02.2015
  48. Сергей 16.11.2015
  49. Анна 07.04.2016
    • Александр 07.04.2016
  50. Илья 18.05.2016

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *