新しいものは取り入れてみたいと考えているうえの(@uenoyou111)です( ˘ω˘)
最近ヘッダー画像とかタイトルがすぅっ…と上やら下から動いてくるアニメーションのブログ増えましたよね?
しかもグラデーションがすごくきれい( ゚д゚)
今までスルーしてたのですが、ふと思い立って取り入れることにしました!
ついでにフォローボタンもグラデーションで作ってみたので、コードも公開してみようと思います。
すぅっと現れるアニメーション
まずこの舞い降りてくるアニメーション、こちらは記憶を頼りにオークニ(id:a24o92)さんが公開してた記事を参考にしました。
こちらの記事から引っ張ってきたのをそのまま使ったのですが、ヘッダーと記事タイトルしか動かない。
ZENO-TEALは全文表示なので多分、命令する場所が違う?
と思い検索し、.page-archiveを.page-index, .page-entryに変更するも今度はヘッダーが動かなくなる。
分からん?(゚∀゚)
ということで、スマホから見れば記事一覧は隠れるしヘッダー周りだけ動かすようにしました。
実際に使ってるのはこちらのコードです。
こちらをデザインCSSに貼り付けるだけでヘッダー周りと記事タイトルがスゥッと動きます。
アニメーション設定endより下にあるアニメーション名を変えると、各項目でお好みの動きになります。
例)
animation-name: SlideDown
↓
animation-name: RightToLeft
に変えると、上から下へ動いたアニメーションが右から左になります。
ページ速度について
アニメーションを追加したらどれぐらいページの表示速度に影響が出るか?という部分で調べてみました。
まずは有名どころのPageSpeed Insights。こちらはGoogleから提供されているツールで、詳細なスピードは出ませんが100点満点でどれぐらいか評価してくれます。
スマホはいいのですが、そもそもパソコンだと重いですね~。これ、アニメーション抜いても点数が変わらなかったです。
てことは、SEO上はそんなに影響なし?詳細な表示時間をチェックすべきと思い、お次はこちら。
これもGoogleから提供されているツールで、2017年から提供開始しているそうです。
まずアニメーションなしだと…
6秒。お次はアニメーション加えてみると…
7秒!推定離脱率が2%影響出てますね、これを大きいと見るか小さいと見るか…。
個人的には読み込み速度1秒の差であれば、アニメーション表示の方がなめらかに表示されていて1秒以上の快適さがあるように思えますね~。
読み込み速度と視覚的な快適さは別だと思います、読み込み時間が長くてもNow Loadingの表示があると待てるみたいなアレに近いかと。
グラデーションについて
これさっぱりだったんですけど、色を指定できる命令があるんだからそこにグラデーションのコードを突っ込めば変わるんじゃない?
と安易に思い、まずはグラデーションのコード探しの旅に。
すると以前ボタン関係で大変参考にさせていただいたサルワカ(@saruwakakun)さんの記事を発見。
うーん?(゚∀゚)
一通り読んで名前が一緒のとこにこれ入れたらグラデるんじゃないか?と思い、試しに同じ指定のコードを参考に。
で、グローバルメニューの色指定に突っ込んでみると…。
変わった!これだ!
ということで明るすぎますので、後は色コードを替えて左から右に明るくなるようにしつつ斜めに指定して。
こんな感じに変更。全体統一して右側が明るい…みたいな感じにグラデ。大変満足なのでもう終わりにしたい。
デザインCSSで、変更したいバックグラウンドカラー指定のとこにこれ突っ込めばイケるっぽい?です。
ここの65degは角度指定で、0から180まで指定できます。
他にも開始位置、終了位置が決められるみたいです。詳細は上記リンクよりご確認を。
あと三色も組み込めますが、まずはこれでいいかなって思ったのでこんな感じです。
フォローボタンについて
以前、このフォローボタンもいくつかのコードを組み合わせてそれっぽく作ったものです。
試しにTwitterのフォローボタンだけ公開です。動作保証はできませぬ。
Twitterのフォローボタン
こんなボタンが出来上がります。画像なのでポチッと出来ません。
上から下に明るくなるようにしてます。コードは以下になります。
こちらをコピーしてデザインCSSに貼り付けです。
ちなみにカスタマイズをされたい方は横に書いてあるので、幅やら高さを変えられるようになっています。
下線は消す、の下にあるbackground-image以降はグラデーションになるので、カラーコードを開始位置→終了位置の順で変更して下さい。
border-bottomが影になる線になりますので、こちらも色に合わせて暗めの色を指定して下さい。
グラデーションを作成できるサイトとかもありましたが、いまいち使い勝手が悪かったのでカラーピッカーで探しながら作ってます(´・ω・`)
アニメーションは一周回転になってますが、ホバーで一周回転より下のコードを変更すると動きが変わります。
例えばこれに置き換えると、タッチorマウス乗せで横にスーッ…と動くようになります。
これはこれでいいかも。
HTMLを準備
CSSで形を作ったので、次に表示させる為のHTMLを準備します。
自分のブログドメインと自分のTwitterアカウントの@を抜いた部分を変更していきます。
自分のブログドメインは、まず自分のブログのトップページを開きましょう。
この赤枠内の文字をコピーし、自分のブログドメインと記載している箇所に貼り付け。
残りはTwitterアカウントのアットマークを抜いて入力でござます。
サイドバーに貼り付け
次に設定画面を開き、サイドバーを選択。
一番下のモジュールを追加を選択し、下の方にHTMLという欄があるのでそちらをクリック。
そこにこんな感じで打ち込みます。
するとこんな感じに。
目立ちますねぇ~Twitterだけでもこのボタンがあると押したくなっちゃうかも(*´∀`)
あ、気軽にフォローお待ちしてますの文言は自由に変更可能です。
ちなみに全体的に右側が明るくなるようなグラデですが、ボタンだけはくっきり影を付けて明暗を逆にしています。その方が逆に目立つでしょ?(安直な考え
まとめ
CSSの知識ないままに試行錯誤でやってみたものばかりなので、お使いのテーマや環境によっては再現できない可能性もございます。
もし参考にしてくださる方がいましたら、あくまで自己責任というところでコードのバックアップは必ず取りながら変更して頂けると嬉しいです。
また、なにかご指摘あれば教えて頂けると幸いですm(_ _)m
…しかし楽しい!半年前の、シェアボタンを導入するだけで一日以上かかってたあの頃が懐かしい。
毎回カスタマイズする度にちゃんと勉強しなきゃなぁ~って思いつつしてないので、こちらも徐々に考えて行こうと思う次第です。
グラデーションとかアニメーションもほんのちょこっと取り入れてる、というだけなので劇的な変化はありません。
しかし、ちょっと小洒落た感じが出るのでお気に入りです。
快適なカスタマイズライフを!
ではでは(`・ω・´)ゞ