{"id":474,"date":"2018-01-03T20:49:09","date_gmt":"2018-01-03T11:49:09","guid":{"rendered":"https:\/\/yuis-programming.com\/?p=474"},"modified":"2020-01-08T21:38:45","modified_gmt":"2020-01-08T12:38:45","slug":"wordpress%e3%81%a7%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%82%b3%e3%83%bc%e3%83%89%e3%81%a7%e7%b0%a1%e5%8d%98%e3%81%ab%e3%83%81%e3%83%a3%e3%83%83%e3%83%88%e9%a2%a8%e3%81%ab%e6%96%87%e7%ab%a0%e3%82%92","status":"publish","type":"post","link":"https:\/\/yuis-programming.com\/?p=474","title":{"rendered":"WordPress\u3067\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u3067\u7c21\u5358\u306b\u30c1\u30e3\u30c3\u30c8\u98a8\u306b\u6587\u7ae0\u3092\u66f8\u304f"},"content":{"rendered":"<p><a href=\"http:\/\/vdeep.net\/css-chat-design\">\u53c2\u8003\u30b5\u30a4\u30c8<\/a>\u3092\u53c2\u8003\u306b\u3057\u306a\u304c\u3089\u4f5c\u308a\u307e\u3057\u305f\u3002<\/p>\n<p><img src=\"https:\/\/yuis.xsrv.jp\/images\/ss\/ShareX_ScreenShot_a81bd513-2721-4383-a103-8e72ba91b84c.png\" alt=\"\u30c1\u30e3\u30c3\u30c8\"><\/p>\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#CSS\"><span class=\"toc_number toc_depth_1\">1<\/span> CSS\u3092\u8aad\u307f\u8fbc\u307e\u305b\u308b<\/a><\/li><li><a href=\"#i\"><span class=\"toc_number toc_depth_1\">2<\/span> \u30a2\u30a4\u30b3\u30f3\u753b\u50cf\u3092\u4f5c\u6210\u3059\u308b<\/a><\/li><li><a href=\"#i-2\"><span class=\"toc_number toc_depth_1\">3<\/span> \u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u3092\u5b9f\u88c5\u3059\u308b<\/a><\/li><li><a href=\"#i-3\"><span class=\"toc_number toc_depth_1\">4<\/span> \u5b9f\u969b\u306b\u4f7f\u3063\u3066\u307f\u308b<\/a><\/li><\/ul><\/div>\n<h2><span id=\"CSS\">CSS\u3092\u8aad\u307f\u8fbc\u307e\u305b\u308b<\/span><\/h2>\n<p>\u3053\u3061\u3089\u306eCSS\u3092header.php\u306a\u3069\u3067\u8aad\u307f\u8fbc\u307e\u305b\u307e\u3059\u3002<\/p>\n<p>CSS\u306e\u8aad\u307f\u8fbc\u307e\u305b\u65b9\u306b\u3064\u3044\u3066\uff1a [googlecustom &#8220;wordpress css&#8221;]<\/p>\n<pre><code>\n\/* \u5439\u304d\u51fa\u3057 *\/\n\/* \u5439\u304d\u51fa\u3057 *\/\n\/* \u5439\u304d\u51fa\u3057 *\/\n\n.chat-box {\n    width: 100%;\n    height: auto;\n    overflow: hidden; \/*float\u306e\u89e3\u9664*\/\n    margin-bottom: 20px;\n}\n.chat-face {\n    float: left;\n    margin-right: -120px;\n}\n.chat-face img{\n    border-radius: 30px;\n    border: 1px solid #ccc;\n    box-shadow: 0 0 4px #ddd;\n}\n.chat-area {\n    width: 100%;\n    float: right;\n}\n.chat-hukidashi {\n    display: inline-block; \/*\u30b3\u30e1\u30f3\u30c8\u306e\u6587\u5b57\u6570\u306b\u5408\u308f\u305b\u3066\u53ef\u5909*\/\n    padding: 15px 20px;\n    margin-left: 120px;\n    margin-top: 8px;\n    \/* border: 1px solid gray; \u2190\u524a\u9664 *\/\n    border-radius: 10px;\n    position: relative; \/*\u8ffd\u8a18*\/\n    background-color: #D9F0FF; \/*\u8ffd\u8a18*\/\n}\n\/* \u2193\u8ffd\u8a18\u2193 *\/\n.chat-hukidashi:after {\n    content: \"\";\n    position: absolute;\n    top: 50%; left: -10px;\n    margin-top: -10px;\n    display: block;\n    width: 0px;\n    height: 0px;\n    border-style: solid;\n    border-width: 10px 10px 10px 0;\n    border-color: transparent #D9F0FF transparent transparent;\n}\n.someone {\n    background-color: #BCF5A9;\n}\n.someone:after {\n    border-color: transparent #BCF5A9 transparent transparent;\n}\n\/* \u2191\u8ffd\u8a18\u2191 *\/\n\n<\/code><\/pre>\n<h2><span id=\"i\">\u30a2\u30a4\u30b3\u30f3\u753b\u50cf\u3092\u4f5c\u6210\u3059\u308b<\/span><\/h2>\n<p>\u30a2\u30a4\u30b3\u30f3\u753b\u50cf\u3092\u4f5c\u6210\u3057\u3066\u3001FTP\u3067\u30b5\u30fc\u30d0\u30fc\u306b\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002<br \/>\n\u3053\u3053\u3067\u306f\u3001\u4f8b\u3068\u3057\u3066\u3001yuis.png man.png woman.png \u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3059\u308b\u3068\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<h2><span id=\"i-2\">\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u3092\u5b9f\u88c5\u3059\u308b<\/span><\/h2>\n<p>\u3053\u3061\u3089\u3092functions.php\u306b\u8cbc\u308a\u4ed8\u3051\u307e\u3059\u3002<\/p>\n<pre><code>\n\n\/\/\n\/\/ \u30c1\u30e3\u30c3\u30c8\u98a8\n\/\/\n\nfunction chat($attr){\n  return '&lt;div class=\"chat-box\"&gt;\n  &lt;div class=\"chat-face\"&gt;\n  &lt;img src=\"https:\/\/yuis.xsrv.jp\/images\/icon\/'. $attr[0] . '\" alt=\"' . $attr[0] .'\" width=\"90\" height=\"90\"&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"chat-area\"&gt;\n  &lt;div class=\"chat-hukidashi\"&gt;' . $attr[1] . '&lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;\/div&gt;' ;\n}\n\nadd_shortcode('chat','chat') ;\n\n<\/code><\/pre>\n<p><code>https:\/\/yuis.xsrv.jp\/images\/icon\/<\/code>\u306e\u90e8\u5206\u3092\u3001\u81ea\u5206\u306e\u30a2\u30a4\u30b3\u30f3\u753b\u50cf\u306e\u3042\u308b\u30d5\u30a9\u30eb\u30c0\u540d\u306b\u5909\u3048\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<h2><span id=\"i-3\">\u5b9f\u969b\u306b\u4f7f\u3063\u3066\u307f\u308b<\/span><\/h2>\n<p>\u3067\u306f\u3001\u30c6\u30b9\u30c8\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u3053\u3093\u306a\u611f\u3058\u3067\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u3092\u66f8\u304d\u307e\u3059\u3002<\/p>\n<pre><code>[chat yuis.png \"\u50d5\u3067\u3059\u3002\"]\n[chat men.png \u7537\u6027\u3067\u3059\u3002]\n[chat women.png \u5973\u6027\u3067\u3059\u3002]\n<\/code><\/pre>\n<p>\u8a18\u4e8b\u3092\u30d7\u30ec\u30d3\u30e5\u30fc\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>[chat yuis.png &#8220;\u50d5\u3067\u3059\u3002&#8221;]<br \/>\n[chat men.png \u7537\u6027\u3067\u3059\u3002]<br \/>\n[chat women.png \u5973\u6027\u3067\u3059\u3002]<\/p>\n<p>\u3053\u3093\u306a\u611f\u3058\u306b\u306a\u308a\u307e\u3057\u305f\u3067\u3057\u3087\u3046\u304b\uff1f<\/p>\n<p><img src=\"https:\/\/yuis.xsrv.jp\/images\/ss\/ShareX_ScreenShot_a81bd513-2721-4383-a103-8e72ba91b84c.png\" alt=\"\u30c1\u30e3\u30c3\u30c8\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u53c2\u8003\u30b5\u30a4\u30c8\u3092\u53c2\u8003\u306b\u3057\u306a\u304c\u3089\u4f5c\u308a\u307e\u3057\u305f\u3002 Contents1 CSS\u3092\u8aad\u307f\u8fbc\u307e\u305b\u308b2 \u30a2\u30a4\u30b3\u30f3\u753b\u50cf\u3092\u4f5c\u6210\u3059\u308b3  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[53],"tags":[],"acf":[],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8Rxwo-7E","_links":{"self":[{"href":"https:\/\/yuis-programming.com\/index.php?rest_route=\/wp\/v2\/posts\/474"}],"collection":[{"href":"https:\/\/yuis-programming.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yuis-programming.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yuis-programming.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yuis-programming.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=474"}],"version-history":[{"count":2,"href":"https:\/\/yuis-programming.com\/index.php?rest_route=\/wp\/v2\/posts\/474\/revisions"}],"predecessor-version":[{"id":2218,"href":"https:\/\/yuis-programming.com\/index.php?rest_route=\/wp\/v2\/posts\/474\/revisions\/2218"}],"wp:attachment":[{"href":"https:\/\/yuis-programming.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yuis-programming.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yuis-programming.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}