2021-05-09

WP 人気記事ランキング（プラグインなし）

参考サイト

cage.tokyo

laptopreneur.net

前者だけだとうまくいかず（閲覧数取得できてないのか、1位の記事しか出ない）、なんでやー？？となってたところ

single.php に <?php setPostViews(get_the_ID()); ?> を記述したらうまくいきました。

やはり、記事詳細で閲覧数取得できてなかったっぽい。

2021-05-09

wordpress化

最近は自作メディアサイトのwordpress化を頑張っていた

「ハンバーガーメニューが開かないよ〜〜＞＜」と jsファイルの読み込みとか、jQueryのwordpress用の書き方とか重点的に見直して　格闘・・・

の結果、単に　ハンバーガーメニュー開いたときの画面の記述（HTML）が漏れているだけでしたコピペ漏れだね・・・

凡ミスでした。というぼやき

2021-04-17

幅を合わせるためにネガティブマージンを駆使

これはもう、おもっくそ元のサイトをまるまる参考にしたのですが f:id:wanipa-shirotan:20210417222552p:plain

.container {
  padding: 0 20px;
  @media (max-width: 780px) {
    padding: 0 15px;
  }
}

.news {
  margin-top: 40px;
  &Container {
    @media (min-width: 781px) {
      display: flex;
      margin-right: -12px;
      margin-left: -12px;
    }
  }
  &Item {
    @media (min-width: 781px) {
      width: calc((100% / 3) - 24.4px);
      margin: 0 12px 40px;
    }

あらかじめ、paddingで左右に余白があるうえで flex:box で3つブロック横並びにして marginでそれぞれのブロックを均等に並べるため余白おきたいとき

margin-right/left で　12px指定すると paddingで余白とってる分+12pxになるので、見た目が揃わなくなる

なので　display:flex指定している親ボックスで margin-right/left -12px　すると、画面の左端右端のmargin12px分がなくなるので、ちょうどよくなる

calcのとこ　なんで-24.4px 引いてるのかはちょっとわかんないけどなんかちょうど良くなるのかな・・・

2021-03-28

display:flexで正方形維持

模写コーディング続き f:id:wanipa-shirotan:20210328210318p:plain レスポンシブで正方形維持するのはどうやってやるんや？？となったが ↓のサイト参考にしたらできましたー！

web-no-hito.com

    &__movie {
      display: flex;
      &Item {
        width: 50%;
        position: relative;
        &:before {
          content: "";
          display: block;
          padding-top: 100%; 
        }
        &1 {
          margin-right: 6px;
        }
        &2 {
          margin-left: 6px;
        }
      }
      img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        object-fit: cover;
      }
    }

擬似要素でpadding-top: 100%にするのがミソみたい・・・