Иногда бывает очень надо)), чтобы картинки в посте были размещены в один ряд.
Можно сделать коллаж, конечно. Я почему-то не очень люблю коллажи, особенно их делать)) видимо наелась ими в свое время.
Можно сделать с помощью выравнивания, но это ТАК криво работает в блоггере, что проще вообще не делать)
Расскажу, как вставляю картинки в пост я.
Сразу скажу, есть и другие способы. Но я привыкла именно к такому способу, потому что этот блог - не первый мой веб-проект, до этого я сама делала сайт, а точнее интернет-магазин детских вещей, делала его на платформе wordpress и перелопатив много инфо по вставке картинок, остановилась на этом способе.
Заранее ответив на ваш вопрос, напишу, что интернет-магазин я давно продала (у меня была 1/2 часть). Сейчас я с грустью захожу на его сайт и вижу, что сайт совсем не ведется и не обновляется. Дизайн переделан...точнее изуродовано то, что создавалось с таким трудом. Но это уже не мое дело, что очень хорошо)
И теперь, если мне нужно вставить много картинок подряд в одну строчку, или картинки и текст рядом, и чтобы все было ровненько и красиво, я использую таблицу с прозрачными границами.
Сложно, скажете вы? Зато работает и вы не зависите от глюков визуального редактора. А раз прописав код таблицы, вы можете его просто копировать из поста в пост.
Начнем?
Например, нам нужно разместить в один ряд три картинки:
1. Для этого создадим сообщение и написав текст, остановимся в нужном нам месте и переключимся в режим HTML.
2. В режиме HTML вставляем код таблицы.
<table>
<tbody>
<tr>
<td>столбец 1</td>
<td>столбец2</td>
<td>столбец3</td>
</tr>
</tbody>
</table>
По коду видно, что теги
<tr></tr> - означают начало и конец строки, а
<td></td> - начало и конец столбца.
Чтобы менять количество строк и столбцов, надо просто менять количество этих тегов и их содержимое (то, что будет внутри ;-))
Важно: теги столбцов помещены внутри тегов строк, видите?
3. Возвращаемся в режим Создать.
Все страшные коды исчезли, остались только три слова в один ряд:
столбец1 | столбец2 | столбец3 |
4. Вставим первую картинку. Для поставим курсор перед словом "столбец 1" и обычным способом нажмем на вставку картинки. Получится вот так:
столбец 1 | столбец2 | столбец3 |
5. Вставляем вторую картинку, для этого ставим курсор перед словом "стоблец2" и жмем на вставку картинки.
столбец 1 | столбец2 |
3. Тоже самое делаем и с третьей картинкой.
столбец 1 | столбец2 | столбец3 |
Слова "стоблбец 1", "столбец 2" и "столбец 3" можно удалить, выделив и нажав на Delete, а можно и заменить их на описание картинок.
Они также будут выравниваться в рамках столбцов таблицы.
Ляляля
|
Ляляляля
|
Ляляля
|
Смотрим на результат, задаем нужный размер картинок, можем сделать их ссылками ( здесь написано, как это сделать).
Вот такой способ. Пишите свои))
Лена !!! супер ! спасибос !!! я только недавно об этом думала... видимо мысли витают в воздухе. Очень благодарна.
ОтветитьУдалитьСпасибо, Леночка. Ларчик вона но как открывался :))
ОтветитьУдалитьСпасибо, очень полезная информация
ОтветитьУдалитьОчень интересно, учту! Лена только ты два раза написала tr
ОтветитьУдалитьозначают начало и конец строки, а
начало и конец столбца."
td столбцы да?
)) ага, счас исправлю
Удалитьхотела скопировать, но блоггер думает что я код вставляю)) поэтому удалила <>
Удалитьпоправила, Спасибо!)
УдалитьЛена, спасибо большое! Очень нужная информация и доступно объяснено)))
ОтветитьУдалитьОчень рада, что инфо полезна ))
ОтветитьУдалитьСпасибо, Леночка! Мне очень необходимо было.
ОтветитьУдалитьБлин, а я ленюсь в HTML делать. По-началу в фотошопе делала, а сейчас вообще в Пикасе коллажи шлепаю, да и все. А так информация полезная, спасибо!
ОтветитьУдалитьСпасибо за информацию!!!
ОтветитьУдалитьЛена, спасибо!!! Очень нужная для меня информация-делать коллаж все таки долго, а картинки в посте вечно разбегались. Теперь буду собирать их в кучу)))
ОтветитьУдалитьЛена, спасибо большое! Инфа очень полезная!!!
ОтветитьУдалитьСпасибо большое!!! Вроде не сложно все выглядит. Даже я, ничего не понимая в кодах, все поняла. Попробую использовать в следующем посте, как раз предполагается много фотографий.
ОтветитьУдалитьУра!!! У меня получилось! Спасибо!!!
УдалитьСпасибо огромное!
ОтветитьУдалитьСпасибо огромное, это такая полезная информация !
ОтветитьУдалитьспасибо, Леночка! очень полезно для меня :)
ОтветитьУдалить))) ОЧЕНЬ РАДА ВАШИМ КОММЕНТАРИЯМ))
ОтветитьУдалитьЛен, какая ты молодец!!! Спасибо огромное за инфу, давно хотела показывать по две картинки рядом, как сделать не знала)))) Обожаю твой блог, за то, что здесь очень много полезного.... и красивого)))
ОтветитьУдалитьСпасибо)) заходи;-)
УдалитьОй,Лена. Сколько я над этим билась, а потом бросила, поборов свое желание.
ОтветитьУдалитьЕще один минус калложа - в данном случае нельзя увеличить отдельную картинку, чтобы детали рассмотреть
Спасибо!!!
Да, ты права, а с рукой то че?)
УдалитьСпасибо! Очень нужная и полезная информация!!!
ОтветитьУдалитьДа, очень ценно! Спасибо!
ОтветитьУдалитьза это отдельное спасибо! потому как это убогое выравнивание блоггере надоело)
ОтветитьУдалитьскоро буду крутяцкой блогершей))) Леночка, муж просил у тебя узнать: где купить нат.кожу в Барне?
ОтветитьУдалить)) Ира, напиши мне на info@dushechki.ru, я тебе отвечу
Удалитьнаписала!
УдалитьСпасибо, благодаря вашим советам многое в блоговодстве становится простым и понятным:)
ОтветитьУдалитьО! Леночка!!! спасибо!!!! я все думала, как же это делать!
ОтветитьУдалитьУтащила мк:) просвещай нас еще!!!!
Лен, спасибо тебе! Какая же ты труженица, мне даже стыдно за своё разгильдяйство и непролазную лень...
ОтветитьУдалитьЛена. спасибо тебе за такие объяснения!!! Ну очень нужные вещи пишешь!!!
ОтветитьУдалитьЛен, подскажи мне пожалуйста, я опубликовала пост, а у меня на первой фотографии какая-то крокозябра вылезла, что-то типа водяного знака, ты не знаешь что это и как от этого можно избавиться? Прям ерунда какая-то у меня с блогом!
ОтветитьУдалитьОлеся, даже не подскажу - глюк какой-то, удали и заново вставь фото, не поможет если, сохрани фото с новым именем и заново загрузи, потом вставь.
УдалитьУ тебя получилось как-бы наложение уменьшенного фото сверху.
УдалитьОгромнейшее спасибо! Очень полезный пост !
ОтветитьУдалитьОй, спасибо огромнейшее :) буду пробовать. Буквально сегодня сидела и думала, как бы это сделать :)
ОтветитьУдалитьЛен, спасибо большое! Получилось убрать! Ты-гений!
ОтветитьУдалитьуже применила полученные знания :))) спасибо большое, Лена!
ОтветитьУдалитьЛеночка, ты чудо расчудесное!!!! Я люблю коллажи, но не все подходят для моей задумки. А тут все просто и легко получается!!!
ОтветитьУдалитьА можно еще мастер-класс как разместить фото в журнале, но что бы оно при нажатии не открывалось в новом окне, а открывалось как у Вас с черно-прозрачным фоном?:)
ОтветитьУдалитьЯ дурында разобралась:)
УдалитьЛеночка, спасибо тебе огромное за информацию. Как же меня раздражало, что картинки не хотели становиться в один ряд, а теперь все получилось! Уже успешно применила в блоге!
ОтветитьУдалитьЛеночка, ты тут такую полезную информацию озвучила!! Огромнейшее тебе спасибо! Сама очень часто мучусь с этими картинками и в результате во всех постах они у меня идут по одной в строке. Теперь буду знать, как вставить несколько :) Пойду тренироваться :) СПАСИБООООО :)
ОтветитьУдалитьЛена, спасибо! Очень нужная информация!!!
ОтветитьУдалитьЛена, огромное спасибо. Попробовала, всё получилось )))
ОтветитьУдалитьСпасибо огромное, буду пробовать! :)
ОтветитьУдалитьЛена, спасибо огромное!! Как и многие - не знала, как это сделать... И объяснения прочитала, подумала "У-у-у... Не справиться. Слишком хорошо помню, как на информатике ну совсем тупила с написанием программ." А оказалось очень даже просто. Получилось сразу и очень симпатично! Спасибо за ликбез!
ОтветитьУдалитьЛена спасибо большое, я как вроде программист по образованию, но все забываю, что штмлможно вести в блоге и этого иногда намного проще) спасибо про секрет, что можно использовать таблицы))
ОтветитьУдалитьЛеночка спасибо. Попробовала, получилось. Правда не поняла, а как размер картинок задавать?
ОтветитьУдалитьhttp://dushechki.blogspot.com/2012/10/blog-post_20.html
УдалитьБольшое спасибо!
ОтветитьУдалитьЛена,спасибо! Всё получилось:)
ОтветитьУдалитьОгромное спасибо! Так замечательно получилось!
ОтветитьУдалитьЛена, спасибо большое ))) Как всё оказывается просто )
ОтветитьУдалитьВот это зачетная тема!!! Спасибо!!!
ОтветитьУдалитьСпасибо! Помогли ^-^
ОтветитьУдалитьСпасибо, Леночка!!! Очень просто получилось!!! Благодарю за действительно нужные советы, как начинающий пользователь постоянно ими пользуюсь =)
ОтветитьУдалитьЛена, спасибо, давно думала как это сделать, очень помог ваш пост!
ОтветитьУдалитьСпасибо большущее! Как мне это сейчас помогло...
ОтветитьУдалитьпреогромнейшее спасибочки за совет!
ОтветитьУдалитьЛена! Спасибо большое ! Мучилась с картинками в ряд. Получилось всё, но когда я стала удалять название "столбец 1 и т.д фотки опять сдвинулись и началась чехарда! Что же я не так сделала? Помогите пожалуйста!
ОтветитьУдалитьвы нарушили код, удалите код и сделайте все заново
УдалитьЗдоравствуйте Лена! ...и второй вопрос- создала в фотошопе хедер а как в блог установить не знаю... Простите неумёху. Помогите пожалуйста.
ОтветитьУдалитьраздел Дизайн - изменить заголовок, туда вставляете картинку или текст
УдалитьЛеночка, милая! Я - большая чайница в компе, но блог-то надо вести. Ходила к тебе за советами по блогу, как только видела все эти программисткие закорючки-значки - закрывала комп. А сегодня попробовала и у меня вышло вставить фото в ряд, представляю, как ты сейчас хохочешь надо мной...ну да ладно)))) Спасибо тебе, Леночка!!! Преогромное спасибо!!! Теперь я изучу все твои посты с "иероглифами" и может быть смогу облагородить свой блог.
ОтветитьУдалитьС большущей симпатией, Татьяна Коннор
А что делать если поставив 2-3 картинки таким методом в ряд при публикации они некрасиво размываются в ширину?почему это происходит?((
ОтветитьУдалитьнадо задавать правильные размеры для фотографий.
УдалитьСпасибо большое. Тоже не получалось вставить рисунки в ряд. Главное так вовремя.
ОтветитьУдалитьЕлена, спасибо большое за такой интересный и полезный блог. Действительно очень много нужного и полезного. Много чего для себя нашла )
ОтветитьУдалитьСпасибо огромное за эту информацию. Очень пригодилась!!!!!!!!!
ОтветитьУдалитьОгромное спасибо!!!!!!! Очень вовремя!
ОтветитьУдалитьКак раз выставляю 45 картинок в ряд :))))
Сколько мучалась с этими картинками, вечно в блоггере они скачут как хотят, а таблица помогла сделать из картинок меню для блога. К тому же методом тыка научилась быстро, без кодов вставлять рядом две картинки,если интересно вот ссылка - http://trizza-handmade.blogspot.com/2013/07/blogger.html
ОтветитьУдалитьНе получается текст и картинку в одну строку вставить - текст съезжает вниз, то есть начинается с конца картинки. А картинки вставляются без проблем.
ОтветитьУдалитьредактируйте в режиме html
УдалитьБольшое спасибо за все Ваши статьи, они очень полезны! Но подскажите, пожалуйста, как все-таки после картинок перейти к написанию текста? Все вставляется без проблем, а потом чехарда - либо картинки скачут, либо текст формируется столбцом под каждой! Переделывала много раз, но, видимо, сама не смогу!
ОтветитьУдалитьИ мне интересно- точно такая же проблема, невозможно выйти из режима таблицы.
Удалитьскорее всего вы удалили некоторые теги, корректируйте в формате html
УдалитьДа, просто начала набирать текст в формате хтмл- все получилось. Спасибо!
УдалитьА как их прижать друг к другу (код html есть какой-то)?
ОтветитьУдалитьдруг к другу не прижимаются, только к границам столбцов
УдалитьСпасибо большое! Очень нужный урок, только что воспользовалась)))
ОтветитьУдалитьЕще вопрос. Не совсем по теме- но косвенно касающийся темы. Для поиска по коду использую клавишы ctrl+f. Почему-то поиск осуществляется только в видимой на экране части кода. Почему?
ОтветитьУдалитьне по теме - лучше поискать ответ в сети, возможно, такие настройки браузера.
УдалитьСпасибо за информацию, картинки вставились замечательно, но почему то они бледнее фоток, вставленных обычным способом, как бы в тумане и это отличие сильно видно, что не так? И можно как то убрать границы таблицы, чтобы они не были видны? (у меня правда wordpress)
ОтветитьУдалитьв wordpress может изначально быть настроен шаблон, как отображать таблицу, думаю, надо смотреть в коде шаблона. или ручками прописывать свойства таблицы в каждом сообщении - посмотрите в сети учебник по HTML словарь тегов, относящихся к таблице. или поищите готовые коды таблиц (с прописанными свойствами заливки, границ и т.п.)
УдалитьСпасибо большое! Сегодня воспользовалась Вашими подсказками.
ОтветитьУдалитьБлагодарю за помощь! Сейчас как раз столкнулась с необходимостью этой функции для вставки картинок.
ОтветитьУдалитьЕлена, спасибо! Очень понятное объяснение. У меня всё получилось.
ОтветитьУдалитьГде бы не читала - ну так непонятно описано, ну не для женщин с гуманитарным образованием, честное слово. У Вас - понятно и от этого кажется просто. Благодарю!
ОтветитьУдалитьДевушки, не смогла перечитать все комментарии, поэтому не знаю, советовали ли эту программу уже или нет. Есть очень удобная, лёгкая программка, называется Photoscape. Скачать её можно здесь.
ОтветитьУдалитьhttp://photoscape.org/ps/main/download.php
Это бесплатно. Это не реклама)))Есть русский язык. Может для новых версий нужно поискать русификатор, не уверена.
Я многим её советовала, все пока только благодарят.
Фото в моём блоге обработаны только в этой программе.
Спасибо за внимание. ))
Спасибо, Елена! Предельно ясно, и сразу всё получилось.
ОтветитьУдалитьДобрый день! Случайно наткнулся на Ваш блог. Не подскажите, что это за плагин галереи изображений у Вас установлен? Что за Pin It? В Яндексе ничего не нашел такого...
ОтветитьУдалитьспасибо, очень помогло!
ОтветитьУдалитьСпасибо! Очень полезная информация!
ОтветитьУдалитьСпасибо большое!!!!!
ОтветитьУдалитьЛЕНА!!! Как всегда :все гениальное ПРОСТО. Неожиданно наткнулась на Ваше решение. Пошла пробовать. В других местах уж больно мудрено. Спасибо Вам. Становлюсь Вашей постоянной читательницей. Успехов Вам!
ОтветитьУдалитьЛеночка!!! Вы - Прелесть- даже у меня получилось, хоть и не сразу. Важно не спешить.Преогромное спасибо! Успехов в Вашем творчестве!
ОтветитьУдалитьСпасибо огромное!Но подскажите как убрать границы таблицы? А то фотографии теперь в рамочке
ОтветитьУдалитьБольшое спасибо.
ОтветитьУдалитьoptimiziroval tak: http://www.mglass.lv/index.php/component/content/article?id=30 , spacibo!
ОтветитьУдалитьАааа! Спасибо большое! Я поняла как это делать!))) счастья то сколько))
ОтветитьУдалитьЛена, спасибо, все очень доходчиво и понятно, даже для таких чайников как я) Буду теперь делать одностраничники для дочки http://indzakaz.blogspot.ru/
ОтветитьУдалитьСпасибо! Нужная и важная информация, а главное просто и понятно. Я долго искала информацию как разместить рядом несколько картинок. Информации много, но написано сложно, а у вас все просто и понятно. Спасибо.
ОтветитьУдалитьА как сделать чтобы на них можно было нажать и они открылись в увеличеном размере?
ОтветитьУдалитьотличное решени,спасибо за подсказку
ОтветитьУдалитьОгромное Вам спасибо, я столько мучилась с выравниванием, что волосы на голове дыбом встали. А вы за три клика решили мою проблему. Целую вас в обе щеки.
ОтветитьУдалитьСпасибо за скрипт. Все получилось!
ОтветитьУдалитьСпасибо автору за познавательную инфу, но я не как не могу разобраться с шаблоны prestashop 1.6, который раз скачивал и ничего не получается! Может кто та работал с этими шаблонамы?
ОтветитьУдалитьЕлена, Вам благодарность и уважение!
ОтветитьУдалитьЕленочка, огромное спасибо!Очень доступно!
ОтветитьУдалить