編集履歴

質問編集履歴

問題解決のためコードを削除

2020/12/31 08:44

投稿

j11

スコア2

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -24,7 +24,7 @@
 ```js
-const CategoryMenu = ({ location }) => {
+const Test = ({ location }) => {
   return (
@@ -78,408 +78,4 @@
 ####追記：実際のコード（解決後削除予定）
-- index.js
-```js
-import React from "react";
-import { graphql } from "gatsby";
-import { Helmet } from "react-helmet";
-import Layout from "../components/Layout";
-import SEO from "../components/SEO";
-import PostCard from "../components/PostCard";
-import CategoryMenu from "../components/CategoryMenu";
-import HomeJsonLd from "../components/json/HomeJsonLd";
-class BlogIndex extends React.Component {
-  render() {
-    const { data } = this.props;
-    const siteTitle = data.site.siteMetadata.title;
-    const posts = data.allMarkdownRemark.edges;
-    const { location } = this.props;
-    return (
-      <Layout location={this.props.location} title={siteTitle}>
-        <SEO title="" />
-        <Helmet>
-          <link rel="canonical" href="https://catnose99.com" />
-        </Helmet>
-        <HomeJsonLd />
-        <CategoryMenu location={location} />
-        {posts.map(({ node }) => {
-          return <PostCard key={node.fields.slug} node={node} />;
-        })}
-      </Layout>
-    );
-  }
-}
-export default BlogIndex;
-export const pageQuery = graphql`
-  query {
-    site {
-      siteMetadata {
-        title
-      }
-    }
-    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
-      edges {
-        node {
-          fields {
-            slug
+削除済み
-          }
-          frontmatter {
-            date(formatString: "YYYY.MM.DD")
-            title
-            emoji
-            category
-          }
-        }
-      }
-    }
-  }
-`;
-```
-- CategoryMenu.js
-```js
-import React from "react";
-import styled from "styled-components";
-import { Link } from "gatsby";
-import svgNew from "../svg/categories/new.svg";
-const Nav = styled.nav`
-  display: block;
-  margin: 0;
-  padding: 0 0 2em;
-  @media screen and (max-width: ${(props) => props.theme.responsive.small}) {
-    padding: 1em 0;
-  }
-`;
-const CategoryItemList = styled.ul`
-  display: flex;
-  @media screen and (max-width: ${(props) => props.theme.responsive.small}) {
-    margin: 0 -20px;
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    ::-webkit-scrollbar {
-      display: none;
-    }
-    &:after {
-      content: "";
-      width: 40px;
-      flex: 0 0 auto;
-    }
-  }
-`;
-const CategoryItem = styled.li`
-  width: 70px;
-  margin: 0 20px 0 0;
-  text-align: center;
-  @media screen and (max-width: ${(props) => props.theme.responsive.small}) {
-    width: 60px;
-    flex: 0 0 auto;
-    margin: 0 0 0 15px;
-  }
-  .cat-item__link {
-    color: #fff;
-  }
-  .cat-item__image {
-    padding: 2px;
-    background: ${(props) => props.theme.colors.blackLight};
-    border-radius: 50%;
-    position: relative;
-    img {
-      position: relative;
-      background: ${(props) => props.theme.colors.blackLight};
-      border-radius: 50%;
-      display: block;
-      z-index: 2;
-    }
-  }
-  .cat-item__name {
-    margin-top: 5px;
-    font-size: 13px;
-    font-weight: 700;
-    letter-spacing: 0.5px;
-    color: ${(props) => props.theme.colors.gray};
-    @media screen and (max-width: ${(props) => props.theme.responsive.small}) {
-      font-size: 12px;
-    }
-  }
-  &.active {
-    .cat-item__image:after {
-      content: "";
-      position: absolute;
-      display: block;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      background: ${(props) => props.theme.colors.gradient};
-      animation: rotating 2s linear infinite;
-    }
-    img {
-      border: solid 2px ${(props) => props.theme.colors.background};
-    }
-  }
-  @keyframes rotating {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-`;
-const CategoryLink = ({ catName, iconid, catLink, path }) => {
-  return (
-    <CategoryItem className={catLink === path && "active"}>
-      <Link to={catLink} className="cat-item__link">
-        <div className="cat-item__image">
-          <img
-            src={"https://twemoji.maxcdn.com/2/svg/" + { iconid } + ".svg"}
-            alt={catName}
-          />
-        </div>
-        <div className="cat-item__name">{catName}</div>
-      </Link>
-    </CategoryItem>
-  );
-};
-const CategoryMenu = ({ location }) => {
-  const path = location.pathname;
-  return (
-    <Nav>
-      <CategoryItemList>
-        <CategoryLink catName="New" catIcon={svgNew} catLink="/" path={path} />
-        <CategoryLink
-          catName="TaikoSim"
-          iconid="1f941"
-          catLink="/category/design"
-          path={path}
-        />
-        <CategoryLink
-          catName="Dev"
-          iconid="1f916"
-          catLink="/category/dev"
-          path={path}
-        />
-      </CategoryItemList>
-    </Nav>
-  );
-};
-export default CategoryMenu;
-```

実際のコードを記述

2020/12/31 08:44

投稿

j11

スコア2

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -73,3 +73,413 @@
 #補足情報
 初心者すぎて当たり前のことがわからないのでその点よろしくお願いします。
+####追記：実際のコード（解決後削除予定）
+- index.js
+```js
+import React from "react";
+import { graphql } from "gatsby";
+import { Helmet } from "react-helmet";
+import Layout from "../components/Layout";
+import SEO from "../components/SEO";
+import PostCard from "../components/PostCard";
+import CategoryMenu from "../components/CategoryMenu";
+import HomeJsonLd from "../components/json/HomeJsonLd";
+class BlogIndex extends React.Component {
+  render() {
+    const { data } = this.props;
+    const siteTitle = data.site.siteMetadata.title;
+    const posts = data.allMarkdownRemark.edges;
+    const { location } = this.props;
+    return (
+      <Layout location={this.props.location} title={siteTitle}>
+        <SEO title="" />
+        <Helmet>
+          <link rel="canonical" href="https://catnose99.com" />
+        </Helmet>
+        <HomeJsonLd />
+        <CategoryMenu location={location} />
+        {posts.map(({ node }) => {
+          return <PostCard key={node.fields.slug} node={node} />;
+        })}
+      </Layout>
+    );
+  }
+}
+export default BlogIndex;
+export const pageQuery = graphql`
+  query {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
+      edges {
+        node {
+          fields {
+            slug
+          }
+          frontmatter {
+            date(formatString: "YYYY.MM.DD")
+            title
+            emoji
+            category
+          }
+        }
+      }
+    }
+  }
+`;
+```
+- CategoryMenu.js
+```js
+import React from "react";
+import styled from "styled-components";
+import { Link } from "gatsby";
+import svgNew from "../svg/categories/new.svg";
+const Nav = styled.nav`
+  display: block;
+  margin: 0;
+  padding: 0 0 2em;
+  @media screen and (max-width: ${(props) => props.theme.responsive.small}) {
+    padding: 1em 0;
+  }
+`;
+const CategoryItemList = styled.ul`
+  display: flex;
+  @media screen and (max-width: ${(props) => props.theme.responsive.small}) {
+    margin: 0 -20px;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    ::-webkit-scrollbar {
+      display: none;
+    }
+    &:after {
+      content: "";
+      width: 40px;
+      flex: 0 0 auto;
+    }
+  }
+`;
+const CategoryItem = styled.li`
+  width: 70px;
+  margin: 0 20px 0 0;
+  text-align: center;
+  @media screen and (max-width: ${(props) => props.theme.responsive.small}) {
+    width: 60px;
+    flex: 0 0 auto;
+    margin: 0 0 0 15px;
+  }
+  .cat-item__link {
+    color: #fff;
+  }
+  .cat-item__image {
+    padding: 2px;
+    background: ${(props) => props.theme.colors.blackLight};
+    border-radius: 50%;
+    position: relative;
+    img {
+      position: relative;
+      background: ${(props) => props.theme.colors.blackLight};
+      border-radius: 50%;
+      display: block;
+      z-index: 2;
+    }
+  }
+  .cat-item__name {
+    margin-top: 5px;
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    color: ${(props) => props.theme.colors.gray};
+    @media screen and (max-width: ${(props) => props.theme.responsive.small}) {
+      font-size: 12px;
+    }
+  }
+  &.active {
+    .cat-item__image:after {
+      content: "";
+      position: absolute;
+      display: block;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: ${(props) => props.theme.colors.gradient};
+      animation: rotating 2s linear infinite;
+    }
+    img {
+      border: solid 2px ${(props) => props.theme.colors.background};
+    }
+  }
+  @keyframes rotating {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+const CategoryLink = ({ catName, iconid, catLink, path }) => {
+  return (
+    <CategoryItem className={catLink === path && "active"}>
+      <Link to={catLink} className="cat-item__link">
+        <div className="cat-item__image">
+          <img
+            src={"https://twemoji.maxcdn.com/2/svg/" + { iconid } + ".svg"}
+            alt={catName}
+          />
+        </div>
+        <div className="cat-item__name">{catName}</div>
+      </Link>
+    </CategoryItem>
+  );
+};
+const CategoryMenu = ({ location }) => {
+  const path = location.pathname;
+  return (
+    <Nav>
+      <CategoryItemList>
+        <CategoryLink catName="New" catIcon={svgNew} catLink="/" path={path} />
+        <CategoryLink
+          catName="TaikoSim"
+          iconid="1f941"
+          catLink="/category/design"
+          path={path}
+        />
+        <CategoryLink
+          catName="Dev"
+          iconid="1f916"
+          catLink="/category/dev"
+          path={path}
+        />
+      </CategoryItemList>
+    </Nav>
+  );
+};
+export default CategoryMenu;
+```

誤字のため修正

2020/12/30 02:11

投稿

j11

スコア2

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -8,7 +8,7 @@
 ```js
-const Example = ({ Word1, Word2 }) => {
+const Example = ({ word1, word2 }) => {
   return (