ブロガーの方のtwitterを眺めていると、ここ最近の流行りは大きな写真がついたtwitter cardを使って記事をシェアする事、というのが見えてきました。そこで、このブログにもOGPの設定を行い、twitterシェアボタンを導入し、大きな写真つきで記事がシェアされるような機能を追加しました。

このブログで使用しているGatsby staterのgatsby-v2-starter-lumenは、デフォルトでサイドバーとメインのコンポーネントが実装されています。そこに今回はヘッダーとフッターを追加しました。

今回は有名なブログサイトでよく見かける「この記事書いた人」っていう部分を作りました。これがある事で、記事を読み終わられた読者の方がtop pageに遷移できますし、また場合によっては、僕のtwitterアカウントへ遷移して頂けるとのとても便利です。そしてスマホで閲覧する際にサイドバーの一部を非表示にして、サイト全体の背景色を変更しました。

力のあるブロガーの皆さんのサイトを参考にすると、基本的にはワードプレスでサイトを作られています。そして、それらのサイトがやっぱり見やすいんですよね。という事で、このGatsbyブログも読者の方に読んでいただきやすいようにデザインを少しづづ改善していきます。今回は記事のテンプレートを作りましたので、その詳細を書きます。

2018年末までは、はてなブログを使っていましたが、独自ドメインでなるべくコストのかからない方法という事で、2020年正月にGatsbyブログをたちあげました。それで、はてなブログからの記事を移行する準備として記事のダウンロードを行いました。

Google AdSenseへの申請時の記事数は9本、申請後の審査時間は1日とかからず、17時間程度でございました。

2週間でGatsbyJSを学び、自分のブログを立ち上げることができたので、勉強の過程とブログセットアップの過程を共有します。

コードブロックの見た目が気になっていたので、少しかっちょよく変更しました。

Gatsbyのpluginを使用してsitemapを作成し、google consoleに登録しました。

テンプレートのtop pageのデザインが気になっていたので、変更しました。

当サイトのフォントの大きさ、色が少し気になっていたので、変更を加えました。

リンク先を別タブで開けるように、またリンクタグを少しオシャレにしました。

Gatsbyで作られたサイトは、PWA対応させる事がとても簡単、という事ですので、早速PWA対応させました。

本サイトで幾つか気になる個所があったので、修正を加えました。今回の記事は読者の方に向けて、というよりは備忘録のような記事ですね。

自分のサイトがどれぐらいの人に、そしてどういう人にどういう時間帯に読まれているか、気になるところですよね。という事で、本サイトにGoogle Analyticsを導入しました。

巷で噂のグレートGatsby、速い速いと皆さんが書いているので、早速テンプレートを使って、はてなブログをこちらに移行しました。