ホームGatsby【連載】Gatsbyブログのデザインをワードプレスちっくにする手順（その1）記事のテンプレートを作り込む。
2020年1月21日

【連載】Gatsbyブログのデザインをワードプレスちっくにする手順（その1）記事のテンプレートを作り込む。

web design

10月28日追記
Gatsbyブログについて、初noteを書きました。
【完全版】爆速GatsbyでWordPressちっくなブログを作る全手順

2020年2月7日追記
Top pageの各記事について、タイトルの下に画像が表示されるようデザインを変更しました。
【更新版】Top pageのデザインを変更しました。

2020年2月2日追記
Top pageの各記事の表示方法に少し変更を加えました。変更内容は以下のセクションに記載しています。↓
Top pageの各記事の表示方法を変更

こんにちは、筋肉めがねです。

2020年1月はGatsbyにブッこむと腹をくくりました。そして、サイトを作り込むからには皆さんに読んで欲しいですよね。そして、読んでいただくからには読みやすいサイトを作らないといけませんよね。それで、ブロガーとして売れている方達のサイトを拝見させていただきました。どうしてあれだけ質の高い記事を、爆速で世に送り出すことができるのか。勿論、そこに投資している時間の違いはあれど、何か秘密があるんじゃないか、という事で良く良く皆さんの記事を読んでいると、どうやら、テンプレート化する、という事がとても重要であるようです。

という事で、テンプレート化に先立ち、先ずはワードプレスのサイトでほぼほぼ全てのサイトが導入している、サイドバー右側、というところを本サイトで実現しました。

そして、各記事のページのデザイン（見え方）を変更し、ワードプレスと同じぐらいに見やすいサイトを目指して、記事のテンプレート化を行いましたので、そのプロセスを書いていきます。

以下、本日の目次です。

サイドバーを右側へもってきた

こちらのサイトでは、“gatsby-v2-starter-lumen”のテンプレートを使っておりますが、デフォルトではサイドバーが左側に表示されております。これでも十分に見やすいのですが、このサイトが想定している読者の方達は日本の方達です。そして、日本の方が見慣れているのは、やはりサイドバーが右側にあるブログなので、それを先ずは実現したいと思います。

これは、pages, template, componentsで定義されている、Sidebarタグの位置を変更する事で実現する事ができます。
例えば、/src/pages/index.jsxのSidebarタグの位置を以下のように変更しました。

Helmetクローズドタグの直下にあったSidebarタグを、下へ移動しました。

/src/pages/index.jsx
return (
  <Layout>
    <div>
      <Helmet>
        <title>{title}</title>
        <meta name="description" content={subtitle} />
      </Helmet>
      - <Sidebar {...this.props} />
      <div className="content">
        <div className="content__inner">{items}</div>
      </div>
      + <Sidebar {...this.props} />
    </div>
  </Layout>
)

これと同様の変更を以下のファイルにも加えました。

  • /src/pages/categories.jsx
  • /src/pages/tags.jsx
  • /src/pages/404.jsx
  • /src/templates/category-template.jsx
  • /src/templates/tag-template.jsx
  • /src/components/PageTemplateDetails /index.jsx/

これで、サイドバーは右側へ移動しましたが、サイドバーの横に1本ある、灰色の線、これがサイドバーの右側にあるんですよね。scssに変更を加えてこれを左側へ移動します。right: -10pxをleft:-10pxへと変更します。

/src/components/Sidebar/style.scss
.sidebar {
  lost-column: 5/12;
  &__inner {
    padding: 30px 20px 0;
    &:after {
        background: $color-gray-border;
        background: linear-gradient(to bottom, $color-gray-border 0%, $color-gray-border 48%, $color-white 100%);
        position: absolute;
        content: "";
        width: 1px;
        height: 540px;
        top: 30px;
        bottom: 0;

        - right: -10px;
        + left: -10px;
    }
  }
}

これで、以下の写真のとおり、サイドバーの位置を左側から右側へ変更する事ができました。

変更前

before changing sidebar position

変更後

after changing sidebar position

Top pageの表示方法を変更した

使用しているデフォルトのスターターでは、以下の項目が上から順番に並んでおりましたが、この順番を変更しました。

変更前

  • 日付 カテゴリー
  • タイトル
  • 記事の冒頭文

before change

変更後

  • タイトル
  • 日付　カテゴリー
  • 記事の冒頭文
  • 「続きを読む」ボタン

after change

変更した箇所は、src/components/Post/index.jsxであり、それに合わせてscssも修正しております。

/src/components/Post/index.jsx
<div className="post__meta">
  <Link to={slug}>
    <div className="post__meta__title">
      {title}
    </div>
  </Link>
  <time
    className="post__meta-time"
    dateTime={moment(date).format('YYYY年M月DD日')}
  >
    {moment(date).format('YYYY年M月DD日')}
  </time>
  <span className="post__meta-divider" />
  <span className="post__meta-category" key={categorySlug}>
    <Link to={categorySlug} className="post__meta-category-link">
      {category}
    </Link>
  </span>
</div>

<div className="post__oreadd">
  <Link to={slug}>
    <h2 className="post__oreadd__title">
    </h2>
    <div className="post__oreadd__description">{description}</div>
  </Link>
</div>

<div className="post__readmore" >
  <Link to={slug}>
    続きを読む＞
  </Link>
</div>
/src/components/Post/style.scss
@import "../../assets/scss/variables";
@import "../../assets/scss/mixins";

.post {
  &__oreadd{
    &:hover,
    &:focus {
      .post__oreadd__title,
      .post__oreadd__description{
        color: gray !important;
        transition: color 0.2s;
      }
    }
    & a{
        color: #444444 !important;
    }
    
    &__title {
      font-size: $typographic-base-font-size * 1.6875;
      @include line-height(1.4);
      @include margin-top(0);
      @include margin-bottom(0.1);
      font-weight: 600;
      color: #555555;
      & div{ 
        margin-top: 10px;
        text-align: center !important;
        & img {
          width: 98%;
            
        }
        & img:hover{
          opacity: 0.8;
          transition: all .3s !important;
        }
      }
    }
    &__description {
      font-size: $typographic-base-font-size;
      @include line-height(1);
      @include margin-bottom(2.5);
      color: #333333 !important;
    }
  }
  &__meta {
    &-time {
      font-size: $typographic-small-font-size;
      color: $color-base;
      font-weight: 500;
      text-transform: uppercase;
    }
    &-divider {
      margin: 0 5px;
    }
    &-category {
      &-link {
        font-size: $typographic-small-font-size;
        color: $color-secondary;
        font-weight: 500;
        text-transform: uppercase;
        &:hover,
        &:focus {
          color: $color-primary;
        }
      }
    }
    &__title{
      font-size: $typographic-base-font-size * 1.475;
      @include line-height(1.4);
      @include margin-top(0);
      @include margin-bottom(0.1);
      font-weight: 600;
      color: #555555;
      margin-bottom:15px !important;
      background: linear-gradient(transparent 90%, #EDF6FF 90%);
      &:hover,
      &:focus {
        color: #bdbdbd !important;
        transition: color 0.2s;
      }
      & a{
        color: #444444 !important;
      }            
    }
  }
  &__readmore {
    margin-top: -60px;
    margin-bottom: 120px;
    text-align: right;
    & Link {
      font-size: $typographic-base-font-size;
      color: $color-primary;
      &:hover,
      &:focus {
        color: #003FF5;
        transition: 0.1s;
        border-bottom: 1px solid #003FF5;
      }
    }
  }
}

それでは、Gatsbyサイトをワードプレスちっくにする手順その1、記事のテンプレート化を行なっていきます。

記事のテンプレート化

見出しのデザインを変更した

以前の記事で見出しのデザインを1度は変更したものの、どうしてもしっくりきておりませんでした。そこで、ブログ界隈では知らないものがいないmanablogさんの見出しを参考にさせて頂きながら、見出しのデザインを変更しました。

/src/components/PostTemplateDetails/style.scss
& h2 {
  padding: 0.3em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 7px #7db4e6;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
  font-weight: 600;
  font-size: 130%;
}

同様に、h3もh2と近いデザインへと変更しました。
しかし、例えばh4の前にチェックマークがありません。どうやらfont-awesomeというものが必要だという事です。

font-awesomeを導入し、h4でチェックマークを表示させた

話しには聞いていたfont-awesome、早速使って見ましょう。

まず、Google AdSenseを導入した時に準備したhtml.jsに変更を加えます。headクローズドタグの前にlinkタグでfontawesomeを読み込みます。

/src/html.js
...
  {/* following is for font-awesome */}
  <link rel='stylesheet' id='fontawesome-css' href='https://use.fontawesome.com/releases/v5.0.1/css/all.css?ver=4.9.1' type='text/css' media='all' />
  {props.headComponents}
</head>

そして、ターミナルで一旦gatsby build

Terminal
gatsby build

最後に、scssを編集します。

/src/components/PostTemplateDetails/style.scss
& h4:before {
  font-family: 'Font Awesome\ 5 Free';
  content: '\f00c';
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: .8em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #7db4e6; /*アイコン色*/
}

ここで、大事な事はfont-weight:900を設定してあげる事です。これがないと、font-awesomeがブラウザに表示されません。font-awesome5からの仕様変更だそうです。

記事タイトルの大きさを変更した

記事タイトルが大きすぎたので、小さくしました。

日付を記事タイトルのすぐ下に持ってきた。またフォーマットを変更した。

“gatsby-v2-starter-lumen”のテンプレートでは、記事の一番下に日付が表示されていましたが、こちらについても世に売れているブロガーの方達のサイトを参考にすると、どうやら日付はタイトルの下が良さそうです。という事で、位置を変更し、また日付のフォーマットを日本語表示へと変更しました。

/src/components/PostTemplateDetails/index.jsx
return (
  <div>
    <div className="post-single">
      {homeBlock}
      <div className="post-single__inner">
        <h1 className="post-single__title">{post.frontmatter.title}</h1>
        <div className="post-single__date">
          {moment(post.frontmatter.date).format('YYYY年M月DD日')}
        </div>
        ...

もともと日付のフォーマットが、format(‘MM DD YYYY’)という表記だったのですが、これをサクッと変更できた事、そしてUnicodeなど考える必要なく、年、月、日を入れる事ができたことには驚きました。これは開発者にはとても助かりますね。

サイドバーを表示させるよう変更した

デフォルトのフォーマットでは、各記事においてサイドバーが表示されていなかったのでそれを表示させるようにしました。

/src/components/PostTemplateDetails/index.jsx
import Sidebar from '../Sidebar'
...
            {commentsBlock}
          </div>
        </div>
        <Sidebar {...this.props} />
      </div>
    )
  }
}

ただこれだけだと、以下のようにエラーがでます。“Cannot read property ‘map’ of undefined” どうやら、graphqlに問題があるようです。

error

解決策は以下の通りです。
post-template.jsxに、menu { label path }を追加しました。

/src/templates/post-template.jsx
export const pageQuery = graphql`
  query PostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        subtitle
        copyright
        menu {
          label
          path
        }
        ...

そして、scssを修正すれば、top pageと同じような幅のサイドバーが、各記事のページに表示されます。

/src/assets/scss/base/_generic.scss
@include breakpoint-sm {
  ...
  .post-single{
      lost-column: 7/12;
      &__inner {
          padding: 30px 20px;
      }
  }
}

@include breakpoint-md {
  ...
  .post-single{
      lost-column: 2/3;
      &__inner {
          padding: 40px 35px;
      }
  }
}

これで、サイドバーが各記事のページで綺麗に表示されるようになりました。

{homeBlock}ボタン（前に戻るボタン）のデザインを変更した

もともと、デスクトップ画面では記事topの画面左上に表示されていたものを、記事の左はじと位置を合わせるカタチとしました。

/src/components/PostTemplateDetails/index.jsx
return (
  <div>
    <div className="post-single">
      {homeBlock}
      ...

そして、scssも変更しました。

/src/component/PostTemplateDetails/style.scss
&__body {
  ...
  &__home-button {
    margin-left: 1.3rem;
    max-width: auto;
    margin-bottom:-30px;
    height: 35px;
    line-height: 2.1875rem;
  }
  ...

強調したい箇所を蛍光マーカーちっくにした

よくブログでみかけるこれの事ですね。こちらもサクッとscssで変更しました。

/src/index.scss
...
.post-single__body strong{
  background: linear-gradient(transparent 60%, #33ECFF 60%)!important;
}
...

Google Adを記事中に埋め込んだ

以前の記事でAdsenseというcomponentを作成しましたが、各記事の中ではこちらは使わず、直接javascriptを埋め込んでおります。markdownファイルはscriptタグで囲んであげればjavascriptが使える、という点、とても便利です。

リストのデザイン（ul, li)を変更した

最後に、幾つかのポイントを箇条書きにしたい時、枠で囲んで綺麗に見せたいですよね。以下のような感じで。

  • こういうやつ
  • 見易いよね
  • よく見るよね

これも、scssでサクッと変更しました。

/src/components/PostTemplateDetails/style.scss
&__body {
    ...
    & ul {
      padding: 1.0em 0.5em;/*文字の上下 左右の余白*/
      background: #f4f4f4;/*背景色*/
      border-left: solid 4px #D3DDFF;/*左線*/
      border-right: solid 4px #D3DDFF;
      border-top: solid 4px #D3DDFF;
      border-bottom: solid 4px #D3DDFF;
      border-radius: 3px;
      border-style: dotted;
      font-weight: 500;
      list-style-position:inside;
      & li{
          padding: 0em 1.7em;
          color: #00164B !important;
      }
    }
  }
...

大事なことは、list-style-position:inside;をulのスタイルで指定してあげること。これをしないと、ドットが枠の外にはみ出てしまうんですね。

以上で、一旦は記事のテンプレートを作る事ができました。今後は記事を書くスピードがより早くなりますね。そして、まだまだ改善すべき箇所がありそうですので、引き続き粛々と進めていきます。

それでは、本日は以上です。

シェアする

管理人

めがね

ドイツ現地採用サラリーマンです。色々書いてます。

HOME

Copyright - 筋肉めがね. 2019-2021 All Rights Reserved.