\u697d\u5929\u3067\u898b\u308b<\/a>

Yahoo!\u30b7\u30e7\u30c3\u30d4\u30f3\u30b0\u3067\u898b\u308b<\/a>

Amazon\u3067\u30c1\u30a7\u30c3\u30af<\/a><\/div>\n

<\/p>\n

\n

\u2705 \u7acb\u4f53\u76843D\u30dc\u30bf\u30f3\u306e\u4f5c\u308a\u65b9\uff08\u30b3\u30d4\u30daOK\uff09<\/h3>\n

\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u6b21\u306e\u3088\u3046\u306a\u30dc\u30bf\u30f3\u3092\u4f5c\u308a\u307e\u3059\uff1a<\/p>\n

\u2705 CSS\u3060\u3051\u3067OK\uff08JavaScript\u4e0d\u8981\uff09<\/li>\n
\u2705 \u7acb\u4f53\u76843D\u30dc\u30bf\u30f3\uff0b\u30db\u30d0\u30fc\u3067\u6d6e\u304f<\/li>\n
\u2705 \u6a2a\u4e26\u3073\u5bfe\u5fdc\uff08\u30b9\u30de\u30db\u306f\u81ea\u52d5\u3067\u7e26\u4e26\u3073\uff09<\/li>\n

\u2705 \u30c6\u30fc\u30de\u306b\u5e72\u6e09\u3055\u308c\u305a\u306b\u8868\u793a\u53ef\u80fd<\/li>\n<\/ul>\n

\n

Step1\uff1aHTML\u3092\u8a18\u4e8b\u5185\u306b\u8cbc\u308b<\/h3>\n

WordPress\u306e\u8a18\u4e8b\u672c\u6587\uff08\u30c6\u30ad\u30b9\u30c8\u30e2\u30fc\u30c9\uff09\u306b\u4ee5\u4e0b\u3092\u8cbc\u308a\u307e\u3059\u3002<\/p>\n

\n

<div class=\"hiziri-shop-buttons\">\r\n<!-- \u697d\u5929\u30dc\u30bf\u30f3 -->\r\n<a href=\"\u3010\u697d\u5929\u5546\u54c1\u30da\u30fc\u30b8URL\u3011\" target=\"_blank\" class=\"hiziri-btn hiziri-rakuten\">\u697d\u5929\u3067\u898b\u308b<\/a>\r\n<!-- Yahoo\u30dc\u30bf\u30f3 -->\r\n<a href=\"\u3010Yahoo\u5546\u54c1\u30da\u30fc\u30b8URL\u3011\" target=\"_blank\" class=\"hiziri-btn hiziri-yahoo\">Yahoo!\u30b7\u30e7\u30c3\u30d4\u30f3\u30b0\u3067\u898b\u308b<\/a><!-- Amazon\u30dc\u30bf\u30f3 -->\r\n<!-- Amazon\u30dc\u30bf\u30f3 -->\r\n<a href=\"\u3010Amazon\u5546\u54c1\u30ea\u30f3\u30af\u3011\" target=\"_blank\" class=\"hiziri-btn hiziri-amazon\">Amazon\u3067\u30c1\u30a7\u30c3\u30af<\/a>\r\n<\/div><\/code><\/pre>\n<\/div>\n
\nStep2\uff1aCSS\u3092\u8ffd\u52a0\u3059\u308b<\/h3>\nWordPress\u30c6\u30fc\u30de\u306b\u3088\u3063\u3066\u306f\u30c7\u30b6\u30a4\u30f3\u304c\u5d29\u308c\u305f\u308a\u3001CSS\u304c\u53cd\u6620\u3055\u308c\u306a\u3044\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
\u305d\u306e\u5834\u5408\u306b\u304a\u3059\u3059\u3081\u306a\u306e\u304c \u30d7\u30e9\u30b0\u30a4\u30f3\u300cSimple Custom CSS\u300d<\/strong> \u3067\u3059\u3002<\/p>\n
\n\u300cSimple Custom CSS\u300d\u3092\u5165\u308c\u308b\u3068\u3001\u6295\u7a3f\u5185\u3067\u3082CSS\u304c\u78ba\u5b9f\u306b\u53cd\u6620\u3055\u308c\u307e\u3059\u3002<\/li>\n
\u30d7\u30e9\u30b0\u30a4\u30f3\u306bCSS\u3092\u66f8\u304d\u8fbc\u3081\u3070\u3001\u30c6\u30fc\u30de\u306e\u5e72\u6e09\u3092\u56de\u907f\u3067\u304d\u307e\u3059\u3002<\/li>\n
\u7121\u6599\u3067\u3001\u6295\u7a3f\u3084\u56fa\u5b9a\u30da\u30fc\u30b8\u306b\u5f71\u97ff\u3055\u308c\u305aCSS\u3092\u53cd\u6620\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n\u2705 Simple Custom CSS \u5b9f\u88c5\u65b9\u6cd5<\/h4>\n\nWordPress\u7ba1\u7406\u753b\u9762 \u2192 \u30d7\u30e9\u30b0\u30a4\u30f3 \u2192 \u65b0\u898f\u8ffd\u52a0<\/strong><\/li>\n
\u300cSimple Custom CSS\u300d<\/strong> \u3068\u691c\u7d22\u3057\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\uff06\u6709\u52b9\u5316<\/li>\n
\u7ba1\u7406\u753b\u9762 \u2192 Custom CSS \u2192 \u30ab\u30b9\u30bf\u30e0css\u306e\u8ffd\u52a0<\/strong>\u00a0\u3092\u958b\u304f<\/li>\n
\u30bf\u30a4\u30c8\u30eb\u306b\u300cshop-buttons\u300d\u306a\u3069\u4efb\u610f\u306e\u540d\u524d\u3092\u3064\u3051\u308b<\/li>\n
\u4e0b\u306eCSS\u3092\u30b3\u30d4\u30da\u3057\u3066\u4fdd\u5b58<\/li>\n<\/ol>\n <\/p>\n
\n\r\n.hiziri-shop-buttons {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 12px;\r\n  justify-content: flex-start;\r\n  margin: 20px 8px;\r\n}\r\n\r\n.hiziri-btn {\r\n  flex: 1 1 120px; \/* \u81ea\u52d5\u6a2a\u4e26\u3073\u3001\u6700\u5c0f\u5e45120px *\/\r\n  max-width: 165px; \/* \u6700\u5927\u5e45\u3092\u8a2d\u5b9a *\/\r\n  background: linear-gradient(145deg, #555, #222); \/* \u7acb\u4f53\u611f\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3 *\/\r\n  color: #fff;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  font-weight: bold;\r\n  font-size: 12px; \/* \u6587\u5b57\u5c0f\u3055\u3081 *\/\r\n  padding: 8px 8px; \/* \u4e0a\u4e0b8px \/ \u5de6\u53f38px \u306b\u3057\u3066\u5de6\u53f3\u4f59\u767d\u63a7\u3048\u3081 *\/\r\n  border-radius: 12px;\r\n  \/* \u30dc\u30bf\u30f3\u81ea\u4f53\u306b\u7acb\u4f53\u7684\u306a\u5f71 *\/\r\n  box-shadow: \r\n    0 4px 6px rgba(0,0,0,0.3),\r\n    0 8px 12px rgba(0,0,0,0.2),\r\n    0 12px 20px rgba(0,0,0,0.1);\r\n  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;\r\n}\r\n\r\n.hiziri-btn:hover {\r\n  transform: translateY(-4px); \/* \u30db\u30d0\u30fc\u3067\u5c11\u3057\u6d6e\u304f *\/\r\n  box-shadow: \r\n    0 8px 12px rgba(0,0,0,0.3),\r\n    0 12px 20px rgba(0,0,0,0.25),\r\n    0 16px 28px rgba(0,0,0,0.15); \/* \u30db\u30d0\u30fc\u3067\u5f71\u3092\u5f37\u5316 *\/\r\n  background: linear-gradient(145deg, #666, #333); \/* \u30db\u30d0\u30fc\u3067\u5c11\u3057\u660e\u308b\u304f *\/\r\n}\r\n\r\n\/* \u500b\u5225\u8272 *\/\r\n.hiziri-rakuten { background: linear-gradient(145deg, #e03, #bf0000); }\r\n.hiziri-yahoo { background: linear-gradient(145deg, #ffd633, #ffcc00); color: #111; }\r\n.hiziri-amazon { background: linear-gradient(145deg, #ffb733, #ff9900); color: #111; }\r\n<\/code><\/pre>\n<\/div>\n <\/p>\n
\u2705 \u4f7f\u3044\u65b9<\/h3>\n\nWordPress\u6295\u7a3f\u753b\u9762 \u2192 \u30ab\u30b9\u30bf\u30e0HTML<\/strong> \u30d6\u30ed\u30c3\u30af\u306b\u8cbc\u308b<\/li>\n
\u3010\u697d\u5929\u5546\u54c1\u30da\u30fc\u30b8URL\u3011 \u3010Yahoo\u5546\u54c1\u30da\u30fc\u30b8URL\u3011\u3010Amazon\u30a2\u30d5\u30a3\u30ea\u30f3\u30af\u3011 \u3092\u5dee\u3057\u66ff\u3048\u308b<\/li>\n
\u516c\u958b\u3059\u308b\u3068\u30ea\u30f3\u30af\u5bfe\u5fdc\u306e\u7acb\u4f53\u7684\u304c\u5b8c\u6210<\/li>\n<\/ol>\n\u4ee5\u4e0a<\/p>\n","protected":false},"excerpt":{"rendered":"
\u30d6\u30ed\u30b0\uff08WordPress\uff09\u8a18\u4e8b\u5185\u306b\u4f7f\u3048\u308b\u3001\u30cd\u30c3\u30c8\u901a\u8ca9\u5411\u3051\u306e\u201c\u304b\u3063\u3053\u3044\u3044\u30ea\u30f3\u30af\u30dc\u30bf\u30f3\u201d\u3092\u4f5c\u308a\u307e\u3057\u305f\u3002 CSS\u3060\u3051\u3067\u4f5c\u308c\u308b\u300c\u6a2a\u4e26\u3073\u30fb\u7acb\u4f53\u7684\u30fb\u30af\u30ea\u30c3\u30af\u3057\u305f\u304f\u306a\u308b\u30dc\u30bf\u30f3\u300d\u306e\u4f5c\u308a\u65b9\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002 \u4e0b\u306e\u30b5\u30f3\u30d7\u30eb\u306f\u5b9f\u969b\u306b\u7a3c\u50cd\u3057\u3066\u3044\u308b\u2026<\/p>\n","protected":false},"author":1,"featured_media":38280,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56,3918],"tags":[3932,426,516],"class_list":["post-38246","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-amazon","tag-simple-custom-css","tag-426","tag-516"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.hcz.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts\/38246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hcz.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hcz.jp\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hcz.jp\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hcz.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=38246"}],"version-history":[{"count":33,"href":"https:\/\/www.hcz.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts\/38246\/revisions"}],"predecessor-version":[{"id":38554,"href":"https:\/\/www.hcz.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts\/38246\/revisions\/38554"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hcz.jp\/blog\/index.php?rest_route=\/wp\/v2\/media\/38280"}],"wp:attachment":[{"href":"https:\/\/www.hcz.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=38246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hcz.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=38246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hcz.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=38246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}