GatsbyJSで作っているブログの前の記事と次の記事へのリンクにアイキャッチが付くようにしていい感じにした
モチベーション前の記事、次の記事の部分がスターターのスタイルのままになっていて、手を付けられていなかったので、スタイルを当てていい感じにしたかった。 Before After デザイン今回もアイキャッチコンポーネントを組み合わせるデザインとした。前の記事は左側に、次の記事は右側にアイキャッチが来るようにして前と次を表現した。 アイキャッチコンポーネントが汎用性が高く、記事のリンクを張る際に使いやすいので、用意しておいて良かった。 GatsbyJSで作っているブログでアイキャッチが自動でいい感じに付くようにした やったことまず、アイキャッチコンポーネントに渡す記事に紐づくタグ一覧が、前の記事、次の記事に関しては取得できていなかったので、 gatsby-node.js のGraphQLのクエリにtagsを追加して取れるようにした。 そして、下記のような PreviousAndNextPosts
GatsbyJSで作っているブログのFOUC対策をした
FOUC とはFOUCとは、flash of unstyled contentの略で、CSSが適用されていない状態が一瞬表示された後にCSSが適用されることでチラつく現象のこと。 事象このブログにおいては、ヘッダーの部分がリロードを繰り返す度にロゴがガタっとなって、チラついていた。 やったことちょうどヘッダーだけMaterial-UIのコンポーネントに変えていたので、GatsbyJSとMaterial-UIの組み合わせが怪しそうだということで、調査してみるとまさしくなIssueがヒットした。 Flicker of Unstyled Content (FOUC) with Gatsby and Material UI · Issue #15097 · gatsbyjs/gatsby その中でGatsbyのコントリビュータの対応策のコメントを見つけた。SSRするページでMaterial-UIの
GatsbyJSで作っているブログにMaterial-UIを導入した
モチベーションFlutterを触るようになってMaterial Designなコンポーネントを扱う機会が増えたので、Material Designなコンポーネントに触れる機会を増やしたかったMaterial-UIの0系の頃に触って以来だったので、触ってみたかったSemantic UIの開発が止まってしまっており、本家からフォークされたFomantic-UIの開発も進んでいるが、将来的に統合されるかも不透明という背景もあり、乗り換え先を探していたやったことMaterial-UIのインストールヘッダーをMaterial-UI製にしてみたAppBarを使うシャドウが濃かったので、調整したスマホで見た時に記事の読むスペースをなるべく広げられるように、よくある、下にスクロールしたら上にヘッダーが隠れて、隠れている最中に上にスクロールしたらヘッダーが出てくる挙動にしたnoteとかもこういう挙動おわりに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
