{"componentChunkName":"component---src-templates-post-template-js","path":"/note-wordpress-quoteblock-design-en","result":{"data":{"markdownRemark":{"id":"87203df9-db05-55c8-bd53-303b7a2835cf","html":"<blockquote>\n<p>This page has been machine-translated from the <a href=\"/note-wordpress-quoteblock-design\">original page</a>.</p>\n</blockquote>\n<h2 id=\"introduction\" style=\"position:relative;\"><a href=\"#introduction\" aria-label=\"introduction permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Introduction</h2>\n<p>In this article, I will show you how to <strong>remove the quotation marks displayed on WordPress quote blocks</strong>.</p>\n<p>I wanted to avoid modifying the WordPress theme as much as possible, so I summarized <strong>a way to handle it from the Customizer’s Additional CSS</strong>.</p>\n<p>First, the quotation marks on WordPress quote blocks look like this, appearing at the upper left and lower right of a regular block.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 642px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/67bc146ab07fc5b5816c1d2af616ac90/1bba8/image-1.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 21.666666666666668%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAg0lEQVQY06WOSQrDMBAE9f//WfsWgeOAFK0P6EjCx9x8KIZp6JohpRTEGFFrfUzvHWQJvXOgx4GX91BKwRgzMwsl1URC3xmjFIJxGK135qydU+/9mzNaayDL+j5PcMYQQthCyVfJ7EPOOigh4OexMr/Is/iPz3UhpQQyxtjmpyxpqw0/R8EqZRrysZIAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n          <source\n              srcset=\"/static/67bc146ab07fc5b5816c1d2af616ac90/8ac56/image-1.webp 240w,\n/static/67bc146ab07fc5b5816c1d2af616ac90/d3be9/image-1.webp 480w,\n/static/67bc146ab07fc5b5816c1d2af616ac90/7eb86/image-1.webp 642w\"\n              sizes=\"(max-width: 642px) 100vw, 642px\"\n              type=\"image/webp\"\n            />\n          <source\n            srcset=\"/static/67bc146ab07fc5b5816c1d2af616ac90/8ff5a/image-1.png 240w,\n/static/67bc146ab07fc5b5816c1d2af616ac90/e85cb/image-1.png 480w,\n/static/67bc146ab07fc5b5816c1d2af616ac90/1bba8/image-1.png 642w\"\n            sizes=\"(max-width: 642px) 100vw, 642px\"\n            type=\"image/png\"\n          />\n          <img\n            class=\"gatsby-resp-image-image\"\n            src=\"/static/67bc146ab07fc5b5816c1d2af616ac90/1bba8/image-1.png\"\n            alt=\"img\"\n            title=\"img\"\n            loading=\"lazy\"\n            style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n          />\n        </picture>\n  </a>\n    </span></p>\n<p>To remove these quotation marks, just add the following CSS code on the “Additional CSS” screen.</p>\n<div class=\"gatsby-highlight\" data-language=\"css\"><pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">blockquote::before</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> none<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token selector\">blockquote::after</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> none<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>That alone removes the quotation marks easily.<br>\nThat’s all—just a short note for future reference.</p>","fields":{"slug":"/note-wordpress-quoteblock-design-en","tagSlugs":["/tag/notes/","/tag/css/","/tag/english/"]},"frontmatter":{"date":"2020-12-27","description":"This article introduces how to remove the quotation marks displayed on WordPress quote blocks from Additional CSS.","tags":["Notes","CSS","English"],"title":"How to Remove the Quotation Marks Shown on WordPress Quote Blocks from Additional CSS","socialImage":{"publicURL":"/static/dc4d8b7f8795f3c3d3489d9957d155f2/no-image.png"}}}},"pageContext":{"slug":"/note-wordpress-quoteblock-design-en"}},"staticQueryHashes":["251939775","401334301","825871152"]}