回答編集履歴

画像追加しました。

2020/09/26 02:31

投稿

masa_air511211

スコア1

test CHANGED Viewed

@@ -377,3 +377,7 @@
 script.js:49 body.slow:step1
 script.js:51 body.slow:step2
+![イメージ説明](8fc560dc027ae5752ace6961e4cf28bf.png)

メッセージ追記

2020/09/26 02:31

投稿

masa_air511211

スコア1

test CHANGED Viewed

@@ -359,3 +359,21 @@
     at HTMLDocument.u (jquery.min.js:37)
 ```
+imagesloaded.pkgd.min.js:7 Uncaught TypeError: h.Deferred is not a constructor
+    at new o (imagesloaded.pkgd.min.js:7)
+    at init.h.fn.imagesLoaded (imagesloaded.pkgd.min.js:7)
+    at HTMLDocument.<anonymous> (script.js:66)
+    at Function.ready (jquery.min.js:29)
+    at HTMLDocument.u (jquery.min.js:37)
+script.js:49 body.slow:step1
+script.js:51 body.slow:step2

エラーコード追記

2020/09/26 02:09

投稿

masa_air511211

スコア1

test CHANGED Viewed

@@ -341,3 +341,21 @@
 ![イメージ説明](9eb3394afd0351512c3c53cfb5b2e500.png)
 ![イメージ説明](4622051b70334880e36b29af0ee16345.png)
+```ここに言語を入力
+imagesloaded.pkgd.min.js:7 Uncaught TypeError: h.Deferred is not a constructor
+    at new o (imagesloaded.pkgd.min.js:7)
+    at init.h.fn.imagesLoaded (imagesloaded.pkgd.min.js:7)
+    at HTMLDocument.<anonymous> (script.js:55)
+    at Function.ready (jquery.min.js:29)
+    at HTMLDocument.u (jquery.min.js:37)
+```

画像追加しました。

2020/09/26 01:28

投稿

masa_air511211

スコア1

test CHANGED Viewed

@@ -339,3 +339,5 @@
 ```
 ![イメージ説明](9eb3394afd0351512c3c53cfb5b2e500.png)
+![イメージ説明](4622051b70334880e36b29af0ee16345.png)

コード変更

2020/09/26 01:06

投稿

masa_air511211

スコア1

test CHANGED Viewed

@@ -1,8 +1,16 @@
+コード修正ありがとうございました。
+早速、下記コードの様に修正してみましたが、同じ様に画像が重なってしまいました。
-masonryのバージョンはv4.2.2になります。
+masonryの同じバージョンが探せずに、4.2.2のままです。
+お手数おかけしますが、ご教授願います。
-```html
+ ```html
 <!DOCTYPE html>
@@ -14,43 +22,47 @@
   <meta charset="UTF-8">
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <title>###</title>
   <link rel="stylesheet" href="css/style.css">
   <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <!-- フォントオーサム -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@800&family=Noto+Serif+JP:wght@700&display=swap">
+  <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- ハンバーガークリックアニメ -->
+<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>--> <!-- ハンバーガークリックアニメ -->
-  <link rel="stylesheet"
-    href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@800&family=Noto+Serif+JP:wght@700&display=swap">
-  <!-- googleフォント -->
-  <link rel="icon" href="img/favicon.png"> <!-- ファビコン -->
+<script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script>
-  <!-- fancybox -->
-  <!-- Add mousewheel plugin (オプションのマウスホイールプラグイン) -->
-  <script type="text/javascript" src="js/jquery.mousewheel.pack.js"></script>
+<script type="text/javascript" src="js/jquery.mousewheel-3.0.4.pack.js"></script>
-  <!-- fancyBox の読み込み（必須）-->
-  <link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
-  <script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
+<script type="text/javascript" src="js/jquery.fancybox-1.3.4.js"></script>
-  <!-- lazyload -->
+<!-- lazyload -->
-  <script src="js/lazysizes.min.js"></script>
+<script src="js/lazysizes.min.js"></script>
+<!-- masonry -->
+<script src="js/masonry.pkgd.min.js"></script>
+<script src="js/masonry-docs.min.js"></script>
-  <!-- javascript  -->
+<!-- javascript  -->
-  <script src="js/script.js"></script>
+<script src="js/script.js"></script>
 </head>
@@ -62,496 +74,268 @@
   <header id="top-head">
+  </header>
+  <main>
+    <div id="wrap">
+      <div id="container">
-    <div class="inner">
+        <div class="wrapper">
-      <div id="mobile-head">
+          <figure class="hover-parent">
+            <a href="img/2020-8-19-4.jpg" class="item x3" data-fancybox-group="cotoh"><img class="lazyload" data-src="img/2020-8-19-4.jpg">
-        <img class="topicon" src="img/topicon.jpg" alt="topicon">
+              <span class="hover-mask">2020-8-19</span></a>
+          </figure>
-        <h1 class="logo"></h1>
+          <figure class="hover-parent">
+            <a href="img/2020-8-19-3.jpg" class="item x3" data-fancybox-group="cotoh"><img class="lazyload" data-src="img/2020-8-19-3.jpg">
+              <span class="hover-mask">2020-8-19</span></a>
+          </figure>
+</div>
       </div>
-      <nav id="global-nav">
-        <ul>
-          <li><a href="https://instagram.com/" class="insta_btn" target="_blank"><span class="insta"><i
-                  class="fab fa-instagram"></i></span>instagram</a></li>
-          <li><a href="https://twitter.com/" class="twitter_btn" target="_blank"><span class="twitter"><i
-                  class="fab fa-twitter"></i></span>twitter</a></li>
-          <li><i class="fa fa-envelope fa-1x"><span class="e-mail"><a href="mailto:"
-                  class="mail_btn" title="Send me an email">e-mail</a></span></i></li>
-        </ul>
-      </nav>
     </div>
-  </header>
-  <main>
-    <div id="loader-bg">
-      <div id="loader">
-      </div>
-    </div>
-    <div id="wrap">
-      <div id="container">
-        <div class="wrapper">
-          <figure class="hover-parent">
-            <a href="img/2020-8-19-4.jpg" class="item x3" data-fancybox-group="cotoh"><img class="lazyload" data-src="img/2020-8-19-4.jpg">
-              <span class="hover-mask">2020-8-19</span></a>
-          </figure>
-          <figure class="hover-parent">
-            <a href="img/2020-8-19-3.jpg" class="item x3" data-fancybox-group="cotoh"><img class="lazyload" data-src="img/2020-8-19-3.jpg">
-              <span class="hover-mask">2020-8-19</span></a>
-          </figure>
-    </div>
-    </div>
   </main>
-  <footer class="footer">
+  <footer class="footer">
+  </footer>
+  <div id="pagetop"><a href="#"></a></div>
+  <script src="js/imagesloaded.pkgd.min.js"></script>
+</body>
+</html>
+```
+```css
+/* masonry */
+#container {
+  width: 100%;
+  margin: 0 auto;   /* 中央寄せ */
+  position: relative;
+  /* overflow: auto; ※ 消してください */
+}
+.wrapper {
+  position: absolute;
+  top: 15px;
+  /* left: 60px; 今回中央寄せにした為消してください */
+  width: 90%;    /* ※追加してください(中央寄せ) */
+  margin-left: auto;    /* ※追加してください(中央寄せ) */
+  margin-right: auto;    /* ※追加してください(中央寄せ) */
+}
+.hover-parent {
+  position: relative;
+  line-height: 30px;
+  min-width:50px;
+  max-width:400px;
+  width: 100%;    /* ※追加してください */
+}
+.item {
+  margin-top:15px;
+  margin-bottom: 15px;
+  padding: 8px;
+  box-shadow: 8px 8px 10px #555555;
+  visibility: hidden;    /* ※追加してください */
+}
+.item.x3 {
+  /* width: 400px; 指定方法の変更 */
+  width: 100%;
+  /* ※ 一応消しておきました */
+  /* opacity : 0; */
+  /* transform: translate(0,50px); */
+  /* transition: all 1s  1s ease-out; */
+}
+.item img {
+  width: 100%;
+}
+```
+```jQuery
+$(function(){
+  var min_width = 100;
+  // itemのサイズを調整する
+  function masonry_update(){
+      ww = $(window).width();
+      var cw = 90;
+      //幅により columnWidth を変更
+      if (ww < 1025) { cw = 59; }
+      if (ww < 897) { cw = 53; }
+      if (ww < 835) { cw = 50; }
+      if (ww < 769) { cw = 36; }
+      if (ww < 737) { cw = 33; }
+      if (ww < 668) { cw = 31; }
+      if (ww < 415) { cw = 33; }
+      if (ww < 376) { cw = 30; }
+      $('#container').masonry({
+          itemSelector: '.item.x3',
+          isFitWidth: true,
+          columnWidth: cw
+      });
+  }
+  // HPの表示を緩やかにする。
+  $('body').delay(500).fadeIn("slow" ,function(){
+      // 画像の枠をレイアウト
+      //この時点で画像サイズが判らないとレイアウトが崩れるため visibility: hidden; で処理を行う
+      masonry_update();
+      $('[class*="item"]').each(function(){
+          //visibility: hidden; で表示していたのをdisplay: noneに変更し
+          //jQueryのフェードインで表示を行う。
+          $(this).css('visibility','visible');
+          $(this).css('display', 'none');
+          $(this).delay(500).fadeIn("slow");
+      });
+  });
+  //リサイズ時の処理
+  var timer = false;
+  $(window).resize(function timeout_masonry_update(){
+      if (timer !== false) {
+          clearTimeout(timer);
+      }
+      timer = setTimeout(function () {
+          masonry_update();
+      }, 200);
+  });
+  // ***** デバッグ用処理 開始 *****
+  // 画像サイズ確認用に変更しています消してください
+  $('a[class*="item"]').attr('target','_blank');
+  // ***** デバッグ用処理 終了 *****
+});
-  </footer>
-  <!-- masonry -->
+/* ここから下は元からあったソースなのですがJQueryの拡張機能を利用して画像表示を行おうとした様子 今回処理を判りやすくするために外してあります。
-  <script src="js/masonry.pkgd.min.js"></script>
+もし使われる場合は「$(this).delay(500).fadeIn("slow");」の箇所で対応してください。
-  <script src="js/imagesloaded.pkgd.min.js"></script>
-  <script>
-    $("img.lazyload").lazyload();
-  </script>
-</body>
+　*/
-</html>
 ```
-```jQuery
-jQuery(function ($) {  //ロード時の崩れ対策
-  $('body').fadeIn(500)
-  // var min_width = 100;
-  //画面幅による分岐と imagesLoaded, Masonry のイニシャライズを関数化
-  function masonry_update() {
-    ww = $(window).width();
-    var cw = 90;
-    if (ww < 1025) { cw = 59; }  //幅により columnWidth を変更
-    if (ww < 897) { cw = 53; }
-    if (ww < 835) { cw = 50; }
-    if (ww < 769) { cw = 36; }
-    if (ww < 737) { cw = 33; }
-    if (ww < 668) { cw = 31; }
-    if (ww < 415) { cw = 33; }
-    if (ww < 376) { cw = 30; }
-    var $works_list = $('#container');
-    $works_list.imagesLoaded(function () {
-      $works_list.masonry({
-        itemSelector: '.item',
-        isFitWidth: true,//親要素の幅に合わせてカラム数を自動調整
-        columnWidth: cw //写真のサイズ
-      });
-    });
-  }
-  masonry_update();
-  //リサイズ時の処理
-  var timer = false;
-  $(window).resize(function () {
-    if (timer !== false) {
-      clearTimeout(timer);
-    }
-    timer = setTimeout(function () {
-      masonry_update();
-    }, 200);
-  });
-});
-$(function(){
-  $(window).on('load scroll', function() {
-     var winScroll = $(window).scrollTop();
-     var winHeight = $(window).height();
-     var scrollPos = winScroll + (winHeight * 0.8);
-     $(".item.x3").each(function() {
-        if($(this).offset().top < scrollPos  + 1000 ) {
-           $(this).css({opacity: 1, transform: 'translate(0, 0)'});
-        }
-     });
-  });
-});
-// fancybox
-//消すと連続で移動できない
-(function ($, F) {
-  F.transitions.resizeIn = function () {
-    var previous = F.previous,
-      current = F.current,
-      startPos = previous.wrap.stop(true).position(),
-      endPos = $.extend({ opacity: 1 }, current.pos);
-    startPos.width = previous.wrap.width();
-    startPos.height = previous.wrap.height();
-    previous.wrap.stop(true).trigger('onReset').remove();
-    delete endPos.position;
-    current.inner.hide();
-    current.wrap.css(startPos).animate(endPos, {
-      duration: current.nextSpeed,
-      easing: current.nextEasing,
-      step: F.transitions.step,
-      complete: function () {
-        F._afterZoomIn();
-        current.inner.fadeIn("fast");
-      }
-    });
-  };
-}(jQuery, jQuery.fancybox));
-// 消すと拡大後の移動できない
-jQuery(function ($) {
-  $(".item.x3").fancybox({
-    nextMethod: 'resizeIn',
-    nextSpeed: 250,
-    prevMethod: false
-  });
-});
-$('#container').imagesLoaded(function(){
-  /*実行させたい処理*/
-});
-$("img.item.x3").lazyload({
-  effect: 'fadeIn',
-  effectspeed: 1000,
-  threshold: 10
-});
-```
-```css
-@charset "UTF-8";
-img {
-  width: 100%;
-  vertical-align: middle;
-}
-figure {
-  margin: 0;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-a {
-  text-decoration: none;
-  /* transition: all 0.5s ease; 全てのプロパティ・変化までの時間・開始と終了時緩やかに */
-}
-a:hover {
-  transition:all .5s ease;
-}
-section {
-  margin-bottom: 120px;
-}
-.content-wrapper {
-   width: 100%; /*修正前95*/
-   margin: 0 auto;
-   max-width: 1400px; /*これ以上大きくならない*/
- }
-section h2 {
-  font-size: 2rem;
-}
-/* figcaption */
-.hover-parent {
-  position: relative;
-  line-height: 30px;
-}
-.hover-parent:hover .hover-mask {
-  display: inline;                     /* インライン要素として表示 */
-}
-/* masonry */
-#container {
-  width: 100%;
-  margin: 0 auto;   /*中央寄せ */
-  position: relative;
-}
-.wrapper {
-  position: absolute;
-  top: 15px;
-  left: 60px;
-}
-.item {
-  margin-top:15px;
-  margin-bottom: 15px;
-  width: 100%;
-  padding: 8px;
-  box-shadow: 8px 8px 10px #555555;
-  /* float: left;  */
-}
-.item.x3 {
-  width: 400px;
-  opacity : 0;
-  transform: translate(0,50px);
-  transition: all 1s  1s ease-out;
-}
-.item img {
-  width: 100%;
-}
-![イメージ説明](63496c7a21dd5479c024fbb1d2210d50.png)
+![イメージ説明](9eb3394afd0351512c3c53cfb5b2e500.png)
-```

コード変更

2020/09/25 14:54

投稿

masa_air511211

スコア1

test CHANGED Viewed

@@ -68,7 +68,7 @@
         <img class="topicon" src="img/topicon.jpg" alt="topicon">
-        <h1 class="logo">古塔つみ</h1>
+        <h1 class="logo"></h1>
       </div>
@@ -78,15 +78,15 @@
         <ul>
-          <li><a href="https://instagram.com/cotoh_tsumi" class="insta_btn" target="_blank"><span class="insta"><i
+          <li><a href="https://instagram.com/" class="insta_btn" target="_blank"><span class="insta"><i
                   class="fab fa-instagram"></i></span>instagram</a></li>
-          <li><a href="https://twitter.com/cotoh_tsumi" class="twitter_btn" target="_blank"><span class="twitter"><i
+          <li><a href="https://twitter.com/" class="twitter_btn" target="_blank"><span class="twitter"><i
                   class="fab fa-twitter"></i></span>twitter</a></li>
-          <li><i class="fa fa-envelope fa-1x"><span class="e-mail"><a href="mailto:cotohtsumi@gmail.com"
+          <li><i class="fa fa-envelope fa-1x"><span class="e-mail"><a href="mailto:"
                   class="mail_btn" title="Send me an email">e-mail</a></span></i></li>