{"id":354,"date":"2018-09-04T22:47:27","date_gmt":"2018-09-04T13:47:27","guid":{"rendered":"https:\/\/maipyon.net\/?p=354"},"modified":"2023-12-14T21:37:22","modified_gmt":"2023-12-14T12:37:22","slug":"swiper","status":"publish","type":"post","link":"https:\/\/maipyon.net\/swiper\/","title":{"rendered":"\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f7f\u308f\u305aWordPress\u306b\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u4f5c\u308b\u65b9\u6cd5\u3010\u30b3\u30d4\u30da\u3067OK\u3011"},"content":{"rendered":"<div id=\"sgb-css-id-2\">\n<div class=\"wp-block-sgb-block-simple sgb-box-simple sgb-box-simple--title-center sgb-box-simple--no-border title-box-css\"><div style=\"background-color:#f5a15f;color:#FFF\" class=\"sgb-box-simple__title\"><i class=\"fas fa-check\"><\/i> \u3053\u3093\u306a\u60a9\u307f\u306b\u7b54\u3048\u307e\u3059<\/div><div class=\"sgb-box-simple__body\" style=\"border-color:#f5a15f;background-color:#fff9eb\">\n<ul class=\"wp-block-list\">\n<li>\u30b5\u30a4\u30c8\u5185\u306b\u30b9\u30e9\u30a4\u30c0\u30fc(\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc)\u3092\u4f5c\u308a\u305f\u3044<\/li>\n\n\n\n<li>WordPress\u3060\u3051\u3069\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f7f\u308f\u305a\u306b\u4f5c\u308a\u305f\u3044<\/li>\n\n\n\n<li>\u51fa\u6765\u308c\u3070\u521d\u5fc3\u8005\u3067\u3082\u5206\u304b\u308b\u3088\u3046\u306b\u3001\u30b3\u30d4\u30da\u3067\u6e08\u3080\u3082\u306e\u304c\u3044\u3044\u306a\u30fb\u30fb\u30fb\u3002<\/li>\n<\/ul>\n<\/div><\/div>\n<\/div>\n\n\n<p>\u3053\u3093\u306a\u60a9\u307f\u306b\u7b54\u3048\u308b\u8a18\u4e8b\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u4eca\u56de\u306f\u3001\u30b3\u30d4\u30da\u3060\u3051\u3067\u30b9\u30e9\u30a4\u30c0\u30fc\u30fb\u304a\u3088\u3073\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3092WordPress\u5185\u306b\u4f5c\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>Swiper\u3068\u3044\u3046\u3082\u306e\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u3001<strong><span class=\"keiko_yellow\">\u30d7\u30e9\u30b0\u30a4\u30f3\u306f\u4f7f\u3063\u3066\u3044\u307e\u305b\u3093\uff01<\/span><\/strong><\/p>\n\n\n\n<p>\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f7f\u7528\u305b\u305a\u306b\u3069\u3046\u306b\u304b\u3057\u3066\u5b9f\u88c5\u3057\u3088\u3046\u3068\u3059\u308b\u306e\u304c\u597d\u304d\u3067\u3059(\u7b11)<\/p>\n\n\n\n<p>\u4eca\u56de\u306e\u8a18\u4e8b\u3067\u306f\u3001\u524d\u534a\u306b\u7c21\u5358\u306a\u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u4f5c\u308a\u65b9\u3001\u5f8c\u534a\u306b\u4f7f\u7528\u4f8b\u3068\u3057\u3066\u3001\u95a2\u9023\u8a18\u4e8b\u306b\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u7d44\u307f\u8fbc\u3080\u65b9\u6cd5\u306b\u3064\u3044\u3066\u7d39\u4ecb\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"toc\"><br \/>\n<b>Warning<\/b>:  Undefined array key \"is_top\" in <b>\/home\/c6487337\/public_html\/maipyon.net\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Conditional.php<\/b> on line <b>58<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_category_top\" in <b>\/home\/c6487337\/public_html\/maipyon.net\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Conditional.php<\/b> on line <b>59<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_404\" in <b>\/home\/c6487337\/public_html\/maipyon.net\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Conditional.php<\/b> on line <b>60<\/b><br \/>\n<\/div><div class=\"toc\"><br \/>\n<b>Warning<\/b>:  Undefined array key \"is_admin\" in <b>\/home\/c6487337\/public_html\/maipyon.net\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>113<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_category_top\" in <b>\/home\/c6487337\/public_html\/maipyon.net\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>118<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_top\" in <b>\/home\/c6487337\/public_html\/maipyon.net\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>124<\/b><br \/>\n    <div id=\"toc_container\" class=\"toc_container toc-container sgb-toc--bullets js-smooth-scroll\" data-dialog-title=\"Table of Contents\">\n      <p class=\"toc_title\">\u3053\u306e\u8a18\u4e8b\u306e\u76ee\u6b21 <\/p>\n      <ul class=\"toc_list\">  <li class=\"first\">    <a href=\"#i-0\">\u5b8c\u6210\u3057\u305f\u30b9\u30e9\u30a4\u30c0\u30fc\u306f\u3069\u3093\u306a\u898b\u305f\u76ee\u304b<\/a>  <\/li>  <li>    <a href=\"#i-1\">Swiper\u3092\u4f7f\u7528\u3057\u3066WordPress\u306b\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u4f5c\u6210\u3059\u308b<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-2\">\u30b9\u30e9\u30a4\u30c0\u30fc\u306eHTML<\/a>      <\/li>      <li>        <a href=\"#i-3\">\u30b9\u30e9\u30a4\u30c0\u30fc\u306eCSS<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-4\">WordPress\u3067\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3092\u4f5c\u308b\u306b\u306f\uff1f<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-5\">\u30b9\u30e9\u30a4\u30c0\u30fc\u3092WordPress\u306e\u95a2\u9023\u8a18\u4e8b\u306b\u4f7f\u3046\u5834\u5408<\/a>  <\/li>  <li>    <a href=\"#i-6\">\u30b9\u30e9\u30a4\u30c0\u30fc\u306b\u516c\u544a\u3092\u631f\u3080\u5834\u5408<\/a>    <ul class=\"menu_level_1\">      <li class=\"first last\">        <a href=\"#i-7\">\u540c\u69d8\u306b\u95a2\u9023\u8a18\u4e8b\u306e\u90e8\u5206\u3092\u66f8\u304d\u63db\u3048\u308b<\/a>      <\/li>    <\/ul>  <\/li>  <li class=\"last\">    <a href=\"#i-8\">WordPress\u3067\u30b9\u30e9\u30a4\u30c0\u30fc\/\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3092\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5\u307e\u3068\u3081<\/a>  <\/li><\/ul>\n      \n    <\/div><\/div><h2 class=\"wp-block-heading\" id=\"i-0\">\u5b8c\u6210\u3057\u305f\u30b9\u30e9\u30a4\u30c0\u30fc\u306f\u3069\u3093\u306a\u898b\u305f\u76ee\u304b<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"341\" src=\"https:\/\/maipyon.net\/wp-content\/uploads\/2018\/09\/kanren-e1536834301368.png\" alt=\"\u30b9\u30e9\u30a4\u30c0\u30fc\u3067\u95a2\u9023\u8a18\u4e8b\u3092\u8868\u793a\" class=\"wp-image-364\" srcset=\"https:\/\/maipyon.net\/wp-content\/uploads\/2018\/09\/kanren-e1536834301368.png 700w, https:\/\/maipyon.net\/wp-content\/uploads\/2018\/09\/kanren-e1536834301368-300x146.png 300w, https:\/\/maipyon.net\/wp-content\/uploads\/2018\/09\/kanren-e1536834301368-30x15.png 30w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\"><\/figure>\n\n\n\n<p>\u30b9\u30e9\u30a4\u30c0\u30fc\u304c\u5b8c\u6210\u3057\u3001\u4f8b\u3048\u3070\u305d\u308c\u3092\u95a2\u9023\u8a18\u4e8b\u306b\u9069\u7528\u3055\u305b\u3066\u8868\u793a\u3055\u305b\u308b\u3068\u3001\u4ee5\u4e0b\u306e\u753b\u50cf\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<br><\/p>\n\n\n\n<p>\u753b\u50cf\u3060\u3051\u306e\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306b\u3059\u308b\u306e\u3067\u3042\u308c\u3070\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u611f\u3058\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1056\" height=\"254\" src=\"https:\/\/maipyon.net\/wp-content\/uploads\/2018\/09\/swiper.gif\" alt=\"\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306e\u898b\u672c\" class=\"wp-image-5220\"><\/figure>\n\n\n\n<div class=\"wp-block-sgb-say\"><div class=\"sgb-block-say sgb-block-say--left\"><div class=\"sgb-block-say-avatar\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/maipyon.net\/programming\/wp-content\/uploads\/2021\/10\/maipyon.jpg\" alt=\"maipyon\" width=\"80\" height=\"80\" style=\"border-color:#eaedf2\"><div class=\"sgb-block-say-avatar__name\">maipyon<\/div><\/div><div class=\"sgb-block-say-text\"><div class=\"sgb-block-say-text__content\" style=\"color:#333;border-color:#eeeeee;background-color:#eeeeee\">\n<p>4\u679a\u306e\u753b\u50cf\u304c\u7121\u9650\u30eb\u30fc\u30d7\u3057\u3066\u3044\u308b\u3068\u3044\u3046\u611f\u3058\u3002<br>\u8a2d\u5b9a\u6b21\u7b2c\u3067\u7121\u9650\u30eb\u30fc\u30d7\u3092\u6b62\u3081\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<span class=\"sgb-block-say-text__before\" style=\"border-right-color:#eeeeee\"><\/span><span class=\"sgb-block-say-text__after\" style=\"border-right-color:#eeeeee\"><\/span><\/div><\/div><\/div><\/div>\n\n\n\n<p>\u3082\u3061\u308d\u3093\u30b9\u30de\u30db\u5bfe\u5fdc\u6e08\u307f\u3002<\/p>\n\n\n\n<p><strong><span class=\"keiko_yellow\">\u5404\u30b9\u30e9\u30a4\u30c91\u679a\u306e\u6a2a\u306e\u9577\u3055\u306f250px\u3067\u3001\u5e83\u544a\u3092\u5165\u308c\u305f\u3044\u3068\u601d\u3063\u305f\u3068\u304d\u306b\u3001\u5e83\u544a\u4f5c\u6210\u3059\u308b\u3068\u304d\u306e\u6700\u5c0f\u306e\u6a2a\u5e45<\/span><\/strong>\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30b9\u30de\u30db\/\u30de\u30a6\u30b9\u3067\u306e\u30d5\u30ea\u30c3\u30af\/\u30c9\u30e9\u30c3\u30b0\u3067\u306e\u79fb\u52d5\u304c\u53ef\u80fd\u3067\u3001\u6700\u521d\u306f\u81ea\u52d5\u3067\u52d5\u304f\u306e\u3067\u3059\u304c\u3001\u4e00\u56de\u62bc\u3059\u3068\u81ea\u52d5\u3067\u52d5\u304b\u306a\u304f\u306a\u308a\u307e\u3059\uff08\u3053\u306e\u8fba\u306f\u8abf\u7bc0\u53ef\u80fd\u3067\u3059\uff09<\/p>\n\n\n\n<p>\u3082\u3061\u308d\u3093\u3001\u8a18\u4e8b\u3067\u306f\u306a\u304f\u753b\u50cf\u306b\u3057\u3066\u3001\u3042\u3068\u3067\u30b5\u30a4\u30ba\u3092CSS\u3067\u9069\u5b9c\u8abf\u7bc0\u3059\u308b\u3053\u3068\u3067\u65c5\u306e\u601d\u3044\u51fa\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306b\u3059\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-sgb-box sng-box box7\">\n<p>Swiper\u306e\u30c7\u30e2(<a href=\"http:\/\/idangero.us\/swiper\/demos\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u3053\u3061\u3089<\/a>\u304b\u3089\u898b\u308c\u307e\u3059)\u3067\u306f\u3001\u753b\u9762\u304c\u5c0f\u3055\u304f\u306a\u308b\u3068\u3001\u30b9\u30e9\u30a4\u30c91\u679a1\u679a\u306e\u6a2a\u5e45\u304c\u72ed\u307e\u308b\u3053\u3068\u3067\u300c\u7d76\u5bfe3\u679a\u8868\u793a\u3055\u305b\u308b\u300d\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3057\u304b\u3057\u3001WordPress\u3067\u4f7f\u3046\u3068\u304d\u306f\u95a2\u9023\u8a18\u4e8b\u306a\u3069\u306f\u7279\u306b\u30c7\u30b6\u30a4\u30f3\u304c\u5d29\u308c\u308b\u3068\u52ff\u4f53\u306a\u3044\u305f\u3081\u3001\u30b9\u30e9\u30a4\u30c91\u679a1\u679a\u306e\u6a2a\u5e45\u306f\u56fa\u5b9a\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-1\">Swiper\u3092\u4f7f\u7528\u3057\u3066WordPress\u306b\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u4f5c\u6210\u3059\u308b<\/h2>\n\n\n\n<p>\u307e\u305a\u306f\u3001\u57fa\u672c\u7684\u306a\u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u4f5c\u6210\u65b9\u6cd5\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u95a2\u9023\u8a18\u4e8b\u3068\u3057\u3066\u3067\u306f\u306a\u304f\u3066\u3001\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3068\u3057\u3066\u753b\u50cf\u3092\u5165\u308c\u8fbc\u307f\u305f\u3044\u3068\u3044\u3046\u65b9\u306f\u3053\u3053\u3060\u3051\u898b\u308c\u3070OK\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u57fa\u672c\u7684\u306a\u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u5165\u308c\u65b9\u3067\u3059\u304c\u3001<strong>\u307e\u305a<code>&lt;head&gt;\uff5e&lt;\/head&gt;<\/code>\u306e\u4e2d\u306b\u30b3\u30ec\u2193\u3092\u5165\u308c\u307e\u3059\u3002<\/strong>(header.php\u306b\u3042\u308a\u307e\u3059\uff09<\/p>\n\n\n\n<div class=\"wp-block-sgb-codebox pre_tag\"><span><i class=\"fa fa-code\"><\/i>header.php<\/span><pre class=\"js-sng-highlight\"><code>&lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/swiper@7\/swiper-bundle.min.css\"\/&gt;<\/code><\/pre><\/div>\n\n\n\n<p>\u3053\u308c\u306f\u3001CDN\u3068\u3044\u3046\u3082\u306e\u3092\u4f7f\u3063\u3066\u30b9\u30e9\u30a4\u30c0\u30fc\u306b\u5fc5\u8981\u306a\u8981\u7d20\u3092\u3082\u308d\u3082\u308d\u53d6\u3063\u3066\u304d\u3066\u3044\u308b\u611f\u3058\u3067\u3059\u3002<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>CDN\u3068\u306f<\/p>\n\n\n\n<p>\u30b3\u30f3\u30c6\u30f3\u30c4\u30fb\u30c7\u30ea\u30d0\u30ea\u30fc\u30fb\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u306f\u3001\u9ad8\u5ea6\u306b\u5206\u6563\u3055\u308c\u305f\u30b5\u30fc\u30d0\u30fc\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3067\u3001\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3084\u30b9\u30c8\u30ea\u30fc\u30df\u30f3\u30b0\u30e1\u30c7\u30a3\u30a2\u306a\u3069\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u914d\u4fe1\u3059\u308b\u305f\u3081\u306b\u6700\u9069\u5316\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u30b5\u30fc\u30d0\u30fc\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u306f\u3001\u30a8\u30f3\u30c9\u30e6\u30fc\u30b6\u30fc\u306b\u3088\u308b\u30a6\u30a7\u30d6\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u306b\u76f4\u63a5\u5fdc\u7b54\u3057\u3066\u3001\u9ad8\u901f\u304b\u3064\u5b89\u5168\u306a\u30e1\u30c7\u30a3\u30a2\u914d\u4fe1\u3092\u5b9f\u73fe\u3059\u308b\u305f\u3081\u3001\u591a\u6570\u306e\u7269\u7406\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30ed\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u5206\u6563\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u306f\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u30b5\u30fc\u30d0\u30fc\uff08\u30aa\u30ea\u30b8\u30f3\u3068\u3082\u547c\u3070\u308c\u308b\uff09\u3068\u30a8\u30f3\u30c9\u30e6\u30fc\u30b6\u30fc\uff0f\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3068\u306e\u4e2d\u9593\u30b5\u30fc\u30d0\u30fc\u306e\u5f79\u5272\u3092\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u51fa\u5178\uff1ahttps:\/\/www.akamai.com\/jp\/ja\/cdn\/what-is-a-cdn.jsp<\/p>\n<\/blockquote>\n\n\n\n<p>\u6b21\u306b\u3001JavaScript\u306e\u30b3\u30fc\u30c9\u3092<code>&lt;\/body&gt;<\/code>\u306e\u3059\u3050\u4e0a\u306b\u5165\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"customize-des\">\n<div class=\"customize-box\">\u7de8\u96c6\u3059\u308b\u7b87\u6240<\/div>\n<div class=\"customize-box\">\u5916\u89b3<\/div>\n<div class=\"fa fa-caret-right fa-fw\" style=\"color: #4caf50;\">&nbsp;<\/div>\n<div class=\"customize-box\">\u30c6\u30fc\u30de\u30a8\u30c7\u30a3\u30bf\u30fc<\/div>\n<div class=\"fa fa-caret-right fa-fw\" style=\"color: #4caf50;\">&nbsp;<\/div>\n<div class=\"customize-box\">footer.php<\/div>\n<\/div>\n\n\n\n<p>\u4e0a\u8a18\u306e\u5834\u6240\u306b<code>&lt;\/body&gt;<\/code>\u304c\u3042\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-sgb-codebox pre_tag\"><span><i class=\"fa fa-code\"><\/i>JavaScript<\/span><pre class=\"js-sng-highlight\"><code>&lt;script src = \"https:\/\/unpkg.com\/swiper\/swiper-bundle.min.js\"&gt;&lt;\/script&gt;\n&lt;script&gt;\nvar swiper = new Swiper('.swiper-container', {\n  slidesPerView: 'auto',\n  spaceBetween: 30,\n  loop: true,\n  centeredSlides: true,\n  pagination: '.swiper-pagination',\n  autoplay: 1500,\n  disableOnInteraction: false,\n});\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n\n<p>\u305d\u3057\u3066\u3001<strong>\u3053\u306e\u90e8\u5206\u304c\u8272\u3005\u306a\u6a5f\u80fd\u306e\u8a2d\u5b9a\u90e8\u5206<\/strong>\u3067\u3059\u306e\u3067\u3001\u3053\u3053\u3092\u3044\u3058\u3063\u3066\u81ea\u52d5\u3067\u30b9\u30e9\u30a4\u30c9\u304c\u52d5\u304f\u3060\u3068\u304b\u3001\u30eb\u30fc\u30d7\u3055\u305b\u308b\u304b\u3060\u3068\u304b\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3068\u308a\u3042\u3048\u305a\u4eca\u56de\u306f\u3053\u306e\u307e\u307e\u3067OK\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-2\">\u30b9\u30e9\u30a4\u30c0\u30fc\u306eHTML<\/h3>\n\n\n\n<p>\u6b21\u306b\u3001\u30b9\u30e9\u30a4\u30c0\u30fc\u306eHTML\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-sgb-codebox pre_tag\"><span><i class=\"fa fa-code\"><\/i>HTML<\/span><pre class=\"js-sng-highlight\"><code>&lt;!-- \u5b9f\u88c5\u90e8\u5206 --&gt;\n&lt;div class=\"mainvisual\"&gt;\n  &lt;div class=\"swiper-container\" style=\"height: 250px;\"&gt;\n    &lt;div class=\"swiper-wrapper\"&gt;\n      &lt;div class=\"swiper-slide\"&gt;\u3053\u3053\u306b\u5165\u308c\u305f\u3082\u306e\u304c\u30b9\u30e9\u30a4\u30c9\u3059\u308b1&lt;\/div&gt;\n      &lt;div class=\"swiper-slide\"&gt;\u3053\u3053\u306b\u5165\u308c\u305f\u3082\u306e\u304c\u30b9\u30e9\u30a4\u30c9\u3059\u308b2&lt;\/div&gt;\n      &lt;div class=\"swiper-slide\"&gt;\u3053\u3053\u306b\u5165\u308c\u305f\u3082\u306e\u304c\u30b9\u30e9\u30a4\u30c9\u3059\u308b3&lt;\/div&gt;\n      &lt;div class=\"swiper-slide\"&gt;\u3053\u3053\u306b\u5165\u308c\u305f\u3082\u306e\u304c\u30b9\u30e9\u30a4\u30c9\u3059\u308b4&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"swiper-pagination\"&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<p>\u3053\u3061\u3089\u306f\u30af\u30e9\u30b7\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u3060\u3068\u30c6\u30ad\u30b9\u30c8\u30e2\u30fc\u30c9\u306b\u3057\u3066\u633f\u5165\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p>\u30b0\u30fc\u30c6\u30f3\u30d9\u30eb\u30af\u306e\u5834\u5408\u306f\u3001\u30ab\u30b9\u30bf\u30e0HTML\u30d6\u30ed\u30c3\u30af\u5185\u306b\u5165\u308c\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p><strong>\u300c\u3053\u3053\u306b\u5165\u308c\u305f\u3082\u306e\u304c\u30b9\u30e9\u30a4\u30c9\u3059\u308b\u300d\u306e\u90e8\u5206\u306f\u5897\u3084\u3057\u305f\u308a\u6e1b\u3089\u3057\u305f\u308a\u81ea\u7531\u3067\u3059\u306e\u3067\u3001\u6539\u5909\u306f\u3054\u81ea\u7531\u306b\u3069\u3046\u305e\u3002<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-3\">\u30b9\u30e9\u30a4\u30c0\u30fc\u306eCSS<\/h3>\n\n\n\n<p>\u6700\u5f8c\u306b\u3001CSS\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"customize-des\">\n<div class=\"customize-box\">\u7de8\u96c6\u3059\u308b\u7b87\u6240<\/div>\n<div class=\"customize-box\">\u5916\u89b3<\/div>\n<div class=\"fa fa-caret-right fa-fw\" style=\"color: #4caf50;\">&nbsp;<\/div>\n<div class=\"customize-box\">\u30c6\u30fc\u30de\u30a8\u30c7\u30a3\u30bf\u30fc<\/div>\n<div class=\"fa fa-caret-right fa-fw\" style=\"color: #4caf50;\">&nbsp;<\/div>\n<div class=\"customize-box\">style.css<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-sgb-codebox pre_tag\"><span><i class=\"fa fa-code\"><\/i>CSS<\/span><pre class=\"js-sng-highlight\"><code>.swiper-container {\n  width: 100%;\n  height: 100%;\n}\n\n.swiper-slide {\n  width: 250px!important;\n  height: auto!important;\n  overflow: visible;\n  text-align: center;\n  font-size: 18px;\n  background: #fff;\n  \/* Center slide text vertically *\/\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-pack: center;\n  -ms-flex-pack: center;\n  -webkit-justify-content: center;\n  justify-content: center;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  -webkit-align-items: center;\n  align-items: center;\n}\n\n.swiper-slide img{\n  width: 100%;\n  height: auto;\n}\n\n.mainvisual {\n  overflow-x: hidden;\n}<\/code><\/pre><\/div>\n\n\n\n<p>style.css\u306e\u4e00\u756a\u4e0b\u306b\u30b3\u30d4\u30da\u3067OK\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u30894\u3064\u3092\u30b3\u30d4\u30da\u3059\u308b\u3053\u3068\u3067\u3001\u4ee5\u4e0b\u306e\u753b\u50cf\u306e\u3088\u3046\u306a\u4e00\u65e6\u7c21\u5358\u306a\u30b9\u30e9\u30a4\u30c0\u30fc\u304c\u51fa\u6765\u4e0a\u304c\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"704\" height=\"271\" src=\"https:\/\/maipyon.net\/wp-content\/uploads\/2018\/09\/d64be6b34bb15cea8f34da16b4e43ccd.png\" alt=\"\u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u898b\u672c\" class=\"wp-image-5219\" srcset=\"https:\/\/maipyon.net\/wp-content\/uploads\/2018\/09\/d64be6b34bb15cea8f34da16b4e43ccd.png 704w, https:\/\/maipyon.net\/wp-content\/uploads\/2018\/09\/d64be6b34bb15cea8f34da16b4e43ccd-300x115.png 300w\" sizes=\"auto, (max-width: 704px) 100vw, 704px\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-4\">WordPress\u3067\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3092\u4f5c\u308b\u306b\u306f\uff1f<\/h3>\n\n\n\n<p>\u65c5\u7cfb\u306e\u8a18\u4e8b\u306a\u3069\u3067\u3001\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3092\u4f5c\u308a\u305f\u3044\u5834\u5408\u306f\u3001\u300c\u3053\u3053\u306b\u5165\u308c\u305f\u3082\u306e\u304c\u30b9\u30e9\u30a4\u30c9\u3059\u308b\u300d\u306e\u90e8\u5206\u3092\u753b\u50cf\u306b\u66f8\u304d\u63db\u3048\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p>\u898b\u672c\u3067\u306f4\u3064\u307e\u3067\u3067\u3059\u304c\u3001\u6570\u3092\u5897\u3084\u3059\u306e\u304c\u30aa\u30b9\u30b9\u30e1\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-sgb-accordion sgb-acc\"><input id=\"toggle-checkbox-e650e72d-c9af-4165-8ce7-f66a1fdc8772\" class=\"sgb-acc__input\" type=\"checkbox\"><label class=\"sgb-acc__title\" for=\"toggle-checkbox-e650e72d-c9af-4165-8ce7-f66a1fdc8772\" style=\"color:#333;background-color:#FFF\">\u5b9f\u88c5\u4f8b\u3092\u898b\u308b<\/label><div class=\"sgb-acc__content sgb-acc__content--save\">\n<div class=\"wp-block-sgb-codebox pre_tag\"><span><i class=\"fa fa-code\"><\/i>HTML<\/span><pre class=\"js-sng-highlight\"><code>&lt;!-- \u5b9f\u88c5\u90e8\u5206 --&gt;\n&lt;div class=\"mainvisual\"&gt;\n  &lt;div class=\"swiper-container\" style=\"height: 250px;\"&gt;\n    &lt;div class=\"swiper-wrapper\"&gt;\n      &lt;div class=\"swiper-slide\"&gt;&lt;img src=\"https:\/\/maipyon.net\/wp-content\/uploads\/2021\/11\/20211115172048_IMG_4818.jpg\" width=\"700\" height=\"444\" class=\"alignnone size-full wp-image-5189\" \/&gt;&lt;\/div&gt;\n      &lt;div class=\"swiper-slide\"&gt;&lt;img src=\"https:\/\/maipyon.net\/wp-content\/uploads\/2021\/11\/20211115172657_IMG_4828-1.jpg\" width=\"700\" height=\"405\" class=\"alignnone size-full wp-image-5192\" \/&gt;&lt;\/div&gt;\n      &lt;div class=\"swiper-slide\"&gt;&lt;img src=\"https:\/\/maipyon.net\/wp-content\/uploads\/2021\/11\/20211115171230_IMG_4803.jpg\" width=\"700\" height=\"466\" class=\"alignnone size-full wp-image-5191\" \/&gt;&lt;\/div&gt;\n      &lt;div class=\"swiper-slide\"&gt;&lt;img src=\"https:\/\/maipyon.net\/wp-content\/uploads\/2021\/11\/20211115170753_IMG_4796.jpg\" width=\"698\" height=\"419\" class=\"alignnone size-full wp-image-5197\" \/&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"swiper-pagination\"&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-5\">\u30b9\u30e9\u30a4\u30c0\u30fc\u3092WordPress\u306e\u95a2\u9023\u8a18\u4e8b\u306b\u4f7f\u3046\u5834\u5408<\/h2>\n\n\n\n<p>\u6b21\u306b\u95a2\u9023\u8a18\u4e8b\u306b\u5fdc\u7528\u3057\u3066\u3001\u8a18\u4e8b\u5192\u982d\u3067\u3082\u898b\u305b\u305f\u4ee5\u4e0b\u306e\u753b\u50cf\u306e\u3088\u3046\u306b\u8868\u793a\u3059\u308b\u65b9\u6cd5\u3092\u66f8\u3044\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"499\" src=\"https:\/\/maipyon.net\/wp-content\/uploads\/2018\/09\/kanren-1024x499.png\" alt=\"\" class=\"wp-image-364\"><\/figure>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u306b\u306f\u3001<strong>\u95a2\u9023\u8a18\u4e8b\u306e\u90e8\u5206\u30c6\u30fc\u30de\u306e\u30b3\u30fc\u30c9\u3092\u66f8\u304d\u66ff\u3048\u3066\u3044\u304d\u307e\u3059\u3002<\/strong><\/p>\n\n\n\n<div class=\"customize-des\">\n<div class=\"customize-box\">\u7de8\u96c6\u3059\u308b\u7b87\u6240<\/div>\n<div class=\"customize-box\">\u5916\u89b3<\/div>\n<div class=\"fa fa-caret-right fa-fw\" style=\"color: #4caf50;\">&nbsp;<\/div>\n<div class=\"customize-box\">\u30c6\u30fc\u30de\u30a8\u30c7\u30a3\u30bf\u30fc<\/div>\n<div class=\"fa fa-caret-right fa-fw\" style=\"color: #4caf50;\">&nbsp;<\/div>\n<div class=\"customize-box\">kanren.php<\/div>\n<\/div>\n\n\n\n<p>\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u95a2\u9023\u8a18\u4e8b\u306e\u90e8\u5206\u3068\u66f8\u304d\u63db\u3048\u308c\u3070\u5b8c\u6210\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-sgb-accordion sgb-acc\"><input id=\"toggle-checkbox-c1ec0d17-ee84-4c78-9833-26e064ca368f\" class=\"sgb-acc__input\" type=\"checkbox\"><label class=\"sgb-acc__title\" for=\"toggle-checkbox-c1ec0d17-ee84-4c78-9833-26e064ca368f\" style=\"color:#333;background-color:#FFF\">\u95a2\u9023\u8a18\u4e8b\u90e8\u5206\u306e\u30b3\u30fc\u30c9\u4fee\u6b63<\/label><div class=\"sgb-acc__content sgb-acc__content--save\">\n<div class=\"wp-block-sgb-codebox pre_tag\"><span><i class=\"fa fa-code\"><\/i>kanren.php<\/span><pre class=\"js-sng-highlight\"><code>&lt;div class=\"kanren\"&gt;\n  &lt;?php\n$kanrenpost_no = 5; \/\/\u8868\u793a\u3057\u305f\u3044\u8a18\u4e8b\u6570\n$categories = get_the_category( $post-&gt;ID );\n$category_ID = array();\nforeach ( $categories as $category ):\narray_push( $category_ID, $category-&gt;cat_ID );\nendforeach;\n$args = array(\n'post__not_in' =&gt; array( $post-&gt;ID ),\n'posts_per_page' =&gt; $kanrenpost_no,\n'category__in' =&gt; $category_ID,\n'orderby' =&gt; 'rand', \/\/\u30e9\u30f3\u30c0\u30e0\u8868\u793a\n);\n$st_query = new WP_Query( $args ); ?&gt;\n&lt;\/div&gt;\n&lt;div class=\"random\"&gt;\n  &lt;?php if ( $st_query-&gt;have_posts() ): ?&gt;\n  &lt;div class=\"mainvisual\"&gt;\n    &lt;div class=\"swiper-container\"&gt;\n      &lt;div class=\"swiper-wrapper\"&gt;\n        &lt;?php while ( $st_query-&gt;have_posts() ) : $st_query-&gt;the_post(); ?&gt;\n        &lt;!-- \u30b9\u30e9\u30a4\u30c9\u90e8\u5206 --&gt;\n        &lt;div class=\"swiper-slide\"&gt;\n          &lt;ul class=\"clearfix\"&gt;\n            &lt;?php if ( has_post_thumbnail() ): \/\/ \u30b5\u30e0\u30cd\u30a4\u30eb\u3092\u6301\u3063\u3066\u3044\u308b\u3068\u304d\u306e\u51e6\u7406 ?&gt;\n            &lt;a href=\"&lt;?php the_permalink() ?&gt;\"&gt;\n              &lt;?php the_post_thumbnail( 'medium' ); ?&gt;\n            &lt;\/a&gt;\n            &lt;?php else: \/\/ \u30b5\u30e0\u30cd\u30a4\u30eb\u3092\u6301\u3063\u3066\u3044\u306a\u3044\u3068\u304d\u306e\u51e6\u7406 ?&gt; &lt;img src=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/no-img.png\" alt=\"no image\" title=\"no image\" width=\"100\" height=\"100\" \/&gt;\n            &lt;?php endif; ?&gt;\n            &lt;div class=\"kanren-title\"&gt;\n              &lt;li&gt;&lt;a href=\"&lt;?php the_permalink() ?&gt;\"&gt;\n&lt;span&gt;&lt;?php the_title(); ?&gt;&lt;div class=\"hp-title\"&gt;&lt;a class=\"hp-title\" style=\"text-decoration:none; font-size:10px\" href=\"\u3042\u306a\u305f\u306e\u30da\u30fc\u30b8\u306e\u30db\u30fc\u30e0\u306eURL\"&gt;\u3042\u306a\u305f\u306e\u30d6\u30ed\u30b0\u540d&lt;\/a&gt;&lt;\/div&gt;\n            &lt;\/span&gt;\n            &lt;\/a&gt;\n            &lt;\/li&gt;\n        &lt;\/div&gt;\n        &lt;\/ul&gt;\n      &lt;\/div&gt;\n      &lt;?php endwhile; ?&gt; &lt;\/div&gt;\n    &lt;div class=\"swiper-pagination\"&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;?php else: ?&gt;\n&lt;p&gt;\u95a2\u9023\u8a18\u4e8b\u306f\u3042\u308a\u307e\u305b\u3093\u3067\u3057\u305f&lt;\/p&gt;\n&lt;?php endif; ?&gt;\n&lt;?php wp_reset_postdata(); ?&gt; &lt;\/div&gt;<\/code><\/pre><\/div>\n<\/div><\/div>\n\n\n\n<p>\u3053\u306e\u30b3\u30fc\u30c9\u3092\u53c2\u8003\u306b\u3057\u3066\u3001\u540c\u3058\u3088\u3046\u306a\u5185\u5bb9\u306b\u66f8\u304d\u63db\u3048\u3066\u3044\u3051\u3070\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n\n\n\n<p><strong><span class=\"yellow_line_narrow\">\u3042\u306a\u305f\u306e\u30b5\u30a4\u30c8\u306eURL\u3092\u5165\u308c\u308b\u90e8\u5206\u3082\u3042\u308a\u307e\u3059\u306e\u3067\u3001\u8abf\u7bc0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/span><\/strong><\/p>\n\n\n\n<p>\u307e\u305f\u3001\u4ee5\u4e0b\u306b\u7d39\u4ecb\u3057\u3066\u3044\u308b\u30b3\u30fc\u30c9\u306f<strong>\u95a2\u9023\u8a18\u4e8b\u306e\u30bf\u30a4\u30c8\u30eb\uff0b\u629c\u7c8b\u6587\u3092\u5165\u308c\u308b\u305f\u3081\u306e\u3082\u306e\u306a\u306e\u3067\u3001\u5143\u3005\u5b58\u5728\u3057\u3066\u3044\u308b\u5834\u5408\u306f\u524a\u9664\u3059\u308b\u306a\u308a\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8<\/strong>\u3059\u308b\u306a\u308a\u3057\u307e\u3057\u3087\u3046\u3002\uff08\u3053\u306e\u90e8\u5206\u3092\u66f8\u304d\u63db\u3048\u3066\u3044\u304f\u3068\u3044\u3046\u8a8d\u8b58\u3067OK\u3067\u3059\uff09<\/p>\n\n\n\n<div class=\"wp-block-sgb-accordion sgb-acc\"><input id=\"toggle-checkbox-1e912e81-5825-4c2d-9f45-7f8e9055e097\" class=\"sgb-acc__input\" type=\"checkbox\"><label class=\"sgb-acc__title\" for=\"toggle-checkbox-1e912e81-5825-4c2d-9f45-7f8e9055e097\" style=\"color:#333;background-color:#FFF\">\u629c\u7c8b\u5206\u3092\u5165\u308c\u308b\u5834\u5408<\/label><div class=\"sgb-acc__content sgb-acc__content--save\">\n<div class=\"wp-block-sgb-codebox pre_tag\"><span><i class=\"fa fa-code\"><\/i>kanren.php<\/span><pre class=\"js-sng-highlight\"><code>&lt;dd&gt;\n  &lt;p class=\"kanren-t\"&gt;\n    &lt;a href=\"&lt;?php the_permalink(); ?&gt;\"&gt;\n      &lt;?php the_title(); ?&gt; &lt;\/a&gt;\n  &lt;\/p&gt;\n  &lt;div class=\"smanone2\"&gt;\n    &lt;?php the_excerpt(); \/\/\u629c\u7c8b\u6587 ?&gt; &lt;\/div&gt;\n&lt;\/dd&gt;<\/code><\/pre><\/div>\n<\/div><\/div>\n\n\n\n<p>\u305d\u3057\u3066\u3001CSS\u5074\u306e\u3001\u95a2\u9023\u8a18\u4e8b\u306e\u90e8\u5206\u3082\u3044\u3058\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-sgb-accordion sgb-acc\"><input id=\"toggle-checkbox-f5aa262c-800c-4d60-be75-6e6574da0cbd\" class=\"sgb-acc__input\" type=\"checkbox\"><label class=\"sgb-acc__title\" for=\"toggle-checkbox-f5aa262c-800c-4d60-be75-6e6574da0cbd\" style=\"color:#333;background-color:#FFF\">\u95a2\u9023\u8a18\u4e8b\u306eCSS\u5909\u66f4<\/label><div class=\"sgb-acc__content sgb-acc__content--save\">\n<div class=\"wp-block-sgb-codebox pre_tag\"><span><i class=\"fa fa-code\"><\/i>CSS<\/span><pre class=\"js-sng-highlight\"><code>\/*-- \u95a2\u9023\u8a18\u4e8b\u30a8\u30ea\u30a2 --*\/\n.random {\n  padding: 0px;\n  margin: 0px;\n  text-align: center;\/*\u8a18\u4e8b\u30a8\u30ea\u30a2\u53ca\u3073\u30bf\u30a4\u30c8\u30eb\u3092\u4e2d\u592e\u63c3\u3048*\/\n}\n\n.random ul {\n  padding: 0px;\n  margin: 0px;\n  width: 250px;\n  display: inline-block;\/*\u6a2a\u4e26\u3073\u3067\u30d6\u30ed\u30c3\u30af\u914d\u7f6e*\/\n}\n\n.random li {\n  float: left;\n  position: relative;\n  list-style: none;\n}\n\n.kanren-title span {\/*\u8a18\u4e8b\u30bf\u30a4\u30c8\u30eb*\/\n  background: #fff;\/*\u80cc\u666f\u8272*\/\n  font-weight: bold;\/*\u6587\u5b57\u3092\u592a\u5b57\u306b*\/\n  color: #494949;\/*\u6587\u5b57\u8272*\/\n  font-size: 12px;\/*\u6587\u5b57\u30b5\u30a4\u30ba*\/\n  padding-top: 3px;\n  margin-top: -10px;\n  float: left;\n  text-align: left;\n  line-height: normal;\n  width: 230px;\/*\u30bf\u30a4\u30c8\u30eb\u30a8\u30ea\u30a2\u306e\u5e45*\/\n}\n\n.hp-title {\n  color: #a7a7a7;\n  margin-top: -5px;\n  float: left;\n}\n\n.random li img {\/*\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf*\/\n  width: 250px;\/*\u753b\u50cf\u5e45*\/\n  height: 140px;\/*\u753b\u50cf\u306e\u9ad8\u3055*\/\n}\n\n.random ul li:last-child {\n  margin-top: 10px;\n  margin-left: 10px;\n}<\/code><\/pre><\/div>\n<\/div><\/div>\n\n\n\n<p>\u4ee5\u4e0a\u306e\u30b3\u30fc\u30c9\u3092\u4f7f\u7528\u3059\u308c\u3070\u3001\u95a2\u9023\u8a18\u4e8b\u3092\u30b9\u30e9\u30a4\u30c0\u30fc\u5f62\u5f0f\u3067\u898b\u305b\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u306a\u304b\u306a\u304b\u5927\u5909\u3067\u3059\u30fb\u30fb\u30fb\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-6\">\u30b9\u30e9\u30a4\u30c0\u30fc\u306b\u516c\u544a\u3092\u631f\u3080\u5834\u5408<\/h2>\n\n\n\n<p>\u6700\u5f8c\u306b\u3001<strong>\u30b9\u30e9\u30a4\u30c0\u30fc\u306b\u5e83\u544a\u3092\u631f\u307f\u305f\u3044\uff01<\/strong>\u3068\u3044\u3046\u5834\u5408\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u3080\u3057\u308d\u3001\u30b9\u30e9\u30a4\u30c0\u30fc\u306b\u5e83\u544a\u3092\u631f\u3080\u305f\u3081\u306b\u304b\u306a\u308a\u6b8b\u5ff5\u306a\u30c7\u30b6\u30a4\u30f3\u306b\u3057\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>GoogleAdsense\u304b\u3089\u3001\u30a4\u30f3\u30d5\u30a3\u30fc\u30c9\u5e83\u544a\u3092\u65b0\u898f\u4f5c\u6210\u2192\u624b\u52d5\u3067\u516c\u544a\u30b9\u30bf\u30a4\u30eb\u3092\u4f5c\u6210\u3059\u308b\u2192\u4e0a\u90e8\u306e\u753b\u50cf\u3092\u9078\u629e\u3057\u3066\u3001\u7de8\u96c6\u753b\u9762\u306b\u3066\u30b3\u30f3\u30c6\u30ca\u306e\u5e45\u3092\u6700\u5c0f\u5024\u306e250px\u307e\u3067\u6291\u3048\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p>\u4ed6\u306f\u300c\u898b\u51fa\u3057\u2192\u77ed\u3044\u300d\u300c\u8aac\u660e\u2192\u8aac\u660e\u3092\u8868\u793a\u3057\u306a\u3044\u300d\u306b\u3057\u3066\u3001\u4ed6\u306f\u7d14\u7c8b\u306b\u597d\u307f\u3067\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-7\">\u540c\u69d8\u306b\u95a2\u9023\u8a18\u4e8b\u306e\u90e8\u5206\u3092\u66f8\u304d\u63db\u3048\u308b<\/h3>\n\n\n\n<p>\u516c\u544a\u3092\u631f\u307f\u305f\u3044\u5834\u5408\u3082\u540c\u3058\u3088\u3046\u306b\u3001kanren.php\u3092\u66f8\u304d\u63db\u3048\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u4ee5\u4e0b\u3092\u53c2\u8003\u306b\u9014\u4e2d\u306b\u5e83\u544a\u3092\u631f\u3081\u3070\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-sgb-accordion sgb-acc\"><input id=\"toggle-checkbox-257fdf9b-5deb-4e94-b25d-f934b20e476d\" class=\"sgb-acc__input\" type=\"checkbox\"><label class=\"sgb-acc__title\" for=\"toggle-checkbox-257fdf9b-5deb-4e94-b25d-f934b20e476d\" style=\"color:#333;background-color:#FFF\">\u95a2\u9023\u8a18\u4e8b\u306b\u5e83\u544a\u3092\u631f\u3080\u5834\u5408<\/label><div class=\"sgb-acc__content sgb-acc__content--save\">\n<div class=\"wp-block-sgb-codebox pre_tag\"><span><i class=\"fa fa-code\"><\/i>kanren.php<\/span><pre class=\"js-sng-highlight\"><code>&lt;div class=\"kanren\"&gt;\n  &lt;?php\n$kanrenpost_no = 5; \/\/\u8868\u793a\u3057\u305f\u3044\u8a18\u4e8b\u6570\n$categories = get_the_category( $post-&gt;ID );\n$category_ID = array();\nforeach ( $categories as $category ):\narray_push( $category_ID, $category-&gt;cat_ID );\nendforeach;\n$args = array(\n'post__not_in' =&gt; array( $post-&gt;ID ),\n'posts_per_page' =&gt; $kanrenpost_no,\n'category__in' =&gt; $category_ID,\n'orderby' =&gt; 'rand', \/\/\u30e9\u30f3\u30c0\u30e0\u8868\u793a\n);\n$st_query = new WP_Query( $args ); ?&gt;\n&lt;\/div&gt;\n&lt;div class=\"random\"&gt;\n  &lt;?php if ( $st_query-&gt;have_posts() ): ?&gt;\n  &lt;!--\u5e83\u544a\u8cbc\u308a\u4ed8\u3051--&gt;\n  &lt;?php\n$ads_infeed = '2'; \/\/\u4f55\u756a\u76ee\u306b\u8868\u793a\u3057\u305f\u3044\u304b\n$ads_infeed_count = '1';\n?&gt;\n    &lt;!--\u3053\u3053\u307e\u3067--&gt;\n    &lt;div class=\"mainvisual\"&gt;\n      &lt;div class=\"swiper-container\"&gt;\n        &lt;div class=\"swiper-wrapper\"&gt;\n          &lt;?php while ( $st_query-&gt;have_posts() ) : $st_query-&gt;the_post(); ?&gt;\n          &lt;!--\u5e83\u544a\u8cbc\u308a\u4ed8\u3051\u7d9a\u304d--&gt;\n          &lt;?php if($ads_infeed_count == $ads_infeed){ ?&gt;\n          &lt;div class=\"swiper-slide\"&gt;\n            &lt;article class=\"cardtype__article\"&gt; \u3053\u3053\u306b\u30a2\u30c9\u30bb\u30f3\u30b9\u306e\u5e83\u544a\u306e\u30b3\u30fc\u30c9\u3092\u633f\u5165 &amp;lt;\/article&amp;gt; &lt;\/div&gt;\n          &lt;?php\n}\n$ads_infeed_count++;\n?&gt;\n          &lt;!--\u5e83\u544a\u8cbc\u308a\u4ed8\u3051\u3053\u3053\u307e\u3067--&gt;\n          &lt;!-- \u5404\u30b9\u30e9\u30a4\u30c9\u5b9f\u88c5\u90e8\u5206 --&gt;\n          &lt;div class=\"swiper-slide\"&gt;\n            &lt;ul class=\"clearfix\"&gt;\n              &lt;?php if ( has_post_thumbnail() ): \/\/ \u30b5\u30e0\u30cd\u30a4\u30eb\u3092\u6301\u3063\u3066\u3044\u308b\u3068\u304d\u306e\u51e6\u7406 ?&gt;\n              &lt;a href=\"&lt;?php the_permalink() ?&gt;\"&gt;\n                &lt;?php the_post_thumbnail( 'medium' ); ?&gt; &lt;\/a&gt;\n              &lt;?php else: \/\/ \u30b5\u30e0\u30cd\u30a4\u30eb\u3092\u6301\u3063\u3066\u3044\u306a\u3044\u3068\u304d\u306e\u51e6\u7406 ?&gt; &lt;img src=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/no-img.png\" alt=\"no image\" title=\"no image\" width=\"100\" height=\"100\" \/&gt;\n              &lt;?php endif; ?&gt;\n              &lt;div class=\"kanren-title\"&gt;\n                &lt;li&gt;&lt;a href=\"&lt;?php the_permalink() ?&gt;\"&gt;\n&lt;span&gt;&lt;?php the_title(); ?&gt;&lt;div class=\"hp-title\"&gt;&lt;a class=\"hp-title\" style=\"text-decoration:none; font-size:10px\" href=\"\u3042\u306a\u305f\u306e\u30d6\u30ed\u30b0URL\"&gt;\u3042\u306a\u305f\u306e\u30d6\u30ed\u30b0\u540d\u306a\u3069&lt;\/a&gt;&lt;\/div&gt;\n              &lt;\/span&gt;\n              &lt;\/a&gt;\n              &lt;\/li&gt;\n          &lt;\/div&gt;\n          &lt;\/ul&gt;\n        &lt;\/div&gt;\n        &lt;?php endwhile; ?&gt; &lt;\/div&gt;\n      &lt;div class=\"swiper-pagination\"&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;?php else: ?&gt;\n&lt;p&gt;\u95a2\u9023\u8a18\u4e8b\u306f\u3042\u308a\u307e\u305b\u3093\u3067\u3057\u305f&lt;\/p&gt;\n&lt;?php endif; ?&gt;\n&lt;?php wp_reset_postdata(); ?&gt; &lt;\/div&gt;<\/code><\/pre><\/div>\n<\/div><\/div>\n\n\n\n<p>\u4e0a\u8a18\u306e\u30b3\u30fc\u30c9\u3067\u306f\u3001\u95a2\u9023\u8a18\u4e8b\u3068\u3057\u30665\u8a18\u4e8b\u304c\u8868\u793a\u3055\u308c\u30012\u8a18\u4e8b\u76ee\u304c\u5e83\u544a\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30b3\u30fc\u30c9\u4e2d\u306e\u6570\u5b57\u3092\u66f8\u304d\u63db\u3048\u308b\u3053\u3068\u3067\u81ea\u7531\u306b\u5909\u66f4\u53ef\u80fd\u3067\u3059\u306e\u3067\u3001\u3084\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-8\">WordPress\u3067\u30b9\u30e9\u30a4\u30c0\u30fc\/\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3092\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5\u307e\u3068\u3081<\/h2>\n\n\n\n<p>\u4eca\u56de\u306e\u8a18\u4e8b\u3067\u306f<\/p>\n\n\n\n<div class=\"wp-block-sgb-box sng-box box3\">\n<ul class=\"wp-block-list\">\n<li>Swiper\u3092\u4f7f\u7528\u3057\u3066\u30b9\u30e9\u30a4\u30c9\u3092\u4f5c\u308b\u65b9\u6cd5<\/li>\n\n\n\n<li>\u753b\u50cf\u3092\u7528\u3044\u3066\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3092\u4f5c\u308b\u65b9\u6cd5<\/li>\n\n\n\n<li>\u95a2\u9023\u8a18\u4e8b\u3092\u8868\u793a\u3055\u308c\u308b\u65b9\u6cd5<\/li>\n\n\n\n<li>\u305d\u3053\u306b\u5e83\u544a\u3092\u631f\u3080\u65b9\u6cd5<\/li>\n<\/ul>\n<\/div>\n\n\n\n<p>\u306b\u3064\u3044\u3066\u7d39\u4ecb\u3057\u307e\u3057\u305f\uff01\u30c6\u30fc\u30de\u306e\u7de8\u96c6\u306f\u81ea\u5df1\u8cac\u4efb\u3067\u3059\u306e\u3067\u3001\u6d88\u3048\u3066\u5143\u306b\u623b\u3089\u306a\u304f\u306a\u3063\u305f\uff01\u3068\u3044\u3046\u3053\u3068\u306b\u306a\u3089\u306a\u3044\u3088\u3046\u306b\u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u3092\u3068\u3063\u3066\u3084\u308a\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p>\u305d\u306e\u4ed6\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3092\u898b\u305f\u3044\u65b9\u306f\u4ee5\u4e0b\u306e\u8a18\u4e8b\u304b\u3089\u3069\u3046\u305e\u3002<\/p>\n\n\n<p><a class=\"card-link longcard-link\" href=\"https:\/\/maipyon.net\/design-summary\/\">\n\t\t<span class=\"longcard-img\"><img decoding=\"async\" src=\"https:\/\/maipyon.net\/wp-content\/uploads\/2019\/01\/f9fbba255642fee93d7aadab3fed1bea.png\" alt=\"\u3010\u30b3\u30d4\u30da\u3067OK\u3011WordPress\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u96c615\u9078\u3010\u307b\u307c\u5fc5\u9808\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3042\u308a\u3011\"><\/span>\n\t\t<span class=\"blogcard-content blogcard-text\">\n\t\t\t<span class=\"blogcard-title\">\u3010\u30b3\u30d4\u30da\u3067OK\u3011WordPress\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u96c615\u9078\u3010\u307b\u307c\u5fc5\u9808\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3042\u308a\u3011<\/span>\n\t\t\t<span class=\"blog-card-excerpt-long\">\u4eca\u307e\u3067\u306b\u3084\u3063\u3066\u304d\u305f\u30d6\u30ed\u30b0\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3092\u307e\u3068\u3081\u305f\u8a18\u4e8b\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u5fc5\u9808\u30ec\u30d9\u30eb\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3082\u7d39\u4ecb\u3002\u7dba\u9e97\u306a\u30d6\u30ed\u30b0\u306b\u8fd1\u3065\u3051\u305f\u3044\u4eba\u306b\u5411\u3051\u3066\u3001\u30b3\u30d4\u30da\u3067\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u308b\u3088\u3046\u306a\u3082\u306e\u3092\u96c6\u3081\u307e\u3057\u305f\u3002<\/span>\n\t\t<\/span>\n\t\t<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u3093\u306a\u60a9\u307f\u306b\u7b54\u3048\u308b\u8a18\u4e8b\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002 \u4eca\u56de\u306f\u3001\u30b3\u30d4\u30da\u3060\u3051\u3067\u30b9\u30e9\u30a4\u30c0\u30fc\u30fb\u304a\u3088\u3073\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3092WordPress\u5185\u306b\u4f5c\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002 Swiper\u3068\u3044\u3046\u3082\u306e\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u306f\u4f7f\u3063\u3066\u3044\u307e\u305b\u3093\uff01 \u30d7\u30e9\u30b0\u30a4\u30f3 &#8230; <\/p>\n","protected":false},"author":1,"featured_media":5221,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pochipp_cv_data":"","footnotes":""},"categories":[19],"tags":[],"class_list":{"0":"post-354","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-blog-customize","8":"entry"},"_links":{"self":[{"href":"https:\/\/maipyon.net\/wp-json\/wp\/v2\/posts\/354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maipyon.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maipyon.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maipyon.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maipyon.net\/wp-json\/wp\/v2\/comments?post=354"}],"version-history":[{"count":6,"href":"https:\/\/maipyon.net\/wp-json\/wp\/v2\/posts\/354\/revisions"}],"predecessor-version":[{"id":7351,"href":"https:\/\/maipyon.net\/wp-json\/wp\/v2\/posts\/354\/revisions\/7351"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/maipyon.net\/wp-json\/wp\/v2\/media\/5221"}],"wp:attachment":[{"href":"https:\/\/maipyon.net\/wp-json\/wp\/v2\/media?parent=354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maipyon.net\/wp-json\/wp\/v2\/categories?post=354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maipyon.net\/wp-json\/wp\/v2\/tags?post=354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}