{"id":396,"date":"2020-12-20T01:28:07","date_gmt":"2020-12-19T16:28:07","guid":{"rendered":"https:\/\/osora.work\/blog\/?p=396"},"modified":"2020-12-20T01:30:23","modified_gmt":"2020-12-19T16:30:23","slug":"%e6%93%ac%e4%bc%bc%e8%a6%81%e7%b4%a0%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%82%8b%e3%80%9c%e3%80%8cbefore%e3%80%8d%e3%80%8cafter%e3%80%8d%e7%b7%a8%e3%80%9c","status":"publish","type":"post","link":"https:\/\/osora.ne0n.xyz\/blog\/396","title":{"rendered":"\u64ec\u4f3c\u8981\u7d20\u3092\u4f7f\u3063\u3066\u307f\u308b\u301c\u300c:before\u300d\u300c:after\u300d\u7de8\u301c"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

\u65b0\u305f\u306b\u5b9f\u88c5\u3057\u305f\u300cpin\u300d\u3068\u300cnew\u300d\u306e\u5b9f\u88c5\u65b9\u6cd5\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\u2193\u300cnew\u300d\u306e\u8868\u793a\u671f\u9593\u306b\u3064\u3044\u3066\u306f\u3053\u3061\u3089\u3067\u2193
WordPress\u3067\u66f4\u65b0\u65e5\u304b\u3089\u306e\u7d4c\u904e\u6642\u9593\u3092\u53cd\u6620\u3059\u308b<\/a><\/p>\n\n\n\n

<\/p>\n\n\n\n

\u30b3\u30fc\u30c9<\/h3>\n\n\n\n

\u300cpin\u300d\u306e\u30b3\u30fc\u30c9<\/h4>\n\n\n\n
\/* \u56fa\u5b9a\u6295\u7a3f *\/\n\narticle {\n    position: relative;\n}\n\narticle.sticky:after {\n    content: "pin"!important;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-weight: bold;\n    font-size: 12px;\n    top: -14px;\n    left: 26px;\n    height: 14px;\n    width: 60px;\n    color: #fff;\n    background-color: orange!important;\n    position: absolute;\n    border-radius: 4px 4px 0 0;\n    transition: box-shadow .2s;\n}\n\narticle.sticky:before {\n    content: "";\n    top: 0;\n    left: 26px;\n    height: 14px;\n    width: 100px;\n    background-color: #fff;\n    position: absolute;\n    z-index: 100;\n    transform: translateZ(100px);\n}\n\narticle:hover.sticky:after {\n    box-shadow: 2px 2px 6px #bbb;\n}<\/code><\/pre><\/div>\n\n\n\n
\u691c\u8a3c\u3092\u3057\u3066\u3001\u5148\u982d\u56fa\u5b9a\u8868\u793a\u306e\u6295\u7a3f\u306e\u4e2d\u306b\u300csticky\u300d\u3068\u3044\u3046\u30af\u30e9\u30b9\u540d\u3092\u898b\u3064\u3051\u305f\u306e\u3067\u3001\u305d\u308c\u3092\u5229\u7528\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u300cnew\u300d\u306e\u30b3\u30fc\u30c9<\/h4>\n\n\n\n
\/* \u65b0\u7740\u6295\u7a3f *\/\n\narticle.new:after {\n    content: "new";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-weight: bold;\n    font-size: 12px;\n    top: -14px;\n    left: 26px;\n    height: 14px;\n    width: 60px;\n    color: #fff;\n    background-color: #f33;\n    position: absolute;\n    border-radius: 4px 4px 0 0;\n    transition: box-shadow .2s;\n}\n\narticle.new:before {\n    content: "";\n    top: 0;\n    left: 26px;\n    height: 14px;\n    width: 100px;\n    background-color: #fff;\n    position: absolute;\n    z-index: 100;\n    transform: translateZ(100px)\n}\n\narticle:hover.new:after {\n    box-shadow: 2px 2px 6px #bbb;\n}<\/code><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
\u89e3\u8aac<\/h3>\n\n\n\n
\u300c:before\u300d\u300c:after\u300d\u3092\u4f7f\u3046\u306b\u306f\u30b3\u30c4\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
  1. \u64ec\u4f3c\u8981\u7d20\u3092\u8ffd\u52a0\u3059\u308b\u8981\u7d20\u3092\u300cposition: relative;\u300d\u306b\u3059\u308b\u3053\u3068<\/li>
  2. \u64ec\u4f3c\u8981\u7d20\u306b\u306f\u4e2d\u8eab\u304c\u306a\u304f\u3068\u3082\u300ccontent: “”;\u300d\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068<\/li>
  3. \u64ec\u4f3c\u8981\u7d20\u306f\u300cposition: absolute;\u300d\u306b\u3059\u308b\u3053\u3068<\/li><\/ol>\n\n\n\n
    \u8868\u793a\u3055\u308c\u306a\u3044\u306a\u3063\u3066\u3068\u304d\u306f\u4e0a\u8a18\u3092\u78ba\u8a8d\u3057\u3066\u307b\u3057\u3044\u3067\u3059\u3002<\/p>\n\n\n\n
    <\/p>\n\n\n\n
    :after\u306e\u30b3\u30fc\u30c9\u89e3\u8aac<\/h4>\n\n\n\n
    • content: “new”;
      \u2191\u30c6\u30ad\u30b9\u30c8(\u5fc5\u9808)<\/li>
    • display: flex;<\/li>
    • align-items: center;<\/li>
    • justify-content: center;
      \u2191flex\u306b\u3057\u3066\u3001\u6587\u5b57\u306e\u4e0a\u4e0b\u5de6\u53f3\u3092\u4e2d\u592e\u63c3\u3048\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/li>
    • font-weight: bold;<\/li>
    • font-size: 12px;
      \u2191\u30c6\u30ad\u30b9\u30c8\u306e\u8a2d\u5b9a<\/li>
    • top: -14px;<\/li>
    • left: 26px;
      \u2191\u4f4d\u7f6e\u8abf\u6574<\/li>
    • height: 14px;<\/li>
    • width: 60px;
      \u2191\u30b5\u30a4\u30ba\u8abf\u6574<\/li>
    • color: #fff;<\/li>
    • background-color: #f33;
      \u2191\u8272<\/li>
    • position: absolute;
      \u2191\u7d76\u5bfe\u4f4d\u7f6e\u8868\u793a(\u5fc5\u9808)<\/li>
    • border-radius: 4px 4px 0 0;
      \u2191\u4e0a\u90e8\u5206\u306e\u307f\u4e38\u304f\u3057\u3066\u3044\u308b<\/li>
    • transition: box-shadow .2s;
      \u2191CSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a<\/li><\/ul>\n\n\n\n
      \u300c:after\u300d\u306b\u306f\u30c6\u30ad\u30b9\u30c8\u3092\u8868\u793a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
      \u64ec\u4f3c\u8981\u7d20\u306e:hover\u306b\u3064\u3044\u3066<\/h4>\n\n\n\n
      \u3061\u306a\u307f\u306b\u300c:hover\u300d\u3068\u304b\u306f\u64ec\u4f3c\u30af\u30e9\u30b9\u3063\u3066\u540d\u524d\u3089\u3057\u3044\u3067\u3059\u3002<\/p>\n\n\n\n
      \u64ec\u4f3c\u8981\u7d20\u306e\u64ec\u4f3c\u30af\u30e9\u30b9\u306f\u3001\u64ec\u4f3c\u8981\u7d20\u3092\u8a2d\u5b9a\u3057\u305f\u5143\u306e\u8981\u7d20\u306b\u4ed8\u3051\u307e\u3059\u3002<\/p>\n\n\n\n
      article:hover.new:after {\n\/*article\u3092hover\u3057\u305f\u3068\u304d.new\u306e:after\u3092\u5909\u66f4\u3059\u308b*\/\nbox-shadow: 2px 2px 6px #bbb;\n}<\/code><\/pre><\/div>\n\n\n\n
      hover\u3055\u308c\u305f\u3068\u304d\u306b\u64ec\u4f3c\u8981\u7d20\u306b\u3082\u5f71\u304c\u3064\u304f\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
      :before\u306e\u30b3\u30fc\u30c9\u89e3\u8aac<\/h4>\n\n\n\n
      \u540c\u3058\u8981\u7d20\u306b\u540c\u3058\u64ec\u4f3c\u8981\u7d20\u3092\u4f55\u500b\u3082\u4ed8\u3051\u305f\u308a\u306f\u3067\u304d\u306a\u3044\u3088\u3046\u306a\u306e\u3067\u3001\u300c:before\u300d\u306b\u30db\u30d0\u30fc\u306b\u3088\u3063\u3066\u3067\u304d\u305f\u5f71\u3092\u96a0\u3059\u30b3\u30fc\u30c9\u3092\u66f8\u304d\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
      • content: “”;
        \u2191\u30c6\u30ad\u30b9\u30c8(\u5fc5\u9808)<\/li>
      • top: 0;<\/li>
      • left: 26px;
        \u2191\u4f4d\u7f6e\u8abf\u6574<\/li>
      • height: 14px;<\/li>
      • width: 100px;
        \u2191\u30b5\u30a4\u30ba\u8abf\u6574<\/li>
      • background-color: #fff;
        \u2191\u8272<\/li>
      • position: absolute;
        \u2191\u7d76\u5bfe\u4f4d\u7f6e\u8868\u793a(\u5fc5\u9808)<\/li>
      • z-index: 100;<\/li>
      • transform: translateZ(100px);
        \u2191\u8868\u793a\u30ec\u30a4\u30e4\u30fc\u3092\u4e0a\u306b\u8a2d\u5b9a\u3059\u308b<\/li><\/ul>\n\n\n\n
        \u3053\u308c\u3067\u300c:after\u300d\u306e\u5074\u306b\u767d\u3044\u7a7a\u9593\u304c\u8868\u793a\u3055\u308c\u3001\u30db\u30d0\u30fc\u6642\u306e\u5f71\u3092\u96a0\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
        \"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
        \u65b0\u305f\u306b\u5b9f\u88c5\u3057\u305f\u300cpin\u300d\u3068\u300cnew\u300d\u306e\u5b9f\u88c5\u65b9\u6cd5\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002 \u2193\u300cnew\u300d\u306e\u8868\u793a\u671f\u9593\u306b\u3064\u3044\u3066\u306f\u3053\u3061\u3089\u3067\u2193WordPress\u3067\u66f4\u65b0\u65e5\u304b\u3089\u306e\u7d4c\u904e\u6642\u9593\u3092\u53cd\u6620\u3059\u308b \u30b3\u30fc\u30c9 \u300cpin\u300d\u306e\u30b3\u30fc\u30c9 \u691c\u8a3c\u3092\u3057\u3066\u3001\u5148\u982d\u56fa\u5b9a\u8868\u793a\u306e\u6295\u7a3f … <\/p>\n","protected":false},"author":1,"featured_media":423,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2,4],"tags":[],"_links":{"self":[{"href":"https:\/\/osora.ne0n.xyz\/blog\/wp-json\/wp\/v2\/posts\/396"}],"collection":[{"href":"https:\/\/osora.ne0n.xyz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/osora.ne0n.xyz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/osora.ne0n.xyz\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/osora.ne0n.xyz\/blog\/wp-json\/wp\/v2\/comments?post=396"}],"version-history":[{"count":7,"href":"https:\/\/osora.ne0n.xyz\/blog\/wp-json\/wp\/v2\/posts\/396\/revisions"}],"predecessor-version":[{"id":443,"href":"https:\/\/osora.ne0n.xyz\/blog\/wp-json\/wp\/v2\/posts\/396\/revisions\/443"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/osora.ne0n.xyz\/blog\/wp-json\/wp\/v2\/media\/423"}],"wp:attachment":[{"href":"https:\/\/osora.ne0n.xyz\/blog\/wp-json\/wp\/v2\/media?parent=396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/osora.ne0n.xyz\/blog\/wp-json\/wp\/v2\/categories?post=396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/osora.ne0n.xyz\/blog\/wp-json\/wp\/v2\/tags?post=396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}