自分のビジネスを持ちたい女性を応援する富ぃブログ

置かれた場所で咲けなかった「ひーさん」が自分の居場所を見つけるまでの物語

【SKT Girlie Lite のカスタマイズ】4つ横並びの画像が出るの遅いんだけど。。。

   

このテーマ、とっても素敵でとっても気に入ってるんですがひとつ困ったことがあります。

 

ページを開くと横幅いっぱいの大きなトップ画像がバンっと目に飛び込んで来ます。

 

写真が完璧ならかなりのインパクト!

 

次に、訪問者が画面をスクロールさせると4つ並びの画像がふわっと現れるはずが。。。遅っ!!

 

なんとまあ、ふわっと出るのが2秒後なんですね( ´Д`) 2秒ってけっこう長いよ。。。

 

下手したらスクロールされて訪問者の目に入らないことも十分あり得ます。

 

ちょちょ、ここを見て欲しいのに。ちょっと待って〜!!って気分でしょう。

 

ふわっと現れる画像の表示速度を変える

 

私はコードの編集になると蕁麻疹が出る人だし、下手にいじって表示が崩れでもしたら大変ですからね。

 

ここはプロに聞いて来ました。知り合いにそういった方がいるわけじゃあないですよ。ココナラというサービスで聞けばいいだけです。

 

私は今まで何度かコードの編集をしたことがありましたけど、全てワードプレス内でできました。外観→テーマの編集から全て行えると思っていました。

 

が、今回そうではないということを知れたのは良かったです。ずっと回答者の方とすれ違いが起きていたのはそのためでした。

 

css/animation.css を編集してくださいと回答者の方に言われたものの、そんなものはない。

 

cssですよね??

 

いやいや、だからcssの中のanimation.cssだってば!というやり取りが続いた後で、

 

style.cssではなく、animation.cssと言うスタイルシートになります。
WordPressの管理画面経由にて編集が不可能な場合は、FTPにて該当ファイルをPCにダウンロードし編集する形となります。

1.FTPで接続後、
2.ワードプレスのディレクトリ
3.wp-content/themes/ご使用中のテーマ名
4.css/animation.css

 

ここで初めてワードプレス内で編集できないものがあることを知ります。

 

サーバーにログインしてffftpで接続して中身を見たところ!!あった!!あった!css/animation.css があった!!と感激。

 

この中で、フェードインは、fadeInと言うプロパティを使用しますが、これは単に透過0から透過1(なし)にする効果となります。

また、アニメーションと言う、animation プロパティを使用して、animation-duration にて何秒かけてフェードインするかを決めています。

1S=1秒となります。

2箇所していしていて、1Sと2Sになっています。

 

へー、そんな仕組みになってるんだ(°_°)

 

2箇所コードを編集しました。ふたつとも0.5Sにしたら、ふわ〜っ→ふわっとくらいになりました 笑

 

サイト訪問者が見逃すこともないでしょう。

 

今回のカスタマイズは達成感が半端なかったです٩( ‘ω’ )و

 - ワードプレスのお勉強