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