ブログを修正しました！

Next.jsとmicroCMSで作成したJamstackブログを修正しました。

4 May, 2024

修正点

先日作成したブログ作成後に気になっていた以下の箇所を修正しました。

カスタムclass反映
・microCMSのカスタムclassが反映されるように修正
ホバー時のエフェクト追加
・ブログカードをホバーした際のエフェクトを追加
・ヘッダーのリンクをホバーした際のエフェクトを追加
aタグのスタイル修正
・ホバー時のエフェクトを追加
・aタグの先頭にリンクのアイコンを付与

※プログラムソースはGitHubを参照してください。

1. カスタムclass反映

■カスタムclassとは

microCMSでは「カスタムclass」というものが使用できます。

下記、microCMSの公式記事の内容です。

カスタムclassはテキストに任意のclassを適用できる機能です。
文字にハイライトやマーカーを付けたり、文字色を付けたり、サイズを変更したり...と、対応できることの幅が非常に広く、非常に汎用性高くリッチエディタ内のコンテンツに装飾を追加することができます。

■カスタムclassの設定方法

私はとりあえず文字色を指定するカスタムclassだけ設定しています。

setting_of_custum_classes — カスタムクラスの設定内容

ブログ記事のcssファイルに下記を記述し反映します。

/* custom classes*/
.content>p span[class="tcr"] {
  color: rgb(255, 0, 0);
}

.content>p span[class="tcb"] {
  color: rgb(42, 167, 250);
}

.content>p span[class="tcy"] {
  color: rgb(255, 255, 0);
}

.content>p span[class="tcg"] {
  color: rgb(65, 235, 32);
}

後はリッチエディタの「カスタム」から、設定したカスタムclassを任意の文字に適応して完了です。

rich_editor — リッチエディタにてカスタムクラスを設定するキャプチャ

2. ホバー時のエフェクト追加

ブログ一覧のカードや、ヘッダーのリンクをホバーした際にエフェクトがなく味気がないためエフェクトを追加しました。

2-1. ブログカードをホバーした際のエフェクトを追加

ホバー時に、ブログカードふんわりと浮き上がるようにし、影も付けました。

.link {
  display: flex;
  gap: 40px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .13);
  transition: all 0.3s ease 0s;
}


.link:hover {
  box-shadow: 0 4px 20px rgb(192, 192, 192, 0.25);
  transform: translateY(-5px);
}

2-2. ヘッダーのリンクをホバーした際のエフェクトを追加

ホバー時に文字色が変わるように変更しました。

 .about {
   transition: color .5s;
 }
 
 .about:hover {
   color: aqua;
 }
 
 .blog {
   transition: color .5s;
 }
 
 .blog:hover {
   color: aqua;
 }
 
 .search {
   transition: color .5s;
 }
 
 .search:hover {
   color: aqua;
 }

3. aタグのスタイル修正

3-1. ホバー時のエフェクトを追加

ホバー時に、リンクの文字色が変わるように変更しました。

また、リンクの下線も追加しました。

 .content a {
  position: relative;
  display: inline-block;
  transition: .3s;
  }

 .content a::after {
   position: absolute;
   bottom: 0;
   left: 50%;
   content: '';
   width: 0;
   height: 2px;
   background-color: #ffffff;
   transition: .3s;
   transform: translateX(-50%);
 }

 .content a:hover{
   color : #00e1ff;
 }

 .content a:hover::after {
   width: 100%;
 }

3-2. aタグの先頭にリンクのアイコンを付与

リンクだとわかりやすくするために、リンクの先頭にアイコンを付与しました。
アイコン用のSVGファイルをpublicフォルダ配下に格納する必要があります。

 .content a {
  position: relative;
  display: inline-block;
  transition: .3s;
  padding: 0 0 0 20px;
  background: url(../../../public/link-icon.svg) no-repeat center left;
 }

その他

他にも下記の細かい修正を行いました。

ブログ詳細ページのh1タグのcssを修正
ブログカードのCSSを修正（画像サイズの変更）
ブログ一覧ページに記事の総件数を表示する
ブログ一覧ページの検索バーの削除
ヘッダーに「検索ページ」の遷移リンクを追加

今後の修正点

今後は下記の内容を修正していきたいと思っております。

OGP画像の生成
リアルタイム検索機能

また、Lighthouseの結果はこんな感じになっています。

結構いいスコアで驚きました。。。

悪い箇所は原因特定して改善していきたいですね～