!! Здравствуй всегда, читатель !!
обновлено:2017-05-05
издатель - в теме:Сайт на WordPress и другие cms...  …реплики:6 комментариев
Комплитра - web живопись ФАКТ динамично-циничного креатива

Как сделать отступ в абзаце красной строкой — на сайте WordPress

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

Сделаем отступ красной строки в абзацах нашего сайта. Может, кому и пригодится) Я, например, подобными возможностями CSS пользуюсь, несмотря на то, что интернет в наше легендарное время нихрена, в большинстве своём, не «шевелится», и многие пытаются «облегчаться», всеми способами урезая скрипты.

 

Вероятно, дойдёт до того, что, открыв страницу какого-нить блога уважаемого аксакала, нас встретит осовремененная лаконичная надпись: «Сайт Васи Крутого; расцветку воспринимать, как «кофе с молоком»; и непременно внюхивайтесь и фантазируйте – вас должен встретить наитончайший аромат свежеподжаренного бобокофе и т.п».

Итак:


 

Как сделать строку абзаца в статье сайта красной — CSS

 

 

 

 

вот пример, который вам нужно будет прописать к себе в файл стилей.

 

p{
text-indent: 30px /*величина отступа строки*/
}

 

Кому как удобнее, можете просто добавить его куда-нить в финал документа style.css или вживить в уже существующий селектор.

Например, у меня так:

 

div.content p { padding: 0px 7px; text-indent: 30px}

 

Но у вас (в вашем файле стилей) пример может быть каким-то иным. Главное отыскать (опытным путём) нужный селектор, отвечающий за обработку ИМЕННО контента статьи и добавить к его правилам свойства, которые показаны выше.

 

Почему так правильнее!? …да потому что (и такие случаи довольно часты), если просто подписать наш «красный» селектор к существующему файлу стилей, то отступ станет распространяться на весь сайт скопом: и на сайдбары в том числе. Так что, кого это устраивает – хорошо. А тем, которым красная строка необходима строго в теле статьи, придётся поработать со своим файлом стилей и моим примером.

 

Итог:

 

Селектор «р» отвечает за обработку основного текста на любом из сайтов. Поэтому ищите нужный вам (для подписки вышепоказанного), так сказать, по приметам р (р обычно бывает добавочным — смотрите мой рабочий пример выше)).

 

Ну и что ещё: как сделать отступ — вопрос закрыт! теперь всё зависит от вашей фантазии, где и как станете использовать предложенное красное правило tongue wink
Этим примером css красная строка в тексте вашего сайта обеспечена.

 

Вот, на всякий случай, несколько полезных свойств CSS, которми запросто можно поправить ваши тексты.

 

left – выравнивание по левому краю
center – выравнивание по центру
right – выравнивание по правому краю
justify – выравнивание по ширине

 

Как сделать отступ заголовкам? …Просто!

 

Красный отступ задаётся так: (естественно, все значения h1..h2…H3… могут меняться в зависимости способа использования)

 

h1{
text-align: center;
}

Если что-то не ясно и остались вопросы, делитесь в комментариях.
Вместе мы многое сможем! Берегите себя - complitra.ru !

Самое время делиться в соцсетях, буду признателен... complitra.ru !
 ! это самое читаемое:
   Замок в Германии (в Вернигероде), в котором Янковский сыграл барона Мюнхгаузена   В Windows 10 скоро появится турборежим — максимальная производительность системы   Интервью: Александр Цнин в теме — народная тень сталинизма, Родос — сын отца   Как пользоваться Телеграм в случае блокировки соцсети   Как отключить слежение в Windows 10 — что это вообще такое…   Величайший учёный, открывший спираль ДНК — нобелевский лауреат Джеймс Уотсон: 10 правил жизни…   Полная подборка важных ‘горячих клавиш’ и запросов к системе Windows   Программа UnHackMe — удаление руткитов, троянов и пр. IT-сволочи   Что такое VDS — VPS — основные различия с обычными хостингами   Студент с Урала доказал существование жизни после смерти — математической формулой, и…   Как и где официально скачать Windows-7-10 — создать установочную флешку   Как происходит ранжирование сайтов поисковой системой Google   Мыслишки Тони Роббинса — похожие на постулаты. Пятнадцать сценок   Как в Microsoft Word скопировать сразу весь текст на страницах документа
↔ перетаскивайте строку ↔
ещё статьи по теме:

меточная навигация:



Комментарии © 6 к статье: Как сделать отступ в абзаце красной строкой — на сайте WordPress

  1. Здравствуйте!
    Пожалуйста, подскажите, вот я нашел у себя в стилевом файле

    /*Post Content
    --------------------------------------*/
    .entry-content a {text-decoration: underline;}
    
    .entry-content p, .comment-content p {margin: 4px 0 4px;}
    
    .entry-excerpt p {margin: 0 0 4px;}

    Вот здесь куда надо вставить { padding: 0px 7px; text-indent: 30px} ?

    Ответить - Игорь
    • Здравствуйте Игорь!
      Насколько я посмотрел и проверил Ваш сайт (удалённо), понял:
      У Вас выводится на главной странице (и пр. архивах) .entry-excerpt p — определяет excerpt.
      Значит: коли делать отступ только на гл. стр. и архивах, добавляйте к строке, так:
      .entry-excerpt p {margin: 0 0 4px;text-indent: 30px;}

      Если делать отступ и в статьях, тогда так (получится более универсальнее — одним махом и в архивах и в статьях):

      .entry-content p, .comment-content p {margin: 4px 0 4px;text-indent: 30px;}

      Но имейте в виду, что вместе с текстом отодвинется на 30px и картинка статей — ибо элемент фотки находится внутри .comment-content p.

      Это, пожалуй, минус варианта структуры «отступа», если это можно назвать минусом.

      Вам желательно и картинку в этом случае отодвинуть обратно! со значением -30px.
      Добавьте к селектору .alignnone так:

      .alignnone {
          margin-top: 4px;
          margin-bottom: 4px;
          margin-left: -30px;
      }

      Картинка станет на место!!

      и если ещё что-то «съедет», поступайте по аналогии…
      Например, сдвиньте обратно инфу о статьях:

      div p.post-group-meta {
          margin: 0 0 5px;
          margin-left: -30px;
      }

      таким образомм всё выстроится, и текст будет с отступом.

      Или можно (как Вам удобнее) поработать и с .single-view .entry-content — этот селектор отвечает за отдельную статью.
      Словом, Вам нужно немного поправить стили…

      Ответить - Сергей
  2. Здравствуйте! К чему сложности с кодом? Я с новой строчки задаю цвет фона и ставлю 000. Можно ставить ключевое слово, например, в моей статье ставлю SEO — посетители видят красную строку, а роботы ключевое слово.

    Ответить - Сергей
    • Здравствуйте!
      И Ваш вариант, конечно же, возможен,- однако, в статье дано лишь CSS решение для форматирования текста…

      Ответить - Сергей
      • CSS можно таких дел натворить, уж лучше плагин найти или написать. Подскажите, если ключевое слово в цвет фона покрасить и вставить побольше в тексте-пойдет на пользу SEO продвижения?

        Ответить - Сергей
        • CSS можно таких дел натворить, уж лучше плагин найти или написать.

          это не всегда!
          1 — Если скудно представляешь что есть такое язык css, то — да — опасно эксить с рабочим сайтом: правильнее попросить профи. А вот использовать плагин не всегда целесообразно (в данном случае особенно — селекторы css у всех разные): пользоваться нужно проверенными плагами — чтоб исключить тормоза сайта от хромого кода!..
          Тема в статье — простая тема, чтобы решать её посредством плагина, хотя и требует знаний каких-то нюансов.
          2 —

          Подскажите, если ключевое слово в цвет фона покрасить и вставить побольше в тексте-пойдет на пользу SEO продвижения?

          Всё это относится к чёрному SEO, к так называемой seo коррупции: нынче поисковики подобные изыски, насколько я знаю, не жалуют… Да и переспамить текст запросто!..

          Ответить - Сергей

Прошу высказаться: Ваши суждения очень важны!!!!

   Внимание ! Обязательные поля помечены *

  доступен плагин: privacy-policy ©

  необходимо принять правила конфиденциальности и пользовательского соглашения *

Яндекс.Метрика