Logo

キクナントカ

ソフトウェアエンジニアをしています。趣味でボードゲームを制作したり、個人開発でNakamyというサービスを開発しています。詳しくはこちら

俺が考えた最強のブログを作る (14件)

GatsbyJSで作っているブログでページ遷移時にアニメーションが付くようにした

2020-05-28

モチベーション GatsbyJSでブログを作っており、SPAでページ遷移が爆速なのがとても良いが、読み込みがないことで、逆にフィードバックがなくてページが変わったことに気づけないので、ページ遷移時にアニメーションを付けたかった できあがったもの 適当にページ遷移するとファンって…

GatsbyJSで作っているブログでAmazonのリンクをいい感じに貼れるようにした

2020-05-24

モチベーション GatsbyJSで作っているブログでリッチなリンクを貼れるようにした の記事でリッチなリンクを貼れるような仕組みを作ったのだが、AmazonはOGPデータが設定されておらず、上手く表示ができなかった 買ってよかったものとかを紹介する際にリッチないい感じのリンクを…

GatsbyJSで作っているブログでリッチなリンクを貼れるようにした

2020-04-10

モチベーション アプリやサービスを紹介する際にURLだけだと味気がないので、OGPの情報を拾ってきて、リンク先のタイトルや画像が表示されるようにしたかった noteとかでよく見るやつ できあがったもの こんな感じのやつ。アプリとかサービスの紹介とかで使っていきたい。 検討し…

GatsbyJSで作っているブログにMaterial-UIを導入した

2020-03-31

モチベーション Flutterを触るようになってMaterial Designなコンポーネントを扱う機会が増えたので、Material Designなコンポーネントに触れる機会を増やしたかった Material-UIの0系の頃に触って以来だったので、触ってみたかった Seman…

GatsbyJSで作っているブログに月別/年別アーカイブページを追加した

2020-02-18

モチベーション 月ごと、年ごとに何記事書いたかを把握したかった よくあるブログの機能を実現してみたかった やったこと 基本的に生成される系のページは、gatsby-node.js内でGraphQLで条件を指定して記事を取得し、テンプレートに当てはめて作成していく流れになる 自分…

GatsbyJSで作っているブログの記事のURLを見直した

2020-02-13

今まで これから モチベーション 年別、月別アーカイブ機能を入れるとしたら、 とか とかのルーティングにしたくなりそうなので、それに合わせたかった 記事数が増えてきて、記事ディレクトリ配下のフォルダ数が増えていて、管理しづらかった やったこと 記事ディレクトリ配下に や…

GatsbyJSで作っているブログでコードブロックの行数を表示できるようにして、プラグインの中身を少し読んでみた

2019-12-15

はじめに ギフティ Advent Calendar 2019 - Qiitaの15日目の記事。アドベントカレンダー駆動開発でこのブログを進化させていくスタイルをとっている。このブログでコードを書いた時にコードブロックがいい感じになるようにしたので、その過程をまとめる。今回はコー…

GatsbyJSで作っているブログでコードブロックで指定した行数がハイライトされるようにした

2019-12-12

はじめに ギフティ Advent Calendar 2019 - Qiitaの12日目の記事。アドベントカレンダー駆動開発でこのブログを進化させていくスタイルをとっている。このブログでコードを書いた時にコードブロックがいい感じになるようにしたので、その過程をまとめる。今回は指定…

GatsbyJSで作っているブログでコードブロックにタイトルをつけられるようにした

2019-12-11

はじめに ギフティ Advent Calendar 2019 - Qiitaの11日目の記事。アドベントカレンダー駆動開発でこのブログを進化させていくスタイルをとっている。このブログでコードを書いた時にコードブロックがいい感じになるようにしたので、その過程をまとめる。前回に引き…

GatsbyJSで作っているブログでシンタックスハイライトが適用されるようにした

2019-12-03

はじめに ギフティ Advent Calendar 2019 - Qiitaの3日目の記事。枠が空いていたので書いた。アドベントカレンダー駆動開発でこのブログを進化させていくスタイルをとっていきたい。このブログでコードを書いた時にコードブロックがいい感じになるようにしたので、そ…

GatsbyJSで作っているブログにタグ機能を導入した

2019-12-01

はじめに ギフティ Advent Calendar 2019 - Qiitaの1日目の記事。このブログにタグ機能を導入したので、その時の手順を解説する。基本的に公式の記事に従えば良いのだが、差分が分かりづらいのと、自分で理解した内容を補足したいので、記事にした。 前提 このブロ…

Sass with CSS Modulesな環境を整えた

2019-04-15

導入した背景 他の案件などでsassでスタイルを書いているので、お互いに流用しやすいので、このブログでも採用した。 CSS ModulesはGatsbyに標準で入っている。 やったこと 下記コマンドで必要なパッケージをインストールして、gatsby-config.jsに設定を追…

Semantic UI Reactを導入した

2019-04-10

導入した背景 ブログのデザインをカスタマイズするためにフレームワークを導入したかったので、普段から使い慣れているSemantic UIを導入した。Reactコンポーネント版のSemantic UI Reactがあるので、そちらを導入した。 Semantic UI Introdu…

GatsbyJSにブログを移行するまでにやったこと

2019-03-29

ホスティング先の選定 Netlify: All-in-one platform for automating modern web projects. 大人しくNetlifyにした。Toykoリージョンはまだなく、一番近くてシンガポールのようだが、GitHubと連携するだけで、…