iiie

物づくりと生活、"経験"を記事へ

カード型レイアウトの『記事カード』にモーションを追加する【gram】

f:id:gorislog:20190407194632p:plain

 

はてなブログテーマ『gram』のカスタマイズ記事です。

 

gramsample.hatenablog.jp

 

カードにモーションを付ける

gramでは、デフォルトでブログタイトルにモーションを付けています。

このカスタマイズでは、モーションを記事一覧表示時のカード部に付けるものです。

 

f:id:gorislog:20190503075520g:plain

 

動きの幅は多くはありませんが、ページ表示時に動きが追加されるので、目を引くデザインになります。

 

しかし、記事一覧表示+カード型レイアウトは、画像読み込み量が多くなるため、ページ表示速度によっては不自然な表示になる可能性があります。

 

投稿画像の最適化(次世代フォーマット)や、画像容量の圧縮などの対策が必要になります。読み込み負荷が高い場合には導入の取りやめをお勧めします。

 

やり方

 

動作のキーとなるコードは、格納されているので、以下のコードをデザインCCSに追記するだけで実装できます。

 

.page-archive .archive-entries {
animation-name: SlideUp;
animation-duration: 2s;

 

f:id:gorislog:20190503080214p:plain

 

  • デザインより、カスタマイズ(スパナマーク)を選択
  • デザインCSSをクリック
  • 表示された領域をクリック

 

f:id:gorislog:20190503080313p:plain

 

  • 上記のコードをコピーし、ペーストする
  • 変更を保存する