ブログの改善点とか
このブログでテンプレートから変更したところを解説します。
ブログの改善点
このブログはテンプレートを拝借して作ったのですが、もちろん色々書き換えました。
今回は書き換えた部分についてご紹介します。自己満足ですがどうぞ。
改良（自分好みの改造）
Homeに文章を追加
これはブログ用のテンプレートなので、最初に文章が出ないのですが、私はホームページとして使いたかったので書き替えました。
数か所書き換えて画像と文章が出るようにしました。
GIF画像のせいで読み込みが遅くなっていますが、結構気に入っているしもともとが恐ろしく早いのでそんなに問題になると判断しませんでした。実環境で1秒ぐらいですし。
カテゴリーが「All」のときのみ表示します。それ以外のときに表示しっぱなしでも別に良かったのですが、どうやらURL遷移を伴うらしくページの一番上までスクロールしてしまうんですよね。「いやそこコンポーネントにして書き換えてるんじゃないんかい…」と思いましたが、制約があるのかもしれません。
JSでスクロールさせようとしたのですが、最終的に失敗したためこの仕様にしました。
ページ追加
ProfileとAboutを分けたかったので増やしました。tsxファイルはまるごと中身コピーして名前だけ変えました。多分テンプレートファイルを作るのが正統派なんだと思いますが、めんどくさかったのでやりませんでした。その辺のことがよくわからないのにGatsbyを選んだのは正直アホだと思います。
Markdownで画像の中央揃えをデフォルトに
見た目を重視したいので変更しました。文章中に画像を入れたいときは<img>を使用するので問題ありません。みたいにすれば中央に画像が来るようになります。
透過PNGがダークテーマで勝手に背景が白になるのを修正
よくわからなかったのでstyles/markdown.tsに!importantをつけたCSSを書いて無理やり直しました。多分良くないやり方なので、いつかちゃんと直そうと思います。
+ box-shadow: none !important;box-shadowで背景真っ白にすることってできるんですね。
しかもこの方法だと画像を保存したときは背景が透明になります。賢い。でも邪魔だったのでバイバイ。
ブログ記事の画像を指定しなかったとき、デフォルト画像を指定するように
これをしたところGraphqlから返ってくるDataがぐっちゃぐちゃになって、設定次第で謎のタイミングでエラーを返すようになりました。バグるので直したいのですが、バグの内容が意味不明なので直せません。正直お手上げです。
バグ修正
箇条書きの点と数字が出ないのを修正
- こんな
- 感じで
- 出てくるやつの
- 番号とか点が
出なかったので修正しました。CSSに変なところがありました。
ol {
list-style-type: decimal;
}
ul {
list-style-type: square;
}単純にこいつらが欠落してました。でも普通は何も書いてなかったらデフォルトで出てくるもんなんじゃないんですかね？不思議ですね…
og:image関連のバグ
SNSにサイトをぶちあげたときに画像が一切でなかったバグを修正しました。ついでにデフォルト画像が設定されていないときの挙動も修正しました。
Commitしようかな？
改造したのはこんな感じなのですが、せっかくバグ修正したので貢献してみるのもいいかな、とは思っています。
ただこのアカウントはリアルとは完全に切り離しているため、すごいCommitしてもリアルでの名声は高まりません。悲しいものですね。「Blue Triangle」名義で仕事受けてみようかなと思わなくもないです。
目的としては使わせていただいたテンプレートへの貢献なので、別にいいかなとも思っています。歯切れが悪いですね。
コーヒーを頭にかける
