{"id":235,"date":"2023-02-07T18:58:59","date_gmt":"2023-02-07T09:58:59","guid":{"rendered":"https:\/\/phantom-cgray03.xyz\/?p=235"},"modified":"2023-02-28T19:46:38","modified_gmt":"2023-02-28T10:46:38","slug":"post-235","status":"publish","type":"post","link":"https:\/\/phantom-cgray03.xyz\/?p=235","title":{"rendered":"\u3010\u5439\u304d\u51fa\u3057\u3011\u6ce8\u76ee\u5439\u304d\u51fa\u3057_\u4e38\u6587\u5b57"},"content":{"rendered":"

<\/p>\n

\n <\/p>\n
\n <\/p>\n

\u6ce8\u76ee\uff01<\/p>\n<\/p><\/div>\n<\/div>\n

\u4e0b\u8a18Beyond\u30b3\u30fc\u30c9<\/p>\n

JS head<\/p>\n

<!-- HTML\u3053\u3053\u304b\u3089 -->\r\n<div class="balloon__area-attention">\r\n    <!-- \u4e0a\u4e0b\u3059\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u4e0d\u8981\u306a\u5834\u5408\u306f\u300cis-slide-attention\u300d\u30af\u30e9\u30b9\u3092\u5916\u3057\u3066\u304f\u3060\u3055\u3044 -->\r\n    <div class="under__balloon-attention is-slide-attention">\r\n        <!-- \u5439\u304d\u51fa\u3057\u5185\u306e\u30c6\u30ad\u30b9\u30c8 -->\r\n        <p>\u6ce8\u76ee\uff01<\/p>\r\n    <\/div>\r\n<\/div><\/code><\/pre>\n
CSS<\/p>\n
\r\n\r\n\/* widget\u5168\u4f53\u306e\u8a2d\u5b9a *\/\r\n.balloon__area-attention {\r\n  \/* \u6a2a\u5e45 *\/\r\n  width: 100%;\r\n  \/* \u9ad8\u3055 *\/\r\n  height: auto;\r\n  \/* \u4f4d\u7f6e( left | center | right ) *\/\r\n  text-align: left;\r\n  position: relative;\r\n  margin-bottom: 15px;\r\n}\r\n\r\n\r\n\r\n\/* \u5439\u304d\u51fa\u3057\u306e\u8a2d\u5b9a *\/\r\n.under__balloon-attention {\r\n  display: inline-block;\r\n  \/* \u5916\u5074\u306e\u4f59\u767d *\/\r\n  margin: 0;\r\n  \/* \u5185\u5074\u306e\u4f59\u767d *\/\r\n  padding: 6px 8px;\r\n  \/* \u6700\u5c0f\u5e45 *\/\r\n  min-width: 50px;\r\n  \/* \u6700\u5927\u5e45 *\/\r\n  max-width: 100%;\r\n  \/* \u5439\u304d\u51fa\u3057\u306e\u8272 *\/\r\n  background: #f26671;\r\n  \/* \u5439\u304d\u51fa\u3057\u306e\u89d2\u4e38 *\/\r\n  border-radius: 10px;\r\n}\r\n\r\n\r\n\r\n\/* \u5439\u304d\u51fa\u3057\u306e\u4e09\u89d2 *\/\r\n.under__balloon-attention:before {\r\n  content: "";\r\n  position: absolute;\r\n  \/* \u8868\u793a\u4f4d\u7f6e\uff08\u4e0a\u57fa\u6e96\uff09 *\/\r\n  top: calc(100% - 1px);\r\n  \/* \u8868\u793a\u4f4d\u7f6e\uff08\u5de6\u57fa\u6e96\uff09 *\/\r\n  left: 35%;\r\n  \/* \u5916\u5074\u306e\u5de6\u4f59\u767d *\/\r\n  margin-left: -8px;\r\n  \/* \u4e09\u89d2\u5f62\u306e\u6a2a\u5e45 *\/\r\n  border: 8px solid transparent;\r\n  \/* \u4e09\u89d2\u5f62\u306e\u9ad8\u3055\u3001\u4e09\u89d2\u5f62\u306e\u8272 *\/\r\n  border-top: 6px solid #f26671;\r\n}\r\n\r\n\r\n\r\n\/* \u5439\u304d\u51fa\u3057\u5185\u30c6\u30ad\u30b9\u30c8 *\/\r\n.under__balloon-attention p {\r\n  \/* \u5916\u5074\u306e\u4f59\u767d *\/\r\n  margin: 0;\r\n  \/* \u5185\u5074\u306e\u4f59\u767d *\/\r\n  padding: 0;\r\n  \/* \u6587\u5b57\u306e\u5927\u304d\u3055 *\/\r\n  font-size: 14px;\r\n  \/* \u6587\u5b57\u306e\u8272 *\/\r\n  color: #fff;\r\n  \/* \u6587\u5b57\u306e\u4f4d\u7f6e *\/\r\n  text-align: center;\r\n  \/* \u6587\u5b57\u306e\u592a\u3055 *\/\r\n  font-weight: bold;\r\n  \/* \u30d5\u30a9\u30f3\u30c8\uff08web\u30d5\u30a9\u30f3\u30c8\uff09 *\/\r\n  font-family: "M PLUS Rounded 1c";\r\n}\r\n\r\n\r\n\r\n\/* \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\r\n.is-slide-attention {\r\n  \/*\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a\uff5c\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u540d\uff5c1\u56de\u306e\u30b5\u30a4\u30af\u30eb\u306b\u8981\u3059\u308b\u6642\u9593\uff5c\u5b9f\u884c\u56de\u6570 *\/\r\n  animation: slide-attention 1s infinite;\r\n}\r\n\r\n\/* \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u8a73\u7d30 *\/\r\n@keyframes slide-attention {\r\n\r\n  \/* \u30b9\u30bf\u30fc\u30c8\u6642 *\/\r\n  0% {\r\n    \/* X\u65b9\u5411\u3001Y\u65b9\u5411 *\/\r\n    transform: translate(0, 0);\r\n  }\r\n\r\n  50% {\r\n    transform: translate(0, 10px);\r\n  }\r\n\r\n  \/* \u7d42\u4e86\u6642 *\/\r\n  100% {\r\n    transform: translate(0, 0);\r\n  }\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u6ce8\u76ee\uff01 \u4e0b\u8a18Beyond\u30b3\u30fc\u30c9 JS head lt;!– HTML\u3053\u3053\u304b\u3089 –gt; lt;div class=quot;balloon__area-attentionquot;gt; lt;!– <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,9],"tags":[4,15,16],"class_list":["post-235","post","type-post","status-publish","format-standard","hentry","category-addquicktag","category-9","tag-simplicity02","tag-15","tag-16"],"_links":{"self":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=235"}],"version-history":[{"count":2,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/235\/revisions"}],"predecessor-version":[{"id":248,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/235\/revisions\/248"}],"wp:attachment":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}