Akira風ブログカード グラディエーション背景色ふわ~っと変色のCSS配布

2018年10月02日
20
0
Akira風ブログカード

ずっと以前より、弊ブログでメイン的に利用している Akira風ブログカードの、グラディエーション背景色がマウスホバーでふわ~っと変色するタイプ、、、これのCSSの公開を望んでおられる方がおりましたので、、、


Webテク倉庫

FC2ブログのレスポンシブテンプレートで初級Webテクニックを分かり易く解説するブログです。


もっと簡易なCSS装飾で実現しようといろいろと調整して来ておりましたが、なんとか完成致しましたのでそのCSSを公開致します。
完成版は、、、


Webテク倉庫

FC2ブログのレスポンシブテンプレートで初級Webテクニックを分かり易く解説するブログです。


上記のような表示になります ^^

えっ? 『 色が変わっただけじゃん(笑) 』って? (^_^; アハハ…
まあ、見た目はそうですが、実際にはけっこう苦心してCSSを簡素化して、皆さんにも容易に利用して戴けるようにしたんですからねぇ(笑)


下記の枠内をクリックすると全選択モードになりますから、それをコピーすると楽です
/* Akira風ブログカード グラディエーション背景ふわ~っと変色の新色 */

.blogcard-fuwaaa {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1),rgba(96, 226, 226, 1));
  position: relative;
  width: 600px;
  margin: 0 auto;
  margin-bottom: 30px;
  max-width: 100%;
  background-color: white;
  border: 1px solid rgb(211,211,211);
  border-radius: 2px;
  box-shadow: 0 10px 6px -6px rgba(0,0,0,.1);
  padding: 15px;
}

.blogcard-fuwaaa blockquote:before,
.blogcard-fuwaaa blockquote:after {
  content: none;
}

.blogcard-fuwaaa:before { 
  content: ""; 
  display: block; 
  width: 100%; 
  height: 100%; 
  background: linear-gradient(230deg, rgba(96, 226, 226, 1), rgba(255, 255, 255, 1)); 
  opacity: 1; 
  position: absolute;
  top: -0px;
  left: 0px; 
  -webkit-transition: .6s ease-in-out; 
  transition: .6s ease-in-out; 
}

.blogcard-fuwaaa:hover:before {
  opacity: 0;
}

/* カラー背景blockquote消し */
.blogcard-fuwaaa blockquote {
  margin: 0;
  border: 0;
  padding: 0;
  position: static;
}
.blogcard-fuwaaa blockquote:before,
.blogcard-fuwaaa blockquote:after {
  content: none; /* 引用符非表示 */  
}

CSSの利用の仕方

上記CSS全文を、あなたのブログテンプレートの「スタイルシート編集」欄の最後尾にコピペして下さい。
ただし、上記CSSをコピペする前側に、Akira風ブログカードの開発者のAkira先生のデフォルトCSS(元の記述のもの)が予め記述されている必要があります、それがないとこの記事のグラディエーション背景色のふわ~っと変色は利用出来ませんのでご注意下さい。
以前より、弊ブログ記事を利用して背景色のカスタマイズを楽しまれている皆さんでしたら、もう既に同デフォルトCSSはテンプレートに記述済みの筈です ^^

Akira先生のブログカードのデフォルトCSSは、下記ブログカードの記事内で配布されております。


ブログカードのブックマークレットを作成しました

SSL化後の悩ましい作業のひとつ。 ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`) 画像や記事概要など、必ずしもOGPに従っているわけではないもので..


あなたのブログカードで上記CSSを使えるようにする方法

その方法は簡単です。

ブログカード用ブックマークレットで取得したブログカードのHTMLコードをあなたの記事欄に貼り付けてから、、、

<div class="blogcard">
      ↓
<div class="blogcard-fuwaaa">

-fuwaaa の文字列をたった1箇所に追記してあげるだけです、簡単でしょ?
グラディエーション色をアニメーション風にふわ~っと変色させるのって、けっこう大変なんですよ(笑)
あなた流にカスタマイズ派生させて、もっといろいろにグラディエーション背景をふわ~っとお楽しみ下さいね~ ^^


色のカスタマイズを思案中の女の子

[ 次はどんな色にしようかな~♪ ]

あなたのブログはモバイルフレンドリーですか?
Google モバイルフレンドリーテスト

あなたのブログ内分析はGTmetrixが強力です!
GTmetrix


検索からの方はトップページへもどうぞ



関連記事
ぼっちん

Comments 20

There are no comments yet.

mochi  

これはアイディアものですね。

こんにちは。ぼっちんさん。
台風24号は大丈夫でしたか?
富士宮は結構風が強くて、家が時々ミシミシ鳴ってちょっと怖かったです。

僕のブログカードも端がめくれるときにアニメーションをかけているんですが、そういえば背景変色はアニメーションしてなかったなぁ…と、この記事を読んで今更になって気づきました。
何でこんな面倒なCSSになっているんだろうと思ってちょっと調べてみたら、背景グラデーションではアニメーションが効かないということを初めて知りました。

なるほど、それぞれの背景グラデーションを重ねて表示させて、上層のグラデーションに透過アニメーションをかけて、マウスオーバーした時にゆっくり透明になって、下層のグラデーションが見えるようにしてるんですね。
感覚的にはbeforeで書かれたグラデが下層になるように気がしたのですが、あくまでもposition:relative/absoluteの指定に影響されるんですね。
ふむふむ。これはとても勉強になりました。

2018/10/03 (Wed) 00:03
ぼっちん

ぼっちん  

To mochiさん

mochiさん、おはようございます 真夜中にコメントをありがとうございました ^^

台風24号は大丈夫でしたか?
富士宮は結構風が強くて、家が時々ミシミシ鳴ってちょっと怖かったです。

いやぁ、怖かったですね~ (^_^; アハハ…
我が家には縦2.2m×横1.8mの大きな窓があって、そこそこ分厚いガラスが入っているんですけど、それが暴風でククッククッなんて音を立ててきしんで「 割れるんじゃ? {{{{(+_+)}}}}ぞぞぞ~~~ 」なんて、暴風が収まるまで2~3時間恐怖でしたよぉ (^_^; アハハ…
20mくらい離れたお宅のベランダに設置されていたCSアンテナが吹き飛んで、我が家の向かい側のアパートの壁に当たったらしいですよ (^_^; アハハ…
でもおかげさまで1度も停電することもなくて(^。^;)ホッとしました。

何でこんな面倒なCSSになっているんだろうと思ってちょっと調べてみたら、背景グラデーションではアニメーションが効かないということを初めて知りました。
そうなんです(笑) 最初のパターンのものを作ろうとした時に、幾らネットで調べても参考になる情報もまったくなくて、中にはグラデのアニメーションに挑戦してみたものの「出来ないみたいだから諦めた!」なんてブログに書いている人もいたくらいでした (^^ゞポリポリ

なるほど、それぞれの背景グラデーションを重ねて表示させて、上層のグラデーションに透過アニメーションをかけて、マウスオーバーした時にゆっくり透明になって、下層のグラデーションが見えるようにしてるんですね。
さすがはmochiさん ^^ その見立てで合ってますよ~ (^_^)ニコニコ

感覚的にはbeforeで書かれたグラデが下層になるように気がしたのですが、
でしょでしょ、それがbefore/afterの定番的考え方ですよね、でもそれだとアニメーションが利かなかったんです δ(⌒~⌒ι)とほほ...
でも、本来はそれで機能する筈で、、、それが出来ればもっとスッキリと簡素化したCSSで実現出来ると思うんです。
ですから、その辺りをもっと研究してみる余地はあるようです (^^ゞポリポリ
今のままだとレイヤー配置が非常識(笑)で色表現も逆転してしまっている形ですから、新しい配色を考えるときに「あれれ?」なんて面食らうこともあったりして(爆)
mochiさんも、おヒマがある時にでもちょっと考えてみて戴けたらと思う次第です~ ^^

2018/10/03 (Wed) 08:04

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/10/03 (Wed) 10:00
ぼっちん

ぼっちん  

To 鍵コメさん

鍵コメさ~ん、おはよ~です~ ^^
な~んにも凄くないですよぉぉぉ(笑)

ところで、スクショだけ拝見した限りだと、なにやら他のAkira風ブログカードのCSSとバッティング(干渉)して、CSS動作が途中で止まってしまっているような「途中経過」での表示って感じですねぇ (^^;; アセアセ
(~ヘ~;)ウーン なんだろ~ 弊ブログではキチンと表示出来ているから、弊ブログでは取り入れていないCSS構造とのバッティングが考えられるけど (^^ゞポリポリ

それ以上のことは私からは追究出来ないんですけど~ (^^ゞポリポリ

----------
■ 追記
そうそう、もしかして、、、
HTML側に blogcard-fuwaaa ○○○○ のように他の効果のクラス名を追記したりしておりませんか? これが一番怪しいですけど(笑)
その追記した効果のCSSとバッティングしてるような症状に見えますから、とりあえずそれは外して表示確認してみて下さいね~ ^^

2018/10/03 (Wed) 10:09

ロビンソン  

おはようございます

記事を拝読しましたが、cssの仕組みを理解できませんでした (苦笑)
私もこれまでのぼっちんさんのブログカードの記事を読んで背景をグラデーションにしたのですが、ホバーした時にパッと変わってしまうのが気になっていました。
いろいろ調べると、グラデーションは通常のtrasitionの効果がない事が分かり、単色に変更した挫折組です (爆)

スマホからでは意味がないし、ホバーしている事が分かればいいか・・・というレベルです (笑)
それでも、ぼっちんさんのブログカードへの愛情というか思い入れが伝わってきます。

2018/10/03 (Wed) 11:02
ぼっちん

ぼっちん  

To ロビンソンさん

ロビンソンさん、こんにちは ^^

記事を拝読しましたが、cssの仕組みを理解できませんでした (苦笑)
この記事ってすんごくマニアックです(笑)から、深刻にならなくても、気に入ってくださったらコピペして使って戴くだけでも良いんですよ~(笑)

いろいろ調べると、グラデーションは通常のtrasitionの効果がない事が分かり、単色に変更した挫折組です (爆)
当初、私もそこに気がつくまでに2週間くらい掛かったんです (^^ゞポリポリ
ボタン装飾のグラデ+アニメーションの程度でしたら、ネット上にも参考になる記事はわりとあるんですけどどれも参考にはならなくて (^_^; アハハ…

スマホからでは意味がないし、ホバーしている事が分かればいいか・・・
あっ 最近のスマホOSでは画面タッチ操作でホバー効果って表現出来ないことはないんですよ。
でも、私は取り入れる気持ちは今のところ全くないんです、CSSが膨れ上がってしまいますから (^^ゞポリポリ

それでも、ぼっちんさんのブログカードへの愛情というか思い入れが伝わってきます。
いやぁ、嬉しいお言葉をありがとうございます ^^
それも、Akira先生のブログカードのカスタマイズ性の高さから「こういうのはどうだろ?」って、どんどん楽しみが広がってしまうからなんですよ(笑)

2018/10/03 (Wed) 11:21

よつば   

ぼっちん先生~♪

ヾ(^∇^)おはよーございまーす♪

HTML側に blogcard-fuwaaa ○○○○はしてませんよ~!
よつばの「今日も一緒に♪」のほうは、いろんなCSS入れてるからかな?と思って
「Happy moment」のほうにAkira風ブログカードのブックマークレット入れて
ぼっちん先生のCSSも入れて、試してみたんだけどね、マウスを乗せないと表示されないの
記事に貼ったら色が付いただけのカードなの!マウスをカードに合わせたら表示されるの
なので、今回のは残念だけど導入は断念しました(-.-)

2018/10/04 (Thu) 07:55
ぼっちん

ぼっちん  

To よつばちゃん

よつばちゃん、おはよ~です~ ^^

なっ なんと「マウスを乗せないと表示されないの 記事に貼ったら色が付いただけのカードなの!マウスをカードに合わせたら表示されるの」って (^^;; アセアセ
それじゃ、私が公開しているCSSの問題かも (^^;; アセアセ

ねぇねぇ、その実物を実際に見せて下さいな、そしたら検証し易いから (^^ゞポリポリ
スクショだけだと確認出来ない事象だから (^_^; アハハ…
よつばちゃんの最新記事の末尾にでも「テスト中~」なんて感じで追加してぇぇぇ、お願~~~い m(_ _)m
それとね、その時にスマホからはどう見えてますか? パソコンと同じ状態?
もう一つ、私のブログへの引用ブログカードではなくて、よつばちゃん記事の自ブログカードでは正常表示出来ている?

なので、今回のは残念だけど導入は断念しました(-.-)
だめだめ、そんなに簡単に諦めちゃ(笑) もしかして私のミスなのかもしれないんだし m(_ _)m

2018/10/04 (Thu) 08:04

よつば   

ぼっちん先生~♪

記事にして公開したよ~! 

2018/10/04 (Thu) 08:46
ぼっちん

ぼっちん  

To よつばちゃん

おっ なんと素早い!
(〃^▽^〃)oあはははっ♪ ほんとによつばちゃんが言ってる通りだよねぇ、まさにカメレオン状態 (≧ω≦。)プププ
こんなのも面白いかも~(爆)
いやぁ、笑い事じゃなかった (゜゜☆\(--メ)ポカッ

(~ヘ~;)ウーン 私の記事ではキチンと「引用ブログカード」でも表示出来ているのに、、、(^^ゞポリポリ
私のテンプレートのものと記事で公開しているCSSも同じものだし、、、(~ヘ~;)ウ~~~ン

よつばちゃん、研究してみますから、ちょっとお時間下さいね~ m(_ _)m
わざわざ記事にしてくださった「Akira風ブログカード」は、削除しないでそのまま表示しておいて下さいね ^^
お手数をお掛けします~。

2018/10/04 (Thu) 08:57
ぼっちん

ぼっちん  

To よつばちゃん

よつばちゃん、あのね、CSSの上部
-----------
.blogcard-fuwaaa {
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1),rgba(96, 226, 226, 1));
position: relative;
width: 600px;
margin: 0 auto;
margin-bottom: 30px;
max-width: 100%;
background-color: white;
border: 1px solid rgb(211,211,211);
border-radius: 2px;
box-shadow: 0 10px 6px -6px rgba(0,0,0,.1);
padding: 15px;
}

.blogcard-fuwaaa blockquote:before,
.blogcard-fuwaaa blockquote:after {
content: none;
}
----------

以上の部分を

.blogcard-fuwaaa {
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1),rgba(96, 226, 226, 1));
position: relative;
width: 600px;
margin: 0 auto;
margin-bottom: 30px;
max-width: 100%;
background-color: white;
border: 1px solid rgb(211,211,211);
border-radius: 2px;
box-shadow: 0 10px 6px -6px rgba(0,0,0,.1);
padding: 15px;
}
/* float親要素 */
.blogcard-content {
margin-bottom: 5px;
overflow: hidden;
position: relative;
z-index: 3;
}
.blogcard-fuwaaa blockquote:before,
.blogcard-fuwaaa blockquote:after {
content: none;
}

と差し替えて様子をみて下さいね。

2018/10/04 (Thu) 09:41

よつば   

ぼっちん先生~♪

差し替えてみたよ~!
イイ感じだけど左下のブログ名のとこがマウスオンしないと出ないよ

2018/10/04 (Thu) 10:11
ぼっちん

ぼっちん  

To よつばちゃん

うんうん(^-^) 了解だよ~(笑)

じゃあ、もう一箇所(ブログカードのフッター表示部分)の修正をするから、もうちょっと待っててね~
いま急な訪問者が来ちゃったもんだから (^^ゞポリポリ

午後にでも修正版を提示させてもらいますから、首を長~~~くして待っててね~ (^_^; アハハ…


2018/10/04 (Thu) 10:20
ぼっちん

ぼっちん  

To よつばちゃん

あのね~ 

いま極秘コメント(笑)しておきましたからね~ (≧ω≦。)プププ
そちらの、よつばちゃん専用CSSと差し替えをしてくださいね~ ^^

よろしくです~ ('◇')ゞ

2018/10/04 (Thu) 12:43

よつば   

ぼっちん先生~♪

ありがと~💕♪ バッチリです v(*'-^*)-☆ ok!!

2018/10/04 (Thu) 13:27
ぼっちん

ぼっちん  

To よつばちゃん

うんうん(^-^) 良かったですね~ (^。^;)ホッ

お手数をお掛けしました~ ジャンジャン活用してくださいね~ (笑)

2018/10/04 (Thu) 13:36

mochi  

ネタ・・・ (^▽^;)

こんにちは、ぼっちんさん。
ぼっちんさんのCSSとは違う組み方でグラデーションのアニメーション?をムリヤリやってみました。

考え方としては分かりやすいように思うのですが、ムダに長いのと字面的に難読性が高まってしまいました。
とりあえず僕のブログのトップページだけ試しにやってみてありますが、段階的に切り替えているだけなのでフワ~とはしてない感じもします。
もっと経過時間%毎の処理を細かくしていけば、いつかはフワ~ってしてくれるんじゃないかと・・・ ヾ(・・;)ォィォィ

.blogcard:hover {
:
(省略。。。)
:
/* マウスオーバーした時のアニメーション指定を追加 */
-webkit-animation: blogcard_anime 1s linear;
}

/* アニメーション処理を追加 */
@-webkit-keyframes blogcard_anime {
/* 変化前のグラデを表示 */
0% { background: linear-gradient(rgba(248, 255, 255,1), rgba(255, 255, 255,1)); }

/* 上位レイヤーに変化後のグラデを不透明度0.1で表示 */
/* 下位レイヤーに変化前のグラデを表示 */
10% { background:
linear-gradient(rgba(200, 255, 255,0.1), rgba(240, 255, 255,0.1)),
linear-gradient(rgba(248, 255, 255,1), rgba(255, 255, 255,1)); }

/* 上位レイヤーに変化後のグラデを不透明度0.2で表示 */
/* 下位レイヤーに変化前のグラデを表示 */
20% { background:
linear-gradient(rgba(200, 255, 255,0.2), rgba(240, 255, 255,0.2)),
linear-gradient(rgba(248, 255, 255,1), rgba(255, 255, 255,1)); }
:
:
(省略。。。)
:
:
/* 上位レイヤーに変化後のグラデを不透明度0.9で表示 */
/* 下位レイヤーに変化前のグラデを表示 */
90% { background:
linear-gradient(rgba(200, 255, 255,0.9), rgba(240, 255, 255,0.9)),
linear-gradient(rgba(248, 255, 255,1), rgba(255, 255, 255,1)); }
}

2018/10/04 (Thu) 22:06
ぼっちん

ぼっちん  

To mochiさん

mochiさん、おはようございます ^^

拝見しましたよぉぉぉ、なんとも緻密なテクニックで、とってもご苦労なさったでしょうねぇ (^-^)//""パチパチパチ
10%ずつステップ分けして、その中を更にスムースに変色するように緻密な配色をセットしてアニメーション的見え方にする、なるほど~って驚きです♪
これ、しっかりリスト化したコーディングして、上から順に神経使って濃度調整していかないと実現出来ないですよね ^^
私は何分にも面倒くさがり屋(笑)ですから、楽をすることばっかり考えますから、私ではこれはムリです (^_^; アハハ…

ただ、気になるのはマウスが離脱してから、一気に背景色がスパッと元に戻っているんですけど「逆再生(笑)」して、少しずつ原色して行くことはなさらないんでしょうか? もっともそれまで含めるともの凄く重たくなってしまいますから割り切って「やらない」のかとも思いますし、前半のアニメーション的変色が「1s」にセットなさっておられますから、都合「2s」必要になって現実的ではなくなってしまうでしょうから、やっぱり「割り切ってやらない」ってことでしょうね (^_^)ニコニコ 

これだけ細密に色変化をセットなさっておられますから、私がセットした「.6s」程度でも綺麗に色変化を表現出来るんじゃないかとは思いますけど (^_^)ニコニコ 
いやぁ、実に力作で凄いですねぇ ('◇')ゞ

2018/10/05 (Fri) 07:49

mochi  

いやいやそんな細やかな事やってないですって

こんにちは。ぼっちんさん。

どうもぼっちんさんは僕の事を課題評価しすぎるところがあるようで、とても光栄ではあるんですけど、僕に緻密な配色なんて出来ないってば。(^▽^;)
backgroundの複数指定を利用して変化前と変化後のグラデーションを重ねて、上層レイヤーで表示されているグラデーションの不透明度を変えているだけで、RGB値はみんな一緒ですよ。
結局、linear-gradientの要素では自動的に徐々に変化していくようなアニメーションは僕にできなかったんですよ。

だもんで、不透明度を濃くしていったグラデーションを紙芝居のように切り替えて表示させているだけなんです。
静止画をコマ送りさせるgifアニメのようなイメージです。
10%~90%の部分はほとんどコピペで記述していくことできますが、あまりにも機械的な作業すぎるのでCSSにfor文が欲しくなります。
いずれにしてもネタレベルのものでCSSのムダ使いでしかありません。

>ただ、気になるのはマウスが離脱してから、一気に背景色がスパッと元に戻っているんですけど…

あぁそうですね。全然意識してませんでした。ヾ(・・;)ォィォィ
というぐらい僕も大雑把な性格なんですよ。
そもそも力作が出来てたら、コメントじゃなくて自分のブログで紹介するようにしますよ。 (^▽^;)

2018/10/05 (Fri) 20:55
ぼっちん

ぼっちん  

To mochiさん

mochiさん、おはようございます ^^

どうもぼっちんさんは僕の事を課題評価しすぎるところがあるようで、とても光栄ではあるんですけど、僕に緻密な配色なんて出来ないってば。(^▽^;)
いえいえ、けっしてヨイショ♪なんてしてませんよ~(笑) その根性あるコーディング努力に、ほんっとに「凄い!」って思ってるんですから♪

静止画をコマ送りさせるgifアニメのようなイメージです。
10%~90%の部分はほとんどコピペで記述していくことできますが、あまりにも機械的な作業すぎるのでCSSにfor文が欲しくなります。

うんうん(^-^) 解ります解ります、CSSじゃ無理ですけど「SCSS」だったらfor文組めますからねぇ、でも残念ながらFC2ブログサーバーじゃ動かないから「も~!」って思っちゃいますよね (^^ゞポリポリ
あっ きっと多分WordPressが動いてるサーバーだったらSCSSも使えるでしょうから、WordPressしてる人にはチャレンジしてみてもらいたいテクニックですけどね~ ^^

そもそも力作が出来てたら、コメントじゃなくて自分のブログで紹介するようにしますよ。 (^▽^;)
(〃^▽^〃)oあはははっ♪ もしmochiさんご自身で「完成したぞぉ♪」って納得出来るところまで極まったら、是非に公開してくださいよ~ (^_^)ニコニコ

2018/10/06 (Sat) 07:56

Leave a reply