QooQ テンプレート全体 フェードインのCSSカスタマイズ

DarkWorkXによるPixabayからの画像 Blogger

こんにちは。管理人の berry です。「berry105」のブログに訪れてくださいまして、ありがとうございます。

今回は、Blogger無料テンプレートQooQのカスタマイズのご紹介です。カスタマイズの内容はcssのみでサイト全体をフェードインさせて「ブログをお洒落な感じに仕上げて、他とちょっとだけ差をつけられる?」というものです。


Bloggerなび さんの記事を参考に


今回、Bloggerブログのフェードインカスタマイズで参考にさせていただいたのは、「Bloggerなび」さんのサイトです。

いくつかフェードインの記事があったのですが、Bloggerで使える点と、CSSだけでカスタマイズできるという点、また使ってみた結果、こちらで書かれたCSSが一番きれいに表示されるということで、使わせてもらうことにしました。

ということで、参考にさせていただいたBloggerなびさんの記事はこちらになります。


ブログにフェードインをつけよう!【CSSのパターンまとめ】
Bloggerの基本的な操作やカスタマイズ、CSSを用いたデザインについてまとめています。


上から降りてくるパターン 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管理画面の説明画像


③ 「Blogger テーマデザイナー」という画面が表示されます。左側にあるコントロールパネルの「上級者向け」≪「CSSを追加」をクリックすると、CSS書き込みスペースが表示されます。
ここ※に、先ほどコピーしたCSSを貼り付けます。
※下の画像にある赤枠の部分です。

最後に右上の「ブログに適用」というオレンジ色のボタンをクリックすれば完了です。


Blogger テーマデザイナー」という画面の説明画像


まとめ


いかがでしたでしょうか?今回のフェードインは、スマホ表示でも綺麗です。動きがあるだけで、目に留まりやすいですし、読んでもらえる確率も上がるのではないかと思っています。

何故なら、きちんとサイトを作りこんでいるという印象を持ってもらえる=サイト運営に力を入れていると無意識に思ってもらいやすいからです。

しかもコピペででき、HTMLコードはなしなので、作業は一回きりです。

始めてのブログ作りの方でも、ハードル低い方法なので、チャレンジしてみてくださいね^^


スポンサーリンク


   にほんブログ村 ブログブログ ブログノウハウへ

Blogger
この記事を書いた人
berry

2019年、現在アラフィフで外でパートを再開した主婦です。ブログ執筆歴は長く、Wordpressは4年ほどになります。

最近、海外ドラマをAmazonプライムで観まくっています。主人にそそのかされてモンストも少々。アニメは名探偵コナンが好きで、漫画はのだめカンタービレがお気に入り。

ブログの副収入10万円夢見るようになりました。

berryをフォローする
berry105

コメント