All Articles

Gatsby starter デザイン修正( gatsby-starter-lumen )2

2019/08/09

やりたいこと

  • タイトルか説明文のどちらかにマウスが当たると、タイトルと説明文をハイライト(灰色)するようにしたい

対応前

対応後

やること

  1. タイトルと説明文をひとつのdivタグで囲む
  2. contentに対して、cssでホバー時に、文字を灰色にするよう実装
  3. 遷移先のリンクは同じなので、Linkタグで、タイトルと説明文を囲む

1. タイトルと説明文をひとつのdivタグで囲む

Feed.js

<div className={styles['feed__item-content']}>          

2. contentに対して、cssでホバー時に、文字を灰色にするよう実装

Feed.module.scss

  
.feed {
  &__item {

    &-content { // こいつを追加
      &:hover,
      &:focus {                
        .feed__item-content-title, // タイトルをセレクタとして指定
        .feed__item-content-description {  // 説明文をセレクタとして指定
          color: $color-gray; // 灰色になるよう指定
        }
      }

      &-title {  // contentの内側に移動させた
        font-size: $typographic-base-font-size * 1.6875;
        @include line-height(1.3);
        @include margin-top(0);

        padding: 0;
        margin: 0;
        color: #494949;/*文字色*/
        background: none;
        border-left: none;
        border-bottom: none;  
      }

      &-description { // contentの内側に移動させた
        padding: 0;
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: $typographic-base-font-size;
        @include line-height(1);
        
        color: $color-base;
      }
      
    }

3. 遷移先のリンクは同じなので、Linkタグで、タイトルと説明文を囲む

Feed.js

        <div className={styles['feed__item-content']}>          
          <Link to={edge.node.fields.slug}>
            <h2 className={styles['feed__item-content-title']}> 
              {edge.node.frontmatter.title}
            </h2>
            <p className={styles['feed__item-content-description']} to={edge.node.fields.slug}>{edge.node.frontmatter.description}</p>
          </Link>
        </div>