iiie.nagoya

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

【'19/07/13】
当ブログで使用しているカスタマイズテーマ『riseup』をテーマストアで公開しました。はてなブログを使用している方なら無料でインストールすることが可能です。(はてなProでの利用を推奨しています)

詳細は以下のページに記載しています。
https://www.iiie.nagoya/entry/2019/07/13/210356

ブログテーマページはこちら
http://blog.hatena.ne.jp/-/store/theme/17680117127217464048

【riseup】記事一覧時のカード表示モーションをカスタマイズする

f:id:gorislog:20190714163706p:plain

 

riseupのテーマカスタマイズ記事です。

 

riseupでは、記事一覧表示(アーカイブやカテゴリー一覧も含まれますが)で、表示する際にカード型デザインを採用していて、俗にいう「ふわっと」した表示になるよう動作指定がされています。

 

その「ふわっと」表示する際のモーションをカスタマイズする方法を作りましたので、掲載します。

 

使い方

f:id:gorislog:20190727213419p:plain

 

ダッシュボードより、「デザイン」画面を開き、「カスタマイズ(スパナマーク)」を選択、一覧より、「デザインCSS」を選択し、白い領域を選択し、そこにコードを追記します。

 

追記する際は、記述されている内容の一番下にコピー&ペーストすればOKです。

 

①指定した方向からスライドさせる

 

.page-archive .archive-entry {
transform: translateX(20px);
transition: all 1s;
overflow: hidden;
}

 

上記のコードを追加すると「右から左」へ動くモーションに変更されます。

 

transform: translateX(20px);の『X』が横方向の指定、『20px』が移動量です。

もし、「左から右」へ動くモーションへ変更する場合は、transform: translateX(-20px);へ変更すれば、横方向へ-20px動くという指令となり、左から右へモーションが動きます。

 

overflow: hidden;は横方向へモーションをさせる際に、表示領域外のものは見えなくするコードです。これを追記しないと、スマホで無駄な領域が表示されます。デフォルトや、縦方向の移動の場合は不要です。

 

transform: translateY(20px);がデフォルト(下から上)の指定で、transform: translateY(-20px);と変更すれば、上から下へ動くモーションへ変更されます。

 

また、『20px』の移動量の数値を変更すれば、大きなモーションに変更できますが、スマホなどのモバイル端末では見づらいデザインになりますので、数値を大幅に大きくするのは推奨しません。


② 左右交互に横からスライドするモーションへ変更する

f:id:gorislog:20190727215543g:plain

 

.page-archive .archive-entry {
margin-bottom: 2em;
margin-left: auto;
margin-right: auto;
line-height: 1.3;
opacity : 0;
overflow: hidden;
}
.page-archive .archive-entry:nth-of-type(odd){
transform: translateX(-40px);
transition: all 1.5s;
}
.page-archive .archive-entry:nth-of-type(even){
transform: translateX(40px);
transition: all 1.5s;
}

 

左右交互にカードが表示されるデザインです。一列カード型デザインですので、上から奇数・偶数の指定で左右を交互に動作させるようにしています。

 

おわりに

なにか面白いモーションがあったら追加するかもしれません。

 

いまさらですが、riseupってなによ?という方は以下の記事にてはてなブログのテーマ「riseup」について、紹介記事を書いています。

 

www.iiie.nagoya