{"id":173,"date":"2023-01-27T21:17:20","date_gmt":"2023-01-27T12:17:20","guid":{"rendered":"https:\/\/phantom-cgray03.xyz\/?p=173"},"modified":"2023-02-07T17:55:57","modified_gmt":"2023-02-07T08:55:57","slug":"post-173","status":"publish","type":"post","link":"https:\/\/phantom-cgray03.xyz\/?p=173","title":{"rendered":"\u3010\u5439\u304d\u51fa\u3057\u3011\u53f3\u30a2\u30a4\u30b3\u30f3\u4f1a\u8a71\u98a8\u5439\u304d\u51fa\u305701"},"content":{"rendered":"
\n
\n
\n

\u3053\u3061\u3089\u306b\u6587\u7ae0\u3092\u8ffd\u52a0\u3002\u8272\u5909\u66f4\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/div>\n<\/div>\n

<\/p>\n
\u30a2\u30a4\u30b3\u30f3\u540d<\/div>\n<\/div>\n<\/div>\n

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

JS head<\/p>\n

\u306a\u3057<\/p>\n

HTML<\/p>\n

<div class=\"balloon_right_01\">\r\n    <div class=\"chatting\">\r\n        <div class=\"says_right_01\">\r\n            <p>\u3053\u3061\u3089\u306b\u6587\u7ae0\u3092\u8ffd\u52a0\u3002\u8272\u5909\u66f4\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\r\n        <\/div>\r\n    <\/div>\r\n    <div class=\"faceicon_right_01\">\r\n        <!--\u753b\u50cf\u306e\u5165\u308c\u66ff\u3048\u306f\u4e0b\u8a18URL\u5909\u66f4\u3082\u3057\u304f\u306f\u5de6\u306b\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u753b\u50cf\u3092\u9078\u629e\u3057\u305f\u5f8c\u306b\u4e0a\u90e8\u306e\u753b\u50cf\u30dc\u30bf\u30f3\u304b\u3089\u3082\u5165\u308c\u66ff\u3048\u53ef\u80fd--><img src=\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/631031\/65882372-a684-416b-a484-fe55664b6da8.png\" draggable=\"false\" class=\"lazyload\" height=\"51\" width=\"51\">\r\n        <!--\u30a2\u30a4\u30b3\u30f3\u540d\u304c\u4e0d\u8981\u306a\u5834\u5408\u306f\u4e0b\u8a18\uff11\u884c\u3092\u524a\u9664\u3057\u3066\u304f\u3060\u3055\u3044-->\r\n        <div class=\"name\">\u30a2\u30a4\u30b3\u30f3\u540d<\/div>\r\n    <\/div>\r\n<\/div><\/code><\/pre>\n
CSS<\/p>\n
 .balloon_right_01 {\r\n  \/*\u5468\u308a\u306e\u4f59\u767d\u3002\u4e0a\u4e0b\uff5c\u5de6\u53f3*\/\r\n  margin: 1.5em 0;\r\n  overflow: hidden;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n}\r\n\r\n .chatting {\r\n  \/*\u5439\u304d\u51fa\u3057\u306e\u5e45\u3092\u5909\u66f4\u3059\u308b\u5834\u5408\u3001\u4e0b\u8a18auto\u3092\u524a\u9664\u3057\u306620%\u304b\u3089100%\u306e\u5024\u3092\u6307\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044*\/\r\n  width: auto;\r\n}\r\n\r\n .faceicon_right_01 {\r\n  display: inline-block;\r\n  width: 55px;\r\n  min-width: 55px;\r\n  height: auto;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n .faceicon_right_01 img {\r\n  \/*\u753b\u50cf\u5468\u308a\u306e\u7dda\u3002\u7dda\u306e\u7a2e\u985e\uff5c\u7dda\u306e\u592a\u3055\uff5c\u7dda\u306e\u8272*\/\r\n  border: solid 3px #d7ebfe;\r\n  width: 55px;\r\n  max-width: 55px;\r\n  height: 55px !important;\r\n  object-fit: cover;\r\n  box-sizing: border-box;\r\n  border-radius: 50%;\r\n}\r\n\r\n .name {\r\n  \/*\u30a2\u30a4\u30b3\u30f3\u540d\u306e\u6587\u5b57\u30b5\u30a4\u30ba*\/\r\n  font-size: 10px;\r\n  \/*\u30a2\u30a4\u30b3\u30f3\u540d\u306e\u6587\u5b57\u306e\u8272*\/\r\n  color: #808080;\r\n  text-align: center;\r\n}\r\n\r\n .says_right_01 {\r\n  display: block;\r\n  position: relative;\r\n  margin: 0;\r\n  padding: 12px;\r\n  border-radius: 10pt;\r\n  \/*\u5439\u304d\u51fa\u3057\u306e\u80cc\u666f\u8272\u6307\u5b9a\u3002\u203b\u4e09\u89d2\u90e8\u5206\u306e\u8272\u306f\u4e0b\u306e.says:before\u304b\u3089\u5909\u66f4*\/\r\n  background-color: #d7ebfe;\r\n  margin-right: 20px;\r\n}\r\n\r\n .says_right_01:before {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 15px;\r\n  right: -11px;\r\n  \/*\u4e09\u89d2\u90e8\u5206\u306e\u8272\u5909\u66f4\u306f\u4e0b\u8a18\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092\u5909\u66f4\u304f\u3060\u3055\u3044*\/\r\n  border-left: 11px solid #d7ebfe;\r\n  border-bottom: 11px solid transparent;\r\n  border-top: 11px solid transparent;\r\n}\r\n\r\n .says_right_01 p {\r\n  margin: 0;\r\n  padding: 0;\r\n  letter-spacing: -0.01em;\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u3053\u3061\u3089\u306b\u6587\u7ae0\u3092\u8ffd\u52a0\u3002\u8272\u5909\u66f4\u3082\u3067\u304d\u307e\u3059\u3002 \u30a2\u30a4\u30b3\u30f3\u540d \u4e0b\u8a18Beyond\u30b3\u30fc\u30c9 JS head \u306a\u3057 HTML lt;div class=”balloon_right_01″gt; lt;div class=”chat<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,11],"tags":[4,13,12],"class_list":["post-173","post","type-post","status-publish","format-standard","hentry","category-addquicktag","category-11","tag-simplicity02","tag-13","tag-12"],"_links":{"self":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/173","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=173"}],"version-history":[{"count":5,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/173\/revisions"}],"predecessor-version":[{"id":222,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/173\/revisions\/222"}],"wp:attachment":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}