{"id":368523,"date":"2022-12-17T10:16:00","date_gmt":"2022-12-17T07:16:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=368523"},"modified":"2022-12-29T18:10:26","modified_gmt":"2022-12-29T15:10:26","slug":"web-sivuston-elementtien-tarkistaminen-selaimessasi","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/web-sivuston-elementtien-tarkistaminen-selaimessasi\/","title":{"rendered":"Web-sivuston elementtien tarkistaminen selaimessasi"},"content":{"rendered":"\n<p>Jos olet joskus ollut utelias n\u00e4kem\u00e4\u00e4n, milt\u00e4 sivusi n\u00e4ytt\u00e4isi eri tyyleill\u00e4, mutta sinun ei tarvitse tehd\u00e4 muutoksia, olet iloinen kuullessani, ett\u00e4 sinulla on tapa tehd\u00e4 niin. Itse asiassa selaimesi mukana tulee k\u00e4tev\u00e4 <strong>ty\u00f6kalu, jonka avulla voit tarkastaa verkkosivuston elementtej\u00e4<\/strong>. N\u00e4in voit n\u00e4hd\u00e4, milt\u00e4 sis\u00e4lt\u00f6si voi n\u00e4ytt\u00e4\u00e4 eri tavoin.<\/p>\n<p>Alla olevassa tekstiss\u00e4 annamme sinulle kaikki olennaiset tiedot verkkosivuston elementtien tarkastamiseen WordPressiss\u00e4 ty\u00f6skennelless\u00e4\u00e4n.<\/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\/KsV3YdZiwcU\" frameborder=\"0\"><\/iframe><\/div>\n<h2>Mik\u00e4 tarkasteluelementti oikein on?<\/h2>\n<p>Kaikissa uusimmissa verkkoselaimissa on joukko integroituja ty\u00f6kaluja, jotka n\u00e4ytt\u00e4v\u00e4t tietyn sivun CSS-, JavaScript- ja HTML-koodin. Tarkastusty\u00f6kalun avulla verkkokehitt\u00e4j\u00e4t voivat tarvittaessa muokata koodia selaimessaan. T\u00e4m\u00e4 antaa heille <strong>mahdollisuuden esikatsella muutoksia ilman, ett\u00e4 he itse asiassa peukaloivat mit\u00e4\u00e4n koodia<\/strong>. Toisin sanoen he ovat ainoita, jotka n\u00e4kev\u00e4t n\u00e4m\u00e4 muutokset selaimessaan.<\/p>\n<p>T\u00e4m\u00e4 vaihtoehto voi olla erityisen hy\u00f6dyllinen niille, jotka haluavat tehd\u00e4 muutoksia WordPress-verkkosivustoonsa, mutta haluavat esikatsella niit\u00e4 ennen kuin sallivat niiden tulla voimaan. Jos esimerkiksi olet blogin omistaja ja haluat n\u00e4hd\u00e4, kuinka <a href=\"https:\/\/themewp.inform.click\/fi\/wordpress-ote-mika-se-on-ja-kuinka-sita-kaytetaan\/\" title=\"WordPress-ote jostakin viesteist\u00e4si\">WordPress-ote jostakin viesteist\u00e4si<\/a> n\u00e4kyy selaimessasi, voit tehd\u00e4 sen helposti t\u00e4m\u00e4n ty\u00f6kalun avulla.<\/p>\n<p>T\u00e4m\u00e4 ei ole hy\u00f6dyllinen vain verkkosivustojen omistajille, vaan my\u00f6s kaikille kirjoittajille, markkinoijille, tukiagenteille ja kaikille muille, jotka ovat kiinnostuneita n\u00e4kem\u00e4\u00e4n, milt\u00e4 heid\u00e4n ty\u00f6skentelem\u00e4ns\u00e4 sis\u00e4lt\u00f6 voisi n\u00e4ytt\u00e4\u00e4.<\/p>\n<h2>Kuinka tarkastaa elementti Google Chromessa<\/h2>\n<p>T\u00e4t\u00e4 ty\u00f6kalua voi k\u00e4ytt\u00e4\u00e4 kahdella tavalla. Voit joko <strong>napsauttaa hiiren kakkospainikkeella mit\u00e4 tahansa Web-sivusi aluetta ja valita Inspect<\/strong> tai napsauttaa n\u00e4pp\u00e4imist\u00f6lt\u00e4 CTRL + Vaihto + I.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f3c0ff88.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f3c0ff88.jpg\" alt=\"Web-sivuston elementtien tarkistaminen selaimessasi\"><\/a><\/p>\n<p>Kun olet tehnyt t\u00e4m\u00e4n ensimm\u00e4isen vaiheen, selaimesi jaetaan automaattisesti kahteen osaan ja <strong>sivusi l\u00e4hdekoodi tulee n\u00e4kyviin pienemp\u00e4\u00e4n ikkunaan<\/strong>. T\u00e4ss\u00e4 ikkunassa n\u00e4et HTML:n vasemmalla ja CSS:n oikealla.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f3d855fd.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f3d855fd.jpg\" alt=\"Web-sivuston elementtien tarkistaminen selaimessasi\"><\/a><\/p>\n<p>Web-sivun eri alueet <strong>korostuvat, kun ved\u00e4t hiiren osoittimen HTML-l\u00e4hteen p\u00e4\u00e4lle<\/strong>. Jos napsautat hiiren kakkospainikkeella tietty\u00e4 Web-sivusi elementti\u00e4, kyseinen elementti korostetaan.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f40925fb.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f40925fb.jpg\" alt=\"Web-sivuston elementtien tarkistaminen selaimessasi\"><\/a><\/p>\n<h2>Kuinka muokata ja korjata koodia<\/h2>\n<p>Inspect Element -ty\u00f6kalulla voit muokata sek\u00e4 HTML:\u00e4\u00e4 ett\u00e4 CSS:\u00e4\u00e4. Muokkaa HTML-koodia kaksoisnapsauttamalla mit\u00e4 tahansa aluetta HTML-l\u00e4hdekoodissa ja muokkaa sitten koodia.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f42ebb27.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f42ebb27.jpg\" alt=\"Web-sivuston elementtien tarkistaminen selaimessasi\"><\/a><\/p>\n<p>Saman tekeminen on mahdollista my\u00f6s CSS-alueella. Voit <strong>lis\u00e4t\u00e4 uuden tyylis\u00e4\u00e4nn\u00f6n<\/strong> napsauttamalla yl\u00e4reunassa olevaa + -kuvaketta.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f461f050.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f461f050.jpg\" alt=\"Web-sivuston elementtien tarkistaminen selaimessasi\"><\/a><\/p>\n<p>Kaikki tekem\u00e4si muutokset n\u00e4kyv\u00e4t v\u00e4litt\u00f6m\u00e4sti selaimessasi.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f49607f3.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f49607f3.jpg\" alt=\"Web-sivuston elementtien tarkistaminen selaimessasi\"><\/a><\/p>\n<p>Viel\u00e4 kerran meid\u00e4n on korostettava, ett\u00e4 mit\u00e4\u00e4n n\u00e4ist\u00e4 muutoksista ei tallenneta. Voit tarkastaa mit\u00e4 tahansa haluamiasi verkkosivuston elementtej\u00e4 niin kauan kuin haluat, mutta t\u00e4m\u00e4 on <strong>vain virheenkorjausty\u00f6kalu, joka ei anna sinun tehd\u00e4 todellisia muutoksia koodiin<\/strong>. Toisin sanoen kaikki tekem\u00e4si muutokset katoavat, kun lataat sivusi uudelleen.<\/p>\n<p>T\u00e4st\u00e4 syyst\u00e4, jos todella haluat tehd\u00e4 muutokset, sinun on k\u00e4ytett\u00e4v\u00e4 WordPress-teeman tyylitaulukkoa ja muokattava koodia siell\u00e4. Meid\u00e4n on kuitenkin huomattava, ett\u00e4 <a href=\"https:\/\/themewp.inform.click\/fi\/lapsen-teeman-luominen-oikealla-tavalla\/\" title=\"sinun tulee luoda lapsiteema\">sinun tulee luoda lapsiteema<\/a> n\u00e4it\u00e4 tarkoituksia varten.<\/p>\n<h2>Konsolialue virheiden etsimiseen<\/h2>\n<p>Toinen t\u00e4rke\u00e4 Inspect Element -ty\u00f6kalun toiminto on konsolialue. T\u00e4ll\u00e4 alueella n\u00e4kyv\u00e4t kaikki <strong>sivustossasi olevat virheet<\/strong>. Siksi, jos haluat korjata sivullasi olevan virheen, t\u00e4m\u00e4n alueen tarkistaminen voi olla hy\u00f6dyllist\u00e4 sinulle.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f4cd1321.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f4cd1321.jpg\" alt=\"Web-sivuston elementtien tarkistaminen selaimessasi\"><\/a><\/p>\n<p>Web-sivuston elementtien tarkastamisen oppiminen ei ole hy\u00f6dyllist\u00e4 vain ty\u00f6ss\u00e4si, vaan se voi my\u00f6s s\u00e4\u00e4st\u00e4\u00e4 teknisen tuen aikaa, jos tied\u00e4t jo ongelmasi. Koska t\u00e4ll\u00e4 tehokkaalla ty\u00f6kalulla on useita etuja, suosittelemme, ett\u00e4 yrit\u00e4t k\u00e4ytt\u00e4\u00e4 sit\u00e4 noudattamalla oppaamme.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Selaimesi mukana tulee k\u00e4tev\u00e4 ty\u00f6kalu, jonka avulla voit tarkastella verkkosivuston elementtej\u00e4 ja n\u00e4hd\u00e4, milt\u00e4 sis\u00e4lt\u00f6si voi n\u00e4ytt\u00e4\u00e4.<\/p>\n","protected":false},"author":1,"featured_media":364372,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[570],"tags":[843],"class_list":["post-368523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpressin-perusteet","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/368523","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=368523"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/368523\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/364372"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=368523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=368523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=368523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}