当サイトにお越しいただきまして、ありがとうございます。とてもうれしく思います☆不思議な話系から、ハウツーまでいろいろサイトで語りたいhukuです。
今回は、Blogger無料テンプレートQooQのカスタマイズのご紹介です。カスタマイズの内容はcssのみでサイト全体をフェードインさせて「ブログをお洒落な感じに仕上げて、他とちょっとだけ差をつけられる？」というものです。Bloggerなび さんの記事を参考に
今回、Bloggerブログのフェードインカスタマイズで参考にさせていただいたのは、「Bloggerなび」さんのサイトです。
いくつかフェードインの記事があったのですが、Bloggerで使える点と、CSSだけでカスタマイズできるという点、また使ってみた結果、こちらで書かれたCSSが一番きれいに表示されるということで、使わせてもらうことにしました。
ということで、参考にさせていただいたBloggerなびさんの記事はこちらになります。
上から降りてくるパターン CSSを使ってみた
今回、参考にさせていただいた記事には、3つのパターンが紹介されていたのですが、この中の上から降りてくるというタイプを選びました。
フェードインは、依然使っていたWordpressテーマアフィンガーでカスタマイズ設定できる機能のひとつだったのですが、お気に入りの機能でした。そのとき、確か「上から降りてくるパターン」だったような気がするので、この手法を選択。(うる覚えです。(;’∀’)…)
紹介されていたCSS
もしも、これを読まれて使ってみようかな？という方は、実際にBloggerなびさんの記事もチェックしてみることをおススメします。何故なら、3つのパターンのデモをその場で見られるためです。
（アニメーション手法というやつでしょうか？私もこの手法を学びたいところなのですが…(;’∀’)…）
とりあえず、実際に使っているCSSのみをこちらの記事でも紹介させてもらいます。
下記のソースコードをコピーして、CSS書き込みに貼り付けると完了です。
↓↓↓ ↓↓↓
body {
animation: fadeIn 1s ease-in 0s 1 normal;
-webkit-animation: fadeIn 1s ease-in 0s 1 normal;
}
@keyframes fadeIn {
0% {opacity: 0; transform: translateY(-60px);}
100% {opacity: 1; transform: translateY(0px);}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0; transform: translateY(-60px);}
100% {opacity: 1; transform: translateY(0px);}
}bloggerのCSS 貼り付ける場所
① bloggerの管理画面にある左サイドバー≪テーマを選択。
②「カスタマイズ」というオレンジ色のボタンが表示されますので、そちらをクリックします。
③ 「Blogger テーマデザイナー」という画面が表示されます。左側にあるコントロールパネルの「上級者向け」≪「CSSを追加」をクリックすると、CSS書き込みスペースが表示されます。
ここ※に、先ほどコピーしたCSSを貼り付けます。
※下の画像にある赤枠の部分です。
最後に右上の「ブログに適用」というオレンジ色のボタンをクリックすれば完了です。
まとめ
いかがでしたでしょうか？今回のフェードインは、スマホ表示でも綺麗です。動きがあるだけで、目に留まりやすいですし、読んでもらえる確率も上がるのではないかと思っています。
何故なら、きちんとサイトを作りこんでいるという印象を持ってもらえる=サイト運営に力を入れていると無意識に思ってもらいやすいからです。
しかもコピペででき、HTMLコードはなしなので、作業は一回きりです。
始めてのブログ作りの方でも、ハードル低い方法なので、チャレンジしてみてくださいね＾＾
コメント