{"id":2109,"date":"2024-07-25T10:27:02","date_gmt":"2024-07-25T01:27:02","guid":{"rendered":"https:\/\/comachilab.jp\/cx\/style-guide\/"},"modified":"2024-07-25T10:27:02","modified_gmt":"2024-07-25T01:27:02","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/comachilab.jp\/cx\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"\n<p>Below are examples of column classes that are available in the block editor.<\/p>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. <\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<p class=\"has-drop-cap\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia tellus elit, efficitur aliquam augue cursus eget. Phasellus eu orci et enim posuere tincidunt sit amet non purus. Mauris iaculis tristique augue sed rhoncus. Phasellus et metus augue. Cras semper posuere ex, at ornare velit aliquam ut. Nullam dictum blandit vestibulum. Morbi quis urna vitae justo ornare rhoncus.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_46 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">\u76ee\u6b21<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"ez-toc-toggle-icon-1\"><label for=\"item-69d374faad982\" aria-label=\"Table of Content\"><span style=\"display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;direction:ltr;\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/label><input  type=\"checkbox\" id=\"item-69d374faad982\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/comachilab.jp\/cx\/style-guide\/#Colors\" title=\"Colors\">Colors<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/comachilab.jp\/cx\/style-guide\/#Tipography\" title=\"Tipography\">Tipography<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/comachilab.jp\/cx\/style-guide\/#Headings\" title=\"Headings\">Headings<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/comachilab.jp\/cx\/style-guide\/#H2_Nunito_36px\" title=\"H2 Nunito 36px\">H2 Nunito 36px<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/comachilab.jp\/cx\/style-guide\/#H3_Nunito_30px\" title=\"H3 Nunito 30px\">H3 Nunito 30px<\/a><ul class='ez-toc-list-level-4'><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/comachilab.jp\/cx\/style-guide\/#H4_Nunito_26px\" title=\"H4 Nunito 26px\">H4 Nunito 26px<\/a><ul class='ez-toc-list-level-5'><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/comachilab.jp\/cx\/style-guide\/#H5_NUNITO_24px\" title=\"H5 NUNITO 24px\">H5 NUNITO 24px<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/comachilab.jp\/cx\/style-guide\/#Buttons\" title=\"Buttons\">Buttons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/comachilab.jp\/cx\/style-guide\/#Blockquotes_Pullquotes\" title=\"Blockquotes &amp; Pullquotes\">Blockquotes &amp; Pullquotes<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"has-text-align-left title wp-block-heading\"><span class=\"ez-toc-section\" id=\"Colors\"><\/span>Colors<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:24%\">\n<p class=\"has-text-align-center has-theme-text-color has-text-color has-background has-normal-font-size\" style=\"background-color:#f3f7f7\">#F3F7F7<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:26%\">\n<p class=\"has-text-align-center has-theme-text-color has-text-color has-background has-normal-font-size\" style=\"background-color:#b7cece\">#B7CECE<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:24.99%\">\n<p class=\"has-text-align-center has-theme-base-color has-theme-primary-background-color has-text-color has-background has-normal-font-size\"> #859898<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<p class=\"has-text-align-center has-theme-base-color has-theme-text-background-color has-text-color has-background has-normal-font-size\">#323B3C<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"has-text-align-left title wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tipography\"><\/span>Tipography<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"text-decoration: underline;\">Default size (16px):<br><\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia tellus elit, efficitur aliquam augue cursus eget. Phasellus eu orci et enim posuere tincidunt sit amet non purus. Mauris iaculis tristique augue sed rhoncus. Phasellus et metus augue. Cras semper posuere ex, at ornare velit aliquam ut. Nullam dictum blandit vestibulum. Morbi quis urna vitae justo ornare rhoncus.<\/p>\n\n\n\n<p class=\"has-small-font-size\"><span style=\"text-decoration: underline;\">Small size (14px):<\/span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia tellus elit, efficitur aliquam augue cursus eget. Phasellus eu orci et enim posuere tincidunt sit amet non purus. Mauris iaculis tristique augue sed rhoncus. Phasellus et metus augue. Cras semper posuere ex, at ornare velit aliquam ut. Nullam dictum blandit vestibulum. Morbi quis urna vitae justo ornare rhoncus.<\/p>\n\n\n\n<p class=\"has-large-font-size\"><span style=\"text-decoration: underline;\">Large size (20px):<\/span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia tellus elit, efficitur aliquam augue cursus eget. Phasellus eu orci et enim posuere tincidunt sit amet non purus. Mauris iaculis tristique augue sed rhoncus. Phasellus et metus augue. Cras semper posuere ex, at ornare velit aliquam ut. Nullam dictum blandit vestibulum. Morbi quis urna vitae justo ornare rhoncus.<\/p>\n\n\n\n<p class=\"has-larger-font-size\"><span style=\"text-decoration: underline;\">Larger size (24px)<\/span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia tellus elit, efficitur aliquam augue cursus eget. Phasellus eu orci et enim posuere tincidunt sit amet non purus. Mauris iaculis tristique augue sed rhoncus. Phasellus et metus augue. Cras semper posuere ex, at ornare velit aliquam ut. Nullam dictum blandit vestibulum. Morbi quis urna vitae justo ornare rhoncus.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"title wp-block-heading\"><span class=\"ez-toc-section\" id=\"Headings\"><\/span>Headings<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"has-text-align-left wp-block-heading\"><span class=\"ez-toc-section\" id=\"H2_Nunito_36px\"><\/span>H2 Nunito 36px<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"has-text-align-left wp-block-heading\"><span class=\"ez-toc-section\" id=\"H3_Nunito_30px\"><\/span>H3 Nunito 30px<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"has-text-align-left wp-block-heading\"><span class=\"ez-toc-section\" id=\"H4_Nunito_26px\"><\/span>H4 Nunito 26px<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<h5 class=\"has-text-align-left wp-block-heading\"><span class=\"ez-toc-section\" id=\"H5_NUNITO_24px\"><\/span>H5 NUNITO 24px<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-left has-small-font-size\">Hind 14px<\/p>\n\n\n\n<p class=\"has-text-align-left has-normal-font-size\">Hind 16px<\/p>\n\n\n\n<p class=\"has-text-align-left has-large-font-size\">Hind 20px<\/p>\n\n\n\n<p class=\"has-text-align-left has-larger-font-size\">Hind 24px.<\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-background has-theme-primary-background-color has-theme-primary-color\"\/>\n\n\n\n<h2 class=\"has-text-align-left title wp-block-heading\"><span class=\"ez-toc-section\" id=\"Buttons\"><\/span>Buttons<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link\" href=\"#\">Button<\/a><\/div>\n\n\n\n<div class=\"wp-block-button aligncenter is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link\" href=\"#\">Outlined Button<\/a><\/div>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<h2 class=\"has-text-align-left title wp-block-heading\"><span class=\"ez-toc-section\" id=\"Blockquotes_Pullquotes\"><\/span>Blockquotes &amp; Pullquotes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-pullquote alignfull has-background is-style-solid-color\" style=\"background-color:#f7f7f7\"><blockquote class=\"has-text-color has-theme-primary-color\"><p>Good design is as little as possible. Less, but better, because it concentrates on the essential aspects. Back to purity, back to simplicity. <\/p><cite> <br>Dieter Rams<\/cite><\/blockquote><\/figure>\n\n\n\n<p class=\"has-theme-base-color has-theme-primary-background-color has-text-color has-background\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia tellus elit, efficitur aliquam augue cursus eget. Phasellus eu orci et enim posuere tincidunt sit amet non purus. Mauris iaculis tristique augue sed rhoncus. Phasellus et metus augue. Cras semper posuere ex, at ornare velit aliquam ut. Nullam dictum blandit vestibulum. Morbi quis urna vitae justo ornare rhoncus.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<blockquote class=\"wp-block-quote has-text-align-center is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia tellus elit, efficitur aliquam augue cursus eget.  Cras semper posuere ex, at ornare velit aliquam ut. Nullam dictum blandit vestibulum. Morbi quis urna vitae justo ornare rhoncus.<\/p><cite>AUTHOR<\/cite><\/blockquote>\n\n\n\n<div style=\"height:41px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Below are examples of column classes that are available in the block editor. This is an example of a WordPress [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"osom_blocks_metabox":"","_mi_skip_tracking":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":{"0":"post-2109","1":"page","2":"type-page","3":"status-publish","5":"entry"},"featured_image_src":null,"featured_image_src_square":null,"_links":{"self":[{"href":"https:\/\/comachilab.jp\/cx\/wp-json\/wp\/v2\/pages\/2109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/comachilab.jp\/cx\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/comachilab.jp\/cx\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/comachilab.jp\/cx\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/comachilab.jp\/cx\/wp-json\/wp\/v2\/comments?post=2109"}],"version-history":[{"count":0,"href":"https:\/\/comachilab.jp\/cx\/wp-json\/wp\/v2\/pages\/2109\/revisions"}],"wp:attachment":[{"href":"https:\/\/comachilab.jp\/cx\/wp-json\/wp\/v2\/media?parent=2109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}