![\"\u65b0\u7740\u8a18\u4e8b\u3092\u8aad\u307f\u8fbc\u3080\u3088\u3046\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u305f\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\u306e\u8868\u793a\u4f8b\u3002\"](\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2024-05-23_19h32_44-1-812x369.png\")
<\/figure>\n\n\n\n1.5\u679a\u8868\u793a\u3057\u305f\u5fdc\u7528\u4f8b<\/p>\n\n\n\n \u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\u7528\u65b0\u7740\u8a18\u4e8b\u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u30e1\u30ea\u30c3\u30c8\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n \u305d\u308c\u3067\u306f\u65e9\u901f\u3001\u3053\u306e\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\u7528\u65b0\u7740\u8a18\u4e8b\u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n \u57fa\u672c\u7684\u306b\u306ffunctions.php\u3067\u30b3\u30fc\u30c9\u3092\u8a2d\u5b9a\u3057\u3066\u3001\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u3067\u914d\u7f6e\u3059\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n\n\n\n SWELL\u306e\u753b\u50cf\u30fb\u30b9\u30e9\u30a4\u30c0\u30fc\u7528\u8cc7\u7523\u3092\u8aad\u307f\u8fbc\u307f\u3001\u753b\u50cf\u9818\u57df\u306e\u9ad8\u3055270px\u3001\u30dc\u30bf\u30f3\u306e\u5927\u304d\u3055\u3068\u30d5\u30a9\u30fc\u30ab\u30b9\u67a0\u306f\u63b2\u8f09\u30b3\u30fc\u30c9\u306eCSS\u3067\u88dc\u3044\u307e\u3059\u3002\u753b\u50cf\u306fobject-fit:cover\u3067\u4e2d\u592e\u3092\u5207\u308a\u51fa\u3057\u307e\u3059\u3002<\/p>\n\n\n\n \u307e\u305f\u3053\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306f\u30b3\u30fc\u30c9\u5316\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u3055\u3089\u306b\u597d\u304d\u306a\u6761\u4ef6\u3067\u8868\u793a\u3067\u304d\u308b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u6027\u3082\u3042\u308b\u306e\u3067\u4fbf\u5229\u3067\u3059\u3002<\/p>\n\n\n\n \u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3092\u958b\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n \u30c8\u30c3\u30d7\u30da\u30fc\u30b8 > \u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\u3092\u8868\u793a\u3057\u306a\u3044<\/strong>\u306b\u30c1\u30a7\u30c3\u30af\u3092\u5165\u308c\u307e\u3059\u3002<\/p>\n\n\n\n \u624b\u52d5\u3067\u8a2d\u5b9a\u3059\u308b\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\u306f\u4f7f\u3044\u307e\u305b\u3093<\/p>\n\n\n\n \u30c8\u30c3\u30d7\u30da\u30fc\u30b8 > \u305d\u306e\u4ed6\u304b\u3089\u30b3\u30f3\u30c6\u30f3\u30c4\u4e0a\u306e\u4f59\u767d\u91cf\u3092\u306a\u3057<\/strong>\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n \u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf\u3092\u8868\u793a\u3057\u307e\u3059\u304c\u3001\u8a2d\u5b9a\u304c\u306a\u3044\u5834\u5408\u3092\u8003\u616e\u3057\u3066NO IMAGE\u753b\u50cf\u3092\u8a2d\u7f6e\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n \u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u7528\u306e\u8a18\u4e8b\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n \u30d5\u30eb\u30ef\u30a4\u30c9\u306e\u30d6\u30ed\u30c3\u30af<\/strong>\u3092\u8a2d\u7f6e\u3057\u3066\u30d5\u30eb\u30ef\u30a4\u30c9<\/strong>\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n \u4e0a\u4e0b\u306e\u4f59\u767d\u91cf\u30820<\/strong>\u306b\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n \u3053\u308c\u3067\u3042\u3068\u3067\u8a2d\u7f6e\u3059\u308b\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\u30b9\u30e9\u30a4\u30c0\u30fc\u304c\u753b\u9762\u3044\u3063\u3071\u3044\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n \u6700\u5f8c\u306b\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u3092\u8a2d\u7f6e<\/strong>\u3057\u307e\u3059\u3002<\/p>\n\n\n\n \u3053\u308c\u3092\u8868\u793a\u3059\u308b\u30b3\u30fc\u30c9\u306f\u5f8c\u8ff0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n \u6700\u5f8c\u306b\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\u7528\u65b0\u7740\u8a18\u4e8b\u30b9\u30e9\u30a4\u30c0\u30fc\u3092functions.php\u306b\u8a2d\u7f6e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n \u6700\u521d\u306b\u500b\u3005\u306e\u89e3\u8aac\u3092\u5165\u308c\u307e\u3059\u304c\u3001\u6700\u5f8c\u306b\u307e\u3068\u3081\u305f\u30b3\u30fc\u30c9\u3082\u7d39\u4ecb\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n \u307e\u305a\u306f\u4ee5\u4e0b\u3092functions.php\u306b\u8a18\u8ff0<\/p>\n\n\n\n Swiper\u3068\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\u306eCSS\u3068\u3044\u3063\u305f\u5fc5\u8981\u306a\u30b3\u30fc\u30c9\u306e\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<\/p>\n\n\n\n Swpier\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u3059\u3002<\/p>\n\n\n\n \u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\u3067\u3082\u8a2d\u5b9a\u3057\u3066\u3044\u308b\u5185\u5bb9\u3092\u518d\u5b9a\u7fa9\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n \u3053\u3053\u3089\u3078\u3093\u306f\u57fa\u672cSwiper\u306e\u8a2d\u5b9a\u3069\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n \u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u306fSWELL\u306e\u30b3\u30fc\u30c9\u8868\u8a18\u306b\u306a\u3089\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n \u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf\u304c\u306a\u3044\u6642\u306fno image\u304b\u3089\u53c2\u7167\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n \u3053\u3061\u3089\u3092\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9 \u3082\u3057\u3055\u3089\u306b\u898b\u305f\u76ee\u3092\u5909\u3048\u305f\u3068\u304d\u306f\u3001SWELL\u306e\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\u3092\u898b\u6bd4\u3079\u306a\u304c\u3089\u5909\u66f4\u3059\u308b\u304b\u3001CSS\u3092\u66f8\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n \u6700\u5f8c\u306b\u307e\u3068\u3081\u305f\u30b3\u30fc\u30c9\u3092\u6d88\u5316\u3057\u307e\u3059\u3002<\/p>\n\n\n\n \u3053\u308c\u3092functions.php\u306b\u30b3\u30d4\u30da\u3059\u308c\u3070OK\u3067\u3059\u3002<\/p>\n\n\n\n \u4ee5\u4e0a\u3067\u3059\u3002<\/p>\n\n\n\n \u6700\u5f8c\u306b\u78ba\u8a8d\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n \u3061\u3083\u3093\u3068\u6700\u65b0\u8a18\u4e8b\u304c5\u3064\u8868\u793a\u3055\u308c\u3066\u3001\u30b9\u30e9\u30a4\u30c9\u3057\u3066\u3044\u308c\u3070OK\u3067\u3059\u3002<\/p>\n\n\n\n \u3044\u308d\u3044\u308d\u88dc\u8db3\u3067\u3059\u3002<\/p>\n\n\n\n \u30b5\u30a4\u30c8\u306b\u3088\u3063\u3066\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf\u306e\u30b5\u30a4\u30ba\u7b49\u9055\u3046\u306e\u3067\u3001\u8abf\u6574\u304c\u5fc5\u8981\u306a\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n CSS\u304c\u5206\u304b\u308b\u4eba\u306f\u8abf\u6574\u3002<\/p>\n\n\n\n \u308f\u304b\u3089\u306a\u3044\u4eba\u306f\u3054\u4f9d\u983c\u304f\u3060\u3055\u3044\uff08\u6709\u511f\u3067\u3059\uff09<\/p>\n\n\n\n \u6a19\u6e96\u306ecover\u306f\u753b\u50cf\u9818\u57df\u3092\u57cb\u3081\u308b\u305f\u3081\u3001\u7e26\u6a2a\u6bd4\u304c\u9055\u3046\u753b\u50cf\u306e\u7aef\u3092\u5207\u308a\u51fa\u3057\u307e\u3059\u3002<\/p>\n\n\n\n \u753b\u50cf\u5168\u4f53\u3092\u8868\u793a\u3057\u305f\u3044\u5834\u5408\u306f\u3001\u4e0a\u306eCSS\u3092\u8ffd\u52a0CSS\u304b\u5b50\u30c6\u30fc\u30de\u306estyle.css\u3078\u4fdd\u5b58\u3057\u307e\u3059\u3002<\/p>\n contain\u3067\u306f\u7e26\u6a2a\u6bd4\u306b\u3088\u3063\u3066\u4f59\u767d\u304c\u751f\u3058\u3001\u753b\u50cf\u9818\u57df\u306e\u9ad8\u3055\u306f270px\u306e\u307e\u307e\u3067\u3059\u3002<\/p>\n SWELL\u306e\u753b\u50cf\u62e1\u5927\u7528\u30af\u30e9\u30b9\u3092\u8a2d\u7f6e\u7528HTML\u304b\u3089\u5916\u3057\u3001\u8ffd\u52a0CSS\u3067\u3082\u753b\u50cf\u30ec\u30a4\u30e4\u30fc\u306e\u62e1\u5927\u3068\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u6b62\u3081\u3066\u3044\u307e\u3059\u3002<\/p>\n\n \u753b\u50cf\u30ec\u30a4\u30e4\u30fc\u306e\u30af\u30e9\u30b9\u307e\u3067\u6307\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u5f8c\u304b\u3089\u51fa\u529b\u3055\u308c\u308b\u63b2\u8f09PHP\u306e\u6a19\u6e96CSS\u3088\u308a\u512a\u5148\u3055\u305b\u307e\u3059\u3002<\/p>\n\n PC\u3067\u96a3\u306e\u8a18\u4e8b\u3092\u534a\u5206\u898b\u305b\u308b\u5834\u5408\u306f\u3001\u65e2\u5b58\u306emotoki_mv_animation\u95a2\u6570\u5185\u306e\u8a2d\u5b9a\u914d\u5217\u3092\u6b21\u306b\u7f6e\u304d\u63db\u3048\u307e\u3059\u3002<\/p>\n \u3053\u308c\u306fPHP\u306e\u7f6e\u63db\u90e8\u5206\u3067\u3001\u8ffd\u52a0JavaScript\u3068\u3057\u3066\u5225\u306b\u767b\u9332\u3059\u308b\u30b3\u30fc\u30c9\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n mvSlideNum\u30921.5\u3001mvSlideNumSp\u30921\u306b\u3059\u308b\u3068\u3001\u63b2\u8f09JavaScript\u304c960px\u4ee5\u4e0a\u3067\u306f1.5\u679a\u3001960px\u672a\u6e80\u3067\u306f1\u679a\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n \u57fa\u672c\u7684\u306aSwiper\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc<\/p>\n\n\n\n SWELL\u6a19\u6e96\u30b9\u30e9\u30a4\u30c0\u30fc\u3068\u306e\u7af6\u5408\u3092\u907f\u3051\u3001\u3053\u306e\u4f8b\u306e#waza-latest-posts\u3060\u3051\u3092\u521d\u671f\u5316\u3057\u307e\u3059\u3002<\/p>\n\n\n\n \u4eca\u56de\u30aa\u30a6\u30f3\u30c9\u30e1\u30c7\u30a3\u30a2\u7528\u306e\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\u306e\u81ea\u52d5\u5316\u3068\u3057\u3066\u81ea\u4f5c\u3057\u3066\u307f\u307e\u3057\u305f\u304c\u3001<\/p>\n\n\n\n \u3044\u308d\u3044\u308d\u3068\u3055\u3089\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306e\u4f59\u5730\u3082\u3042\u308a\u3001\u975e\u5e38\u306b\u4fbf\u5229\u3067\u3059\u3002<\/p>\n\n\n\n \u662f\u975e\u3001\u6d3b\u7528\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n \u3053\u306e\u8a18\u4e8b\u3067\u7d39\u4ecb\u3057\u3066\u3044\u308b\u30b3\u30fc\u30c9\u306f\u3001GitHub\u306eMOTOKI-LLC\/WAZA-code<\/a>\u306b\u3082\u307e\u3068\u3081\u3066\u3044\u307e\u3059\u3002<\/p>\n\n \u6b21\u306f\u516c\u958b\u8a18\u4e8b3\u4ef6\u306eHTML\u3092\u56fa\u5b9a\u3057\u305f\u8868\u793a\u7528\u306e\u898b\u672c\u3067\u3059\u3002\u63b2\u8f09\u30b3\u30fc\u30c9\u3068\u540c\u3058\u521d\u671f\u5316\u51e6\u7406\u3092\u4f7f\u3044\u3001PC\u30fb\u30b9\u30de\u30db\u3068\u30821\u679a\u8868\u793a\u3001\u30eb\u30fc\u30d7\u3068\u81ea\u52d5\u518d\u751f\u306f\u7121\u52b9\u3067\u3059\u3002\u524d\u5f8c\u30dc\u30bf\u30f3\u306fbutton\u8981\u7d20\u306a\u306e\u3067\u3001Tab\u3067\u9078\u3073Enter\u3084Space\u3067\u64cd\u4f5c\u3067\u304d\u307e\u3059\u3002\u6700\u521d\u3067\u306f\u524d\u3078\u3001\u6700\u5f8c\u3067\u306f\u6b21\u3078\u30dc\u30bf\u30f3\u304c\u7121\u52b9\u306b\u306a\u308a\u307e\u3059\u3002PHP\u306e\u65b0\u7740\u8a18\u4e8b\u53d6\u5f97\u306f\u3053\u306e\u56fa\u5b9a\u898b\u672c\u306b\u306f\u542b\u3081\u307e\u305b\u3093\u3002<\/p>![\"\u30b9\u30e9\u30a4\u30c0\u30fc\u3067\u65b0\u7740\u8a18\u4e8b\u30921.5\u679a\u8868\u793a\u3057\u305f\u5fdc\u7528\u4f8b\u3002\"](\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2024-05-23_21h25_54-812x261.png\")
<\/figure>\n\n\n\n\n
\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\u7528\u65b0\u7740\u8a18\u4e8b\u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/h2>\n\n\n\n
SWELL\u306e\u4e8b\u524d\u8a2d\u5b9a<\/h3>\n\n\n\n
\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u8a2d\u5b9a<\/h4>\n\n\n\n
![\"\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\u3092\u8868\u793a\u3057\u306a\u3044\u3088\u3046\u306b\u30c1\u30a7\u30c3\u30af\u3092\u5165\u308c\u308b\u8a2d\u5b9a\u753b\u9762\u3002\"](\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2024-05-23_17h22_36.png\")
<\/figure>\n\n\n\n\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\u4e0b\u306e\u4f59\u767d\u8a2d\u5b9a<\/h4>\n\n\n\n
![\"\u30b3\u30f3\u30c6\u30f3\u30c4\u4e0a\u306e\u4f59\u767d\u91cf\u3092\u306a\u3057\u306b\u3059\u308b\u8a2d\u5b9a\u753b\u9762\u3002\"](\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2024-05-23_18h29_42.png\")
<\/figure>\n\n\n\n\u30b5\u30a4\u30c8\u5168\u4f53\u8a2d\u5b9a\u306eNO IMAGE\u753b\u50cf<\/h4>\n\n\n\n
![\"\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf\u304c\u306a\u3044\u5834\u5408\u306b\u5099\u3048\u3066\u30ce\u30fc\u30a4\u30e1\u30fc\u30b8\u753b\u50cf\u3092\u8a2d\u5b9a\u3059\u308b\u753b\u9762\u3002\"](\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2024-05-23_19h42_57.png\")
<\/figure>\n\n\n\n\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u7528\u306e\u56fa\u5b9a\u8a18\u4e8b\u306e\u8a2d\u5b9a<\/h3>\n\n\n\n
\u30d5\u30eb\u30ef\u30a4\u30c9\u30d6\u30ed\u30c3\u30af\u306e\u8a2d\u7f6e<\/h4>\n\n\n\n
\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u306e\u8a2d\u7f6e<\/h4>\n\n\n\n
[latest_posts_slider]<\/code><\/pre><\/div>\n\n\n\n![\"\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u3092\u5165\u529b\u3057\u305f\u56fa\u5b9a\u8a18\u4e8b\u306e\u7de8\u96c6\u753b\u9762\u3002\"](\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2024-05-23_18h29_24-812x224.png\")
<\/figure>\n\n\n\nSwiper\u307e\u308f\u308a\u306e\u30b3\u30fc\u30c9\u306e\u8aad\u307f\u8fbc\u307f<\/h3>\n\n\n\n
Swiper\u3068\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\u306b\u5fc5\u8981\u306a\u30b3\u30fc\u30c9\u306e\u8aad\u307f\u8fbc\u307f<\/h3>\n\n\n\n
function motoki_swiper() {\n wp_enqueue_script('swell_swiper');\n wp_enqueue_style('swell_swiper');\n wp_enqueue_style('swell-main-visual-slider', get_template_directory_uri() . '\/build\/css\/modules\/parts\/main-visual--slider.css', array(), '2.10.0');\n}\nadd_action('wp_enqueue_scripts', 'motoki_swiper');<\/code><\/pre><\/div>\n\n\n\nSwiper\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306eJS\u3092\u8a2d\u7f6e<\/h3>\n\n\n\n
function motoki_mv_animation() {\n \/\/ SwellVars\u306eJavaScript\u5909\u6570\u3092\u5b9a\u7fa9\n $swell_vars = array(\n 'mvSlideEffect' => 'slide',\n 'mvSlideSpeed' => 1500,\n 'mvSlideDelay' => 5000,\n 'mvSlideNum' => 1,\n 'mvSlideNumSp' => 1\n );\n\n echo '<script type="text\/javascript">';\n echo 'var wazaLatestVars = ' . json_encode($swell_vars) . ';';\n echo <<< EOM\nfunction wazaInitLatestPosts() {\n var root = document.querySelector('#waza-latest-posts .swiper');\n if (!root || root.swiper || typeof Swiper === 'undefined' || root.querySelectorAll('.swiper-slide').length < 2) return;\n var swiper = new Swiper(root, {\n loop: false,\n autoplay: false,\n speed: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : wazaLatestVars.mvSlideSpeed,\n effect: wazaLatestVars.mvSlideEffect,\n\t\tcenteredSlides: true,\n slidesPerView: wazaLatestVars.mvSlideNumSp,\n breakpoints: {\n 960: {\n\t\t\t\tspaceBetween: 20,\n slidesPerView: wazaLatestVars.mvSlideNum\n }\n },\n navigation: {\n nextEl: root.querySelector('.swiper-button-next'),\n prevEl: root.querySelector('.swiper-button-prev'),\n },\n a11y: {prevSlideMessage: "\u524d\u306e\u8a18\u4e8b\u3078", nextSlideMessage: "\u6b21\u306e\u8a18\u4e8b\u3078"},\n pagination: {\n el: root.querySelector('.swiper-pagination'),\n clickable: true,\n },\n });\n root.addEventListener('focusin', function (event) {\n var slide = event.target.closest('.swiper-slide');\n if (!slide || !root.contains(slide)) return;\n swiper.slideTo(Array.from(root.querySelectorAll('.swiper-slide')).indexOf(slide), 0);\n });\n}\nif (document.readyState === "loading") document.addEventListener("DOMContentLoaded", wazaInitLatestPosts, {once:true});\nelse wazaInitLatestPosts();\n<\/script>\n<style>#waza-latest-posts .swiper,#waza-latest-posts .swiper-wrapper {height:auto;}\n#waza-latest-posts .swiper-slide {height:auto;min-height:270px;position:relative;}\n#waza-latest-posts .p-mainVisual__imgLayer {position:relative;inset:auto;height:auto;display:block;}\n#waza-latest-posts .p-mainVisual__img {display:block;width:100%;height:270px;object-fit:cover;}\n#waza-latest-posts .swiper-button-prev,#waza-latest-posts .swiper-button-next {width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#24507a;cursor:pointer;}\n#waza-latest-posts button:focus-visible,#waza-latest-posts a:focus-visible {outline:3px solid #24507a;outline-offset:3px;}\n#waza-latest-posts .swiper-button-disabled {opacity:.35;cursor:default;}\n#waza-latest-posts .p-mainVisual__slideTitle {display:block!important;background:rgba(255,255,255,.92);padding:.5em;max-width:calc(100% - 100px);font-size:clamp(16px,2vw,24px);line-height:1.5;color:#24507a;}\n<\/style>\nEOM;\n}\nadd_action('wp_footer', 'motoki_mv_animation', 100);<\/code><\/pre><\/div>\n\n\n\n\u53d6\u5f97\u3059\u308b\u8a18\u4e8b\u60c5\u5831\u306e\u30c7\u30fc\u30bf<\/h3>\n\n\n\n
'numberposts' => 5,<\/code>\u304b\u3089\u6700\u65b0\u8a18\u4e8b5\u8a18\u4e8b\u3092\u53d6\u5f97\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u307e\u3059\u3002<\/p>\n\n\n\nfunction get_latest_posts_data() {\n $args = array(\n 'numberposts' => 5,\n 'post_status' => 'publish',\n );\n $recent_posts = wp_get_recent_posts($args);\n $posts_data = array();\n \n foreach ($recent_posts as $post) {\n $thumbnail_url = get_the_post_thumbnail_url( $post['ID'], 'full' );\n if ( ! $thumbnail_url ) {\n $thumbnail_url = SWELL_Theme::get_noimg( 'url' );\n }\n $thumbnail_url = esc_url( $thumbnail_url );\n \n $post_data = array(\n 'title' => $post['post_title'],\n 'date' => get_the_date('Y-m-d', $post['ID']),\n 'url' => get_permalink($post['ID']),\n 'image_url' => $thumbnail_url,\n );\n array_push($posts_data, $post_data);\n }\n \n return $posts_data;\n}<\/code><\/pre><\/div>\n\n\n\n\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\u7528\u65b0\u7740\u8a18\u4e8b\u30b9\u30e9\u30a4\u30c0\u30fc\u306eHTML<\/h3>\n\n\n\n
[latest_posts_slider]<\/code>\u3067\u8868\u793a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\nfunction display_latest_posts_slider() {\n $posts_data = get_latest_posts_data();\n if (!$posts_data) return '<p>\u516c\u958b\u6e08\u307f\u306e\u8a18\u4e8b\u304c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>';\n ob_start();\n ?>\n <div id="waza-latest-posts" class="p-mainVisual -type-slider -height-img">\n <div class="p-mainVisual__inner swiper">\n <div class="swiper-wrapper">\n <?php foreach ($posts_data as $index => $post) : ?>\n <div class="p-mainVisual__slide swiper-slide c-filterLayer -nofilter" role="group" aria-label="<?php echo ($index + 1); ?> \/ <?php echo count($posts_data); ?>" data-swiper-slide-index="<?php echo $index; ?>">\n <picture class="p-mainVisual__imgLayer c-filterLayer__img">\n <?php if ( $post['image_url'] ) : ?>\n <img width="1920" height="774" src="<?php echo esc_url($post['image_url']); ?>" alt="<?php echo esc_attr($post['title']); ?>" class="p-mainVisual__img" sizes="(max-width: 1920px) 100vw, 1920px" decoding="async">\n <?php else : ?>\n <span aria-hidden="true" style="display:block;min-height:260px;background:#eee;"><\/span>\n <?php endif; ?>\n <\/picture>\n <div class="p-mainVisual__textLayer l-parent l-container u-ta-l" style="color:#000000;text-shadow:1px 1px 0px rgba(255, 255, 255, 0.2 );">\n <div class="p-mainVisual__slideTitle"><?php echo esc_html($post['title']); ?><\/div>\n <div class="p-mainVisual__slideText"><?php echo esc_html($post['date']); ?><\/div>\n <a href="<?php echo esc_url($post['url']); ?>" class="p-mainVisual__slideLink" aria-label="<?php echo esc_attr($post['title']); ?>"><\/a>\n <\/div>\n <\/div>\n <?php endforeach; ?>\n <\/div>\n <?php if (count($posts_data) > 1) : ?>\n <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"><\/div>\n <button type="button" class="swiper-button-prev" aria-label="\u524d\u306e\u8a18\u4e8b\u3078"><\/button>\n <button type="button" class="swiper-button-next" aria-label="\u6b21\u306e\u8a18\u4e8b\u3078"><\/button>\n <?php endif; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}\n\nadd_shortcode('latest_posts_slider', 'display_latest_posts_slider');\n<\/code><\/pre><\/div>\n\n\n\n\u5168functions.php\u307e\u3068\u3081<\/h3>\n\n\n\n
function motoki_swiper() {\n wp_enqueue_script('swell_swiper');\n wp_enqueue_style('swell_swiper');\n wp_enqueue_style('swell-main-visual-slider', get_template_directory_uri() . '\/build\/css\/modules\/parts\/main-visual--slider.css', array(), '2.10.0');\n}\nadd_action('wp_enqueue_scripts', 'motoki_swiper');\n\nfunction motoki_mv_animation() {\n \/\/ SwellVars\u306eJavaScript\u5909\u6570\u3092\u5b9a\u7fa9\n $swell_vars = array(\n 'mvSlideEffect' => 'slide',\n 'mvSlideSpeed' => 1500,\n 'mvSlideDelay' => 5000,\n 'mvSlideNum' => 1,\n 'mvSlideNumSp' => 1\n );\n\n echo '<script type="text\/javascript">';\n echo 'var wazaLatestVars = ' . json_encode($swell_vars) . ';';\n echo <<< EOM\nfunction wazaInitLatestPosts() {\n var root = document.querySelector('#waza-latest-posts .swiper');\n if (!root || root.swiper || typeof Swiper === 'undefined' || root.querySelectorAll('.swiper-slide').length < 2) return;\n var swiper = new Swiper(root, {\n loop: false,\n autoplay: false,\n speed: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : wazaLatestVars.mvSlideSpeed,\n effect: wazaLatestVars.mvSlideEffect,\n\t\tcenteredSlides: true,\n slidesPerView: wazaLatestVars.mvSlideNumSp,\n breakpoints: {\n 960: {\n\t\t\t\tspaceBetween: 20,\n slidesPerView: wazaLatestVars.mvSlideNum\n }\n },\n navigation: {\n nextEl: root.querySelector('.swiper-button-next'),\n prevEl: root.querySelector('.swiper-button-prev'),\n },\n a11y: {prevSlideMessage: "\u524d\u306e\u8a18\u4e8b\u3078", nextSlideMessage: "\u6b21\u306e\u8a18\u4e8b\u3078"},\n pagination: {\n el: root.querySelector('.swiper-pagination'),\n clickable: true,\n },\n });\n root.addEventListener('focusin', function (event) {\n var slide = event.target.closest('.swiper-slide');\n if (!slide || !root.contains(slide)) return;\n swiper.slideTo(Array.from(root.querySelectorAll('.swiper-slide')).indexOf(slide), 0);\n });\n}\nif (document.readyState === "loading") document.addEventListener("DOMContentLoaded", wazaInitLatestPosts, {once:true});\nelse wazaInitLatestPosts();\n<\/script>\n<style>#waza-latest-posts .swiper,#waza-latest-posts .swiper-wrapper {height:auto;}\n#waza-latest-posts .swiper-slide {height:auto;min-height:270px;position:relative;}\n#waza-latest-posts .p-mainVisual__imgLayer {position:relative;inset:auto;height:auto;display:block;}\n#waza-latest-posts .p-mainVisual__img {display:block;width:100%;height:270px;object-fit:cover;}\n#waza-latest-posts .swiper-button-prev,#waza-latest-posts .swiper-button-next {width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#24507a;cursor:pointer;}\n#waza-latest-posts button:focus-visible,#waza-latest-posts a:focus-visible {outline:3px solid #24507a;outline-offset:3px;}\n#waza-latest-posts .swiper-button-disabled {opacity:.35;cursor:default;}\n#waza-latest-posts .p-mainVisual__slideTitle {display:block!important;background:rgba(255,255,255,.92);padding:.5em;max-width:calc(100% - 100px);font-size:clamp(16px,2vw,24px);line-height:1.5;color:#24507a;}\n<\/style>\nEOM;\n}\nadd_action('wp_footer', 'motoki_mv_animation', 100);\n\nfunction get_latest_posts_data() {\n $args = array(\n 'numberposts' => 5,\n 'post_status' => 'publish',\n );\n $recent_posts = wp_get_recent_posts($args);\n $posts_data = array();\n \n foreach ($recent_posts as $post) {\n $thumbnail_url = get_the_post_thumbnail_url( $post['ID'], 'full' );\n if ( ! $thumbnail_url ) {\n $thumbnail_url = SWELL_Theme::get_noimg( 'url' );\n }\n $thumbnail_url = esc_url( $thumbnail_url );\n \n $post_data = array(\n 'title' => $post['post_title'],\n 'date' => get_the_date('Y-m-d', $post['ID']),\n 'url' => get_permalink($post['ID']),\n 'image_url' => $thumbnail_url,\n );\n array_push($posts_data, $post_data);\n }\n \n return $posts_data;\n}\n\nfunction display_latest_posts_slider() {\n $posts_data = get_latest_posts_data();\n if (!$posts_data) return '<p>\u516c\u958b\u6e08\u307f\u306e\u8a18\u4e8b\u304c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>';\n ob_start();\n ?>\n <div id="waza-latest-posts" class="p-mainVisual -type-slider -height-img">\n <div class="p-mainVisual__inner swiper">\n <div class="swiper-wrapper">\n <?php foreach ($posts_data as $index => $post) : ?>\n <div class="p-mainVisual__slide swiper-slide c-filterLayer -nofilter" role="group" aria-label="<?php echo ($index + 1); ?> \/ <?php echo count($posts_data); ?>" data-swiper-slide-index="<?php echo $index; ?>">\n <picture class="p-mainVisual__imgLayer c-filterLayer__img">\n <?php if ( $post['image_url'] ) : ?>\n <img width="1920" height="774" src="<?php echo esc_url($post['image_url']); ?>" alt="<?php echo esc_attr($post['title']); ?>" class="p-mainVisual__img" sizes="(max-width: 1920px) 100vw, 1920px" decoding="async">\n <?php else : ?>\n <span aria-hidden="true" style="display:block;min-height:260px;background:#eee;"><\/span>\n <?php endif; ?>\n <\/picture>\n <div class="p-mainVisual__textLayer l-parent l-container u-ta-l" style="color:#000000;text-shadow:1px 1px 0px rgba(255, 255, 255, 0.2 );">\n <div class="p-mainVisual__slideTitle"><?php echo esc_html($post['title']); ?><\/div>\n <div class="p-mainVisual__slideText"><?php echo esc_html($post['date']); ?><\/div>\n <a href="<?php echo esc_url($post['url']); ?>" class="p-mainVisual__slideLink" aria-label="<?php echo esc_attr($post['title']); ?>"><\/a>\n <\/div>\n <\/div>\n <?php endforeach; ?>\n <\/div>\n <?php if (count($posts_data) > 1) : ?>\n <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"><\/div>\n <button type="button" class="swiper-button-prev" aria-label="\u524d\u306e\u8a18\u4e8b\u3078"><\/button>\n <button type="button" class="swiper-button-next" aria-label="\u6b21\u306e\u8a18\u4e8b\u3078"><\/button>\n <?php endif; ?>\n <\/div>\n <\/div>\n <?php\n return ob_get_clean();\n}\n\nadd_shortcode('latest_posts_slider', 'display_latest_posts_slider');\n<\/code><\/pre><\/div>\n\n\n\n<\/figure>\n\n\n\n\u88dc\u8db3<\/h2>\n\n\n\n
\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf\u306e\u30b5\u30a4\u30ba\u304c\u6b63\u65b9\u5f62\u306b\u8fd1\u3044\u5834\u5408<\/h3>\n\n\n\n
#waza-latest-posts .p-mainVisual__imgLayer {\n transform: none;\n animation: none;\n}\n\n#waza-latest-posts .p-mainVisual__imgLayer .p-mainVisual__img {\n width: 100%;\n height: 270px;\n object-fit: contain;\n}<\/code><\/pre><\/div>\n\n\n\u30b9\u30e9\u30a4\u30c9\u30921.5\u679a\u8868\u793a\u3059\u308b<\/h3>\n\n\n\n
<\/figure>\n\n\n\n \/\/ \u3053\u306e\u30b9\u30e9\u30a4\u30c0\u30fc\u7528\u306e\u8a2d\u5b9a\u3092\u5909\u66f4\n $swell_vars = array(\n 'mvSlideEffect' => 'slide',\n 'mvSlideSpeed' => 1500,\n 'mvSlideDelay' => 5000,\n 'mvSlideNum' => 1.5,\n 'mvSlideNumSp' => 1\n );<\/code><\/pre><\/div>\n\n\n\n\u307e\u3068\u3081<\/h2>\n\n\n\n
\u524d\u5f8c\u30dc\u30bf\u30f3\u3092\u64cd\u4f5c\u3059\u308b\u898b\u672c<\/h2>
![\"\"](\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/combine-inline-css-812x457.jpg\")
<\/picture>![\"\"](\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/minimize-loading-swell-812x457.jpg\")
<\/picture>![\"\"](\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/10674_wordpress-wp-rocket-812x457.jpg\")
<\/picture>