Как расположить картинки в сообщении в блоге

---

Недавно у меня интересовались, как я располагаю картинки у себя в блоге, просили дать мастер-класс ).

Поделюсь своим способом на примере работ, которые были опубликованы раньше. Сразу скажу, что все делать придется "вручную". Для начала нужно переключиться в режим "HTML", когда вы начинаете писать сообщение. Выглядит это так:

С этого момента очень желательно не переключаться обратно в режим "Создать", иначе автоматический редактор Блоггера все исправит в соответствии со своим стилем. Чтобы не мучаться с другими тегами, можно сначала написать весь текст в стандартном режиме, а уж потом переходить к картинкам, т.е. в режим "HTML". Готовы? Начинаем)

Боди с сердечком (подробнее о боди здесь):

Первым делом вставляем картинки. Как и обычно, можно нажать инструмент "Вставить изображение", там выбрать откуда взять картинку (загрузить с компьютера, добавить из загруженных или по URL). Когда Блоггер будет спрашивать, как выравнивать картинку и какой размер выбрать, дабы избежать лишней правки, нужно выбрать "Не выравнивать" и необходимый вам размер (пока можно выбрать тот, который вы обычно используете). Сначала разберемся с тем, что у нас там вставилось. А вставились ссылки на картинки в таком вот формате:

<a href="http://..."> <img src="http://..." /> </a>


Чтобы так расположить картинки, нужно подобрать их ширину (атрибут width) по своему вкусу, установить выравнивание в блоке, где эти картинки находятся, по центру (атрибут text-align:center, т.к. тег <img> - строковый элемент, как текст), и просто расположить их одну за другой. Также нужно не забыть установить поля картинок (атрибут margin), тоже по вкусу, чтобы они не располагались плотно друг к другу и было пространство между ними (в моем случае поля равны 10 пикселей). Все остальное сделает браузер: рассчитает пропорционально высоту картинок, сам расположит их в зависимости от ширины блока, где эти изображения находятся. Например, в моем случае ширина блока для сообщения (левого) фиксирована и равна где-то 700 пикселей, поэтому, чтобы в него влезли две фотки, мы выбрали ширину каждой картинки 320 пикселей (с учетом полей, которые в ширину не входят).

Вот код HTML для такого расположения:

<!-- Блок, в котором располагаем картинки по центру. Эту строку нужно добавить перед ссылками -->
<div style="text-align:center">
<!-- Ссылка на полноразмерное изображение -->
<a href="http://...">
<!-- В ссылку вложена миниатюра изображения шириной 320 пикселей (У меня есть класс "picture", который задает стиль картинки, т.е. ее вид и ее поведение, он прописан отдельно в <head>, без него картинки будут выглядеть обычно), где src - адрес миниатюры -->
<img src="http://..." style="width:320px; margin:10px"/>
<!-- Закрываем ссылку -->
</a>
<!-- Вторая картинка -->
<a href="http//:..." ><img src="http://..." style="width:320px; margin:10px"/> </a>
<!-- Закрываем блок с картинками -->
</div>

Мишка и зайчики (подробнее здесь):

Из-за разных пропорций у картинок слева ширину пришлось сделать побольше, 350 пикселей, чтобы фотки выглядели примерно одного размера:

Код HTML:

<div style="text-align:center">
<!-- Картинки без тени (слева направо, сверху вниз)-->
<!-- Первая картинка-->
<a href="http://..."> <img class="simplepicture" style="width:350px; margin:10px" src="http://..."/> </a>
<!-- Вторая картинка-->
<a href="http://..."> <img class="simplepicture" style="width:320px; margin:10px" src="http://..."/> </a>
<!-- Третья картинка-->
<a href="http://..."> <img class="simplepicture" style="width:350px; margin:10px" src="http://..."/> </a>
<!-- Четвертая картинка-- >
<a href="http://..."> <img class="simplepicture" style="width:320px; margin:10px" src="http://..."/> </a>
</div>

Персиковая нежность, три картинки в ряд (подробнее здесь):

Код HTML:

<div style="text-align:center" >
<!-- Первая картинка -->
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<!-- Вторая картинка -->
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<!-- Третья картинка -->
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
</div>

Ну и напоследок спальнички для малышей (подробнее здесь). Так расположились картинки разных пропорций, но одинаковой ширины (220 пикселей):

Код HTML:

<div style="text-align:center">
<!-- Картинки (слева направо, сверху вниз), для каждой свой адрес -->
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
<a href="http://..."> <img class="picture" style="width:220px; margin:10px" src="http://..."/> </a>
</div>

Внимание! Этот абзац дальше можно не читать) При ширине блока сообщения, зависящей от ширины области просмотра браузера ("резиновая" ширина), картинки будут выстраиваться по тому же принципу, как выстраивается текст, выравненный по центру (важно для мобильной версии). Последний пример при этом не всегда будет выглядеть красиво, поэтому в этом случае в одной группе изображений лучше разместить одинаковые по размеру и пропорциям картинки.

Надеюсь, получилось понятно) Мы очень старались. Вопросы, естественно, можно задавать в комментариях.

На этом все на сегодня, до новых встреч!

---

Еще одна награда

---

Всем доброго времени суток! Мой блог недавно получил еще одну награду от Юлии и ее блога Мои петельки и стежки. Вот такую мне подарили открыточку:

Я, в свою очередь, вручаю вот такую награду

следующим блогам (их пока 5):

• Гра-Натовый браслетик
• Затея от Идеи
• Уютные вещи
• Мама шила
• Любимкины поделочки

Поздравляю!

И еще небольшие правила для одариваемых:

1. Разместить в своем блоге активную ссылку на блог, от которого получена награда
2. Разместить логотип награды в своем блоге
3. Назначить награды 7 блогам, у которых менее 50 ПЧ (постоянных читателей)
4. Добавить ссылки на эти блоги
5. Отправить им сообщение (комментарий) о получении награды

Уфф, на сегодня все! Скоро вернусь)

---

Приз

Всем доброго времени суток! Если помните, я проводила розыгрыш термобелья в моей группе ВКонтакте. Победительница заказала комплект для мальчика ростом 120см. Я решила сшить сразу на 128, т.к. велико не мало))) Позавчера, как только я вернулась к своим машинкам, принялась за шитье) Сегодня решилось дело с декором, и я показываю вам итоговый результат.

Все выкройки, не мудрствуя, взяла из оттобре. Ничего не меняла.

На лонгслив решили все же сделать чебурашку, хотя были и другие варианты

И штанишки-кальсоны

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

И упаковка

Всем пока-пока!

Новогодние подарки)

Еще раз доброго дня) Наконец-то появилось время показать еще прошлогодние пошивушки)))

Для начала такой вот термо-бодик для нашего любимого друга Николая (он почти Полин ровесник). Фотографии мега-корявые: пришлось фотографировать уже в гостях при свете люстры. Уж как есть, очень хотелось показать)

Решила поставить кнопочки в тон чебурашке, уж очень они подошли по цвету.

Еще мы подарили нашему другу такой вот комплект. Я подумала, что домашних штанов много не бывает, и сшила две пары. Кстати, таких комплектов пошилось на самом деле два. Еще один подарили другому мальчику.

Мой муж поколдовал над блогом, и картинки расположились вот так. Здесь все мелочи, как что сшито. Как окантована горловина и сделана застежка, как соединены бейки на рукаве и поставлена закрепочка, как подшит низ, как соединились детали подмышкой и как пришит манжет внизу штанин)

Игрушечка просто так)

И еще один домашний комплект все для того же мальчика

И немного деталей

Вот так я упаковала все подарки)

Еще раз поздравляю всех с Новым годом!

С новым 2014 годом!

---

Дорогие мои читатели, поздравляю всех с уже наступившим Новым годом! В Новом году желаю забыть обо всех горестях и неприятностях, чтобы счастье и любовь были не просто гостями, а самыми постоянными жителями в ваших семьях) Конечно, нужно пожелать всем творческих успехов и вдохновения, а также самореализации, что, наверное, самое главное. Чтобы работа приносила радость и удовольствие. 2013 год уже стал историей, нужно писать новую страницу в жизни. Желаю всем, чтобы она была хоть чуточку лучше предыдущей)

Произошло интересное событие. Мой блог получил награду-поздравление от Ольги и ее блога Рукоделие для больших и маленьких. Вот она)

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

Собственно, вот этот список:

• Crafty Crazies
• Леся Чудеся
• Странички ЮлиП
• Калейдоскоп увлечений
• Девичья шкатулка
• Мамино солнышко
• Шитье - мое хобби

А вот правила:

1. Разместить в своем блоге активную ссылку на блог, от которого получена награда
2. Разместить логотип награды в своем блоге
3. Назначить награды 7 блогам, у которых менее 50 ПЧ (постоянных читателей)
4. Добавить ссылки на эти блоги
5. Отправить им сообщение (комментарий) о получении награды

---

Предновогодний розыгрыш состоялся

---

---