{"id":250237,"date":"2022-08-06T12:44:00","date_gmt":"2022-08-06T09:44:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=250237"},"modified":"2021-10-28T16:17:47","modified_gmt":"2021-10-28T13:17:47","slug":"kuinka-tehda-kuvista-ja-videoista-reagoivia-wordpressissa","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-tehda-kuvista-ja-videoista-reagoivia-wordpressissa\/","title":{"rendered":"Kuinka tehd\u00e4 kuvista ja videoista reagoivia WordPressiss\u00e4?"},"content":{"rendered":"<p>Vuonna 2015 Google teki valtavan muutoksen hakukoneen algoritmeihinsa, mik\u00e4 teki responsiivisesta suunnittelusta yhden <strong><a href=\"https:\/\/www.ggtaskers.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">verkkosivustojen<\/a><\/strong> sijoituksen tekij\u00f6ist\u00e4. Ensimm\u00e4ist\u00e4 kertaa vuonna 2016 mobiililaitteilla web-selaaminen ohittaa ty\u00f6p\u00f6yd\u00e4n, ja on t\u00e4rke\u00e4mp\u00e4\u00e4 kuin koskaan, ett\u00e4 verkkosivustosi mahtuu kaikenkokoisiin n\u00e4ytt\u00f6ihin k\u00e4ytett\u00e4vyydest\u00e4 ja toimivuudesta tinkim\u00e4tt\u00e4. T\u00e4m\u00e4 tosiasia voi oikeuttaa sen, miksi reagoiva web-suunnittelu on t\u00e4rke\u00e4\u00e4 yritykselle. Voit luoda responsiivisen verkkosivuston t\u00e4st\u00e4. Jos sinulla on jo verkkosivusto, mutta sinun on teht\u00e4v\u00e4 siit\u00e4 responsiivinen, voit pyyt\u00e4\u00e4 asiantuntijakonsulttia.<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/XWTAJLAJrK8\" frameborder=\"0\"><\/iframe><\/div>\n<p>Kun k\u00e4yt\u00e4t WordPressi\u00e4, on olemassa erilaisia \u200b\u200blaajennuksia, joiden avulla voit tehd\u00e4 kuvistasi ja videoistasi responsiivisia. Jotkut laajennukset voivat kuitenkin vaarantaa tietoturvasi, joten on parempi tehd\u00e4 kuvista ja videoista responsiivisia CSS-koodin avulla. T\u00e4ss\u00e4 blogissa n\u00e4yt\u00e4n sinulle, kuinka voit tehd\u00e4 WordPress-verkkosivustosi kuvasta ja videoista responsiivisia.\u00a0<\/p>\n<p><strong>Vaihe yksi:<\/strong> Sinun on siirrytt\u00e4v\u00e4 verkkosivustosi taustaj\u00e4rjestelm\u00e4\u00e4n tai WordPressille, joka tunnetaan nimell\u00e4 wp-admin. T\u00e4m\u00e4 on yleinen kirjautuminen WordPress-verkkosivustolle. Oletetaan, ett\u00e4 verkkosivustosi on www.example.com, sinun on kirjoitettava URL-osoite muodossa <a href=\"http:\/\/www.example.com\/wp-admin\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">www.example.com\/wp-admin<\/a>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8697a96.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8697a96.png\" alt=\"Kuinka tehd\u00e4 kuvista ja videoista reagoivia WordPressiss\u00e4?\" ><\/a><\/p>\n<p><strong>Vaihe kaksi:<\/strong> Sinun on varmistettava, ett\u00e4 kirjaudut sis\u00e4\u00e4n j\u00e4rjestelm\u00e4nvalvojana. WordPressiss\u00e4 on erilaisia \u200b\u200brooleja, jotka voit m\u00e4\u00e4ritt\u00e4\u00e4 k\u00e4ytt\u00e4j\u00e4lle, ja siell\u00e4 on my\u00f6s j\u00e4rjestelm\u00e4nvalvojan kirjautuminen. Voit my\u00f6s m\u00e4\u00e4ritt\u00e4\u00e4 k\u00e4ytt\u00e4jille j\u00e4rjestelm\u00e4nvalvojan k\u00e4ytt\u00f6oikeudet. Sinun on siis varmistettava, ett\u00e4 kirjaudut sis\u00e4\u00e4n j\u00e4rjestelm\u00e4nvalvojana tai k\u00e4ytt\u00e4j\u00e4n\u00e4, jolla on j\u00e4rjestelm\u00e4nvalvojan k\u00e4ytt\u00f6oikeudet.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d87b64e9.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d87b64e9.png\" alt=\"Kuinka tehd\u00e4 kuvista ja videoista reagoivia WordPressiss\u00e4?\" ><\/a><\/p>\n<p><strong>Vaihe kolme:<\/strong> N\u00e4et kojelaudassasi v\u00e4lilehden nimelt\u00e4 ulkon\u00e4k\u00f6. T\u00e4m\u00e4 v\u00e4lilehti vastaa kaikista verkkosivustosi suunnitteluun liittyvist\u00e4 teht\u00e4vist\u00e4.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d89071a8.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d89071a8.png\" alt=\"Kuinka tehd\u00e4 kuvista ja videoista reagoivia WordPressiss\u00e4?\" ><\/a><\/p>\n<p><strong>Vaihe nelj\u00e4:<\/strong> Ulkoasun alta l\u00f6yd\u00e4t vaihtoehdon nimelt\u00e4 editori. T\u00e4m\u00e4 osio vastaa verkkosivustosi suunnittelun manuaalisista koodeista. Napsauta editoria.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8a5b2e1.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8a5b2e1.png\" alt=\"Kuinka tehd\u00e4 kuvista ja videoista reagoivia WordPressiss\u00e4?\" ><\/a><\/p>\n<p><strong>Vaihe viisi:<\/strong> Kun napsautat editoria, avautuu uusi ikkuna, joka tunnetaan nimell\u00e4 style.css. T\u00e4m\u00e4 tiedosto sis\u00e4lt\u00e4\u00e4 kaikki CSS-koodit.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8b9ec9c.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8b9ec9c.png\" alt=\"Kuinka tehd\u00e4 kuvista ja videoista reagoivia WordPressiss\u00e4?\" ><\/a><\/p>\n<p><strong>Vaihe kuusi:<\/strong> Vierit\u00e4 alas ja p\u00e4\u00e4st\u00e4 alareunaan lis\u00e4t\u00e4ksesi ylim\u00e4\u00e4r\u00e4ist\u00e4 koodia style.css-tiedostoon.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8cdcd00.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8cdcd00.png\" alt=\"Kuinka tehd\u00e4 kuvista ja videoista reagoivia WordPressiss\u00e4?\" ><\/a><\/p>\n<p><strong>Vaihe 7:<\/strong> Lis\u00e4\u00e4 t\u00e4m\u00e4 koodi: embed, iframe, img, object, video, {max-width: 100} ja paina Enter.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8e10f8d.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8e10f8d.png\" alt=\"Kuinka tehd\u00e4 kuvista ja videoista reagoivia WordPressiss\u00e4?\" ><\/a><\/p>\n<p><strong>Vaihe 8:<\/strong> Jos koodi on kunnossa, sen pit\u00e4isi n\u00e4ytt\u00e4\u00e4 vihre\u00e4lt\u00e4. Jos se on vihre\u00e4, napsauta P\u00e4ivit\u00e4 tiedosto.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8f3047f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8f3047f.png\" alt=\"Kuinka tehd\u00e4 kuvista ja videoista reagoivia WordPressiss\u00e4?\" ><\/a><\/p>\n<p><strong>Vaihe yhdeks\u00e4n:<\/strong> Jos tiedosto on p\u00e4ivitetty onnistuneesti, saat vahvistusviestin &quot;Muokattu onnistuneesti&quot;<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d9085c89.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d9085c89.png\" alt=\"Kuinka tehd\u00e4 kuvista ja videoista reagoivia WordPressiss\u00e4?\" ><\/a><\/p>\n<p><strong>Vaihe kymmenen:<\/strong> Tarkista lopuksi yksi viesteist\u00e4si n\u00e4hd\u00e4ksesi, ovatko kuvat ja videot reagoivia vai eiv\u00e4t. Jos noudatit vaiheita, sen pit\u00e4isi olla reagoiva.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d917fc3d.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d917fc3d.png\" alt=\"Kuinka tehd\u00e4 kuvista ja videoista reagoivia WordPressiss\u00e4?\" ><\/a><\/p>\n<p>Jos noudatat n\u00e4it\u00e4 ohjeita, voit helposti tehd\u00e4 WordPress-verkkosivustosi kuvista ja videoista responsiivisia.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/www.ggtaskers.com\" class=\"external external_icon\">www.ggtaskers.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kun k\u00e4yt\u00e4t WordPressi\u00e4, on olemassa erilaisia \u200b\u200blaajennuksia, joiden avulla voit tehd\u00e4 kuvistasi ja videoistasi responsiivisia.<\/p>\n","protected":false},"author":1,"featured_media":263211,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[652],"tags":[843],"class_list":["post-250237","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-miten-tehda","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/250237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=250237"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/250237\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/263211"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=250237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=250237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=250237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}