Оформлення картинок в постах через CSS в Blogger (Blogspot)
За допомогою CSS властивостей можна налаштувати відображення практично будь-якого елементу веб-сторінки, в тому числі і картинок. У цій статті мова піде про структуру блоку з зображеннями і які основні селектори можна використовувати для стильового оформлення картинок в постах блогу на Blogger. А також розглянемо питання про те, як зробити перші зображення (превью) в постах одного розміру і задати їм однаковий стиль.
Отже, почнемо з блоків додаються зображень.
Зображення доданий в режимі HTML має найпростіший код:
Всі параметри - опис, підказка, розміри і т.д. а при необхідності і додаткові блоки, в даному випадки, прописуються вручну. Цей спосіб хороший для просунутих блогерів.
При завантаженні, картинка обертається в додатковий контейнер, а HTML вся конструкція виглядає приблизно так:
У цього контейнера є свій селектор - .separator. який можна використовувати для оформлення всього блоку картинки.
Якщо ж додається підпис. то замість блоку, зображення обертається в таблицю:
| Підпис до зображення |
Вся конструкція має селектор: .tr-caption-container. а осередок з підписом окремий - .tr-caption.
Селектори зображень в CSS шаблону Blogger
У шаблоні спочатку вже записані всі необхідні селектори і при бажанні до них можна додати або змінити існуючі властивості CSS. Ця секція в коді шаблону спочатку виглядає приблизно так:
post-body img. post-body .tr-caption-container. Profile img. Image img,
.BlogList .item-thumbnail img padding: $ (image.border.small.size);
background: $ (image.background.color);
border: 1px solid $ (image.border.color);
-moz-box-shadow: 1px 1px 5px rgba (0, 0, 0. 1);
-webkit-box-shadow: 1px 1px 5px rgba (0, 0, 0. 1);
box-shadow: 1px 1px 5px rgba (0, 0, 0. 1);
>
post-body img. post-body .tr-caption-container padding: $ (image.border.large.size);
>
post-body .tr-caption-container color: $ (image.text.color);
>
post-body .tr-caption-container img padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba (0, 0, 0. 1);
-webkit-box-shadow: 0 0 0 rgba (0, 0, 0. 1);
box-shadow: 0 0 0 rgba (0, 0, 0. 1);
>
Стилів не багато, селектори різних блоків з картинками об'єднані для запису загальних властивостей, але ми можемо записувати необхідні властивості тільки до потрібних нам селекторам, відокремлюючи їх. Для зображень поста вони такі:
- .post-body img - зображення в повідомленні, або .entry-content img що в принципі одне й теж;
- .separator - контейнер із зображенням без підпису;
- .post-body .tr-caption-container img - селектор для зображення до якого додана підпис;
- .tr-caption-container - селектор всієї таблиці із зображенням;
- .tr-caption - селектор для осередку з підписом зображення;
Як зробити все зображення в постах блогу однакового розміру
Ставлячи загальний стиль, іноді виникає потреба, щоб картинки в повідомленнях мали однакову висоту або ширину, не залежно від вихідних розмірів. Тут все гранично просто, можна кожного разу додавати до кожного зображення атрибут width з необхідним значенням, а можна зробити простіше - всього один раз додати в шаблон приблизно наступний CSS:
post-body img <
height: 150px; / * Висота, будь-яке потрібне значення, можна в% * /
width: auto; / * Ширина, обов'язкове значення * /
>
post-body img <
height: auto; / * Висота, обов'язкове значення * /
width: 150px; / * Ширина, будь-яке потрібне значення, можна в% * /
>
Як змінити стиль тільки першої картинки поста в Blogger
На жаль, використовуючи стандартні селектори шаблону, зробити таке не можливо, навіть застосовуючи псевдокласи.
але тегу . як і будь-якого іншого, можна додати окремий class з необхідним стильовим оформленням. При створенні повідомлення досить буде перейти в режим HTML-редагування і дописати його до тегу першого зображення.
наприклад:
А в CSS задати глобально, наприклад такий:
first-img float: left;
border-radius: 5px;
margin: 5px;
height: 200px;
width: auto;
>
Не забуваємо що для роботи скрипта, до блогу треба підключити бібліотеку jQuery. якщо звичайно ви не зробили цього раніше.
На цьому все, сподіваюся пост був корисний.
"А можна зробити простіше - всього один раз додати в шаблон приблизно наступний CSS:
. "- це не работает.Да, по ширині фотографії вирівнюються (якщо взяти 2-й варіант), але якість зображення дуже сильно погіршується. При цьому, оригінали фотографій більше за розмірами.
Я перепробував багато кодів, які знайшов в мережі. Але у всіх випадках якість картинок погіршується. Ось тестовий блог - test-blogger-9.blogspot.com. оригінали картинок різних розмірів і якості, і у всіх фото дуже видна втрата якості на блозі.
Ось блоги, де в повідомленнях кілька фотографій, і все без втрати якості:
Мені важливо, щоб не втрачалося якість і вирівнювалося при завантаженні відразу кілька (10-15) фотографій в одному повідомленні, як у цих блогів, щоб не правити все вручну. Прохання допомогти.