Akira風ブログカード カメレオン背景色のCSS配布

2018年10月11日
18
0
Akira風ブログカード

先日、弊ブログで下記のブログカードの記事を書いたんですよね。


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

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

[ デフォルトのブログカード ]


その時に、ブログ友達のmochiさんとのコメント会話で 「もっと簡易なCSSで、グラディエーション背景がふわ~っと変色出来るようにしなくちゃ(笑)」 って、自分に言い聞かせるように言っていたんでした(笑)

その後に、いろいろと研究(実際は遊んでいた(爆))している内に、当初の想定以上に面白いものが出来上がってしまった(笑)んですが、先ずは下記ブログカードにマウスを乗せてみて下さいな ( ̄ー ̄)ニヤ~♪


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

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


どうです? カメレオンのように変色してるでしょ~(笑)
こんなのが出来ちゃったんですが、これで肝心のCSSが冗長になってしまったんじゃ元も子もないんですけど、比較的短めのCSSで実現出来たつもりですから、ついでに公開しちゃうことにしました。
ほんとは筆者専用として、非公開にしようかとも思いましたけどね~ (≧ω≦。)プププ


命名: Akira風ブログカード カメレオン背景色 命名だなんて大袈裟ですよねぇ(笑)

■ 追記: 2018/10/13 15:00
このCSSは利用に難しい面が少しありますので、サポートは無しとさせて戴きます。
ご自身のAkira風ブログカードに応用してみて、上手く表示出来ない時には諦めて下さい。


枠内をクリックで全選択されますからそれをコピーすると楽です
/* Akira風ブログカード カメレオン背景色 */
.chameleon {
    background: transparent;
    background: -webkit-linear-gradient(90deg, rgba(49,240,186,0.8), rgba(255,125,238,0.8), rgba(255,125,238,0.6), rgba(255,125,238,0.1));
    background: -webkit-linear-gradient(right, rgba(49,240,186,0.8), rgba(255,125,238,0.8), rgba(255,125,238,0.6), rgba(255,125,238,0.1));
    background: linear-gradient(-90deg, rgba(49,240,186,0.8), rgba(255,125,238,0.8), rgba(255,125,238,0.6), rgba(255,125,238,0.1));
    background-position: 1% 99%;
    background-size: 300% 300%;
}
.chameleon:hover {
    background-position: 99% 1%;
    -webkit-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
}

上記CSS全てを、あなたのテンプレートのCSS欄の最下部にコピペして下さい。

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

その方法は簡単です。

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

<div class="blogcard">
      ↓
<div class="blogcard chameleon">

chameleon の文字列をたった1箇所に追記してあげるだけです、簡単でしょ?

但し、上記のままでは、ブログカードにマウスを乗せた時にマウスポインタ(矢印)が指のマークにならず、ブログカードの何処でもクリックも出来ませんので、下記記事も参照して 「Akira風ブログカードをクリック(タップ)しやすくする方法」 も導入して下さい。


Akira風ブログカードをクリック(タップ)しやすくする方法

弊ブログ記事では Akira風ブログカード を多々採用させて戴いております ^^ 開発者Akiraさんのその記事は ↓ こちらです。 ブログカードのブックマークレットを作成しました - カスタマイズSSL化後の悩ましい作業のひとつ。 ...


既に弊ブログより導入済みの方は、その限りではありません。

そうすると、先ほどのHTML部分は、、、

<div class="blogcard">
      ↓
<div class="blogcard chameleon tobuyo">

のような記述になり、これで今回のAkira風ブログカードのカメレオン背景色が利用出来るようになります。


■ ご注意

Akira風ブログカード カメレオン背景色 は、第三者様がカスタマイズしたAkira風ブログカードの効果との併用は考慮しておりませんので、併用した場合には「効果が得られない・ブログカードの構造が壊れる」懸念もありますのでご了承下さい。

尚、ブログカードにマウスホバーした時にふわっと浮き上がる効果は、弊ブログのコメント欄によく登場してくださる(笑)お友達のロビンソンさんのブログを参考にさせて戴いたものでして、同アイデアを参考にさせて戴くことを快くご了解くださったことに感謝申し上げます、ほんとにありがとうございました m(_ _)m

カメレオンを羨む猫ブロガー

[ 我が輩の身体も色を変えたいにゃ! ]

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

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


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



関連記事
ぼっちん

Comments 18

There are no comments yet.

ロビンソン  

カメレオン背景・・・ピンクが左に向かって滑らかに流れて行くようで、面白い効果ですね。

記事の中で過分なお言葉とお気遣いをいただき、恐れ入ります。
私の場合カスタマイズは完全な自己満足で、ブログを見に来てくれる人は無関心だと思います (爆)
ですから、ぼっちんさんのブログで利用していただいた方が、より多くの人に見ていただけるので本望です。

こちらのブログに来られるレベルの高い皆様には鑑賞に耐えないアダルトブログを運営しておりまして、URL空欄のままで失礼します (苦笑)

2018/10/12 (Fri) 11:25
ぼっちん

ぼっちん  

To ロビンソンさん

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

カメレオン背景・・・ピンクが左に向かって流れていくようで、面白い効果ですね。
でしょでしょ~(笑)
まぁ、実際のカメレオンってこんなにスピーディに色が変わるのかはよく知りませんけど「こういう雰囲気を表現したい」と思っていたもの以上のものが出来てしまって、今回はウハウハと喜んでおります(笑)

私の場合カスタマイズは完全な自己満足で、ブログを見に来てくれる人は無関心だと思います (爆)
何を仰る(笑)
アダルトジャンルでも、使われているWebテクニックは目を見張るものがありますから「なかなかやる~♪」なんて、私も記事も併せて(笑)参考と楽しませて戴いておりますよ~ d(-_^)good!!

2018/10/12 (Fri) 11:36

あトン  

今晩は

ぼっちんさん、いつも楽しく拝見してます。

カメレオンカードきれいですね。
私も真似しようと思いますが、上手くCSSをあてることが出来たら、
FC2以外で使っても良いですか。

ところで、rgb(49,240,186,0.8)はaが抜けているようです。

2018/10/13 (Sat) 00:59
ぼっちん

ぼっちん  

To あトんさん

あトんさ~~~ん、とってもお久しぶりですね~(笑)

私も真似しようと思いますが、上手くCSSをあてることが出来たら、
FC2以外で使っても良いですか。

いやぁ、あトんさんに気に入って戴けたなんて、光栄です~ やったね(笑)
たぶんFC2ブログ以外でも使えるとは思うんですけど「Akira風ブログカードの引用版」で利用する時に、ご利用テンプレートの <blockquote></blockquote>内に背景色が付いていたり背景画像を設定されている場合には、ブログカード画面にそれが表示されてしまうこともあり得ますので、Akira風ブログカードの .blogcard blockquote { で、それを回避するCSSが必要になるかもしれません。
あっ そんなこと、あトんさんには釈迦に説法になっちゃいますよね~ (^_^; アハハ…

そんな次第でして、もしあトんさんの環境でも使えるようでしたらご自由にご利用下さい ^^

ところで、rgb(49,240,186,0.8)はaが抜けているようです。
あらららら、またやってしまった (〃^▽^〃)oあはははっ♪
いやぁ、教えてくださってありがとうございます、速攻で今直しました~ (^^ゞポリポリ

2018/10/13 (Sat) 07:35

あトん  

こんにちは

ぼっちんさん、あトんです。

CSS使用のご快諾、ありがとうございます。

さっそくトライしてみましたが、はてなのブログカードは頑固者でCSSでは修正不可でした。(涙)

Webで検索すると、JavaScriptで色を変えることが出来る方法を見つけましたが、面倒臭いので、背景色の変更は諦めました。

自サイトのブログカードは、iframeにborderとbox-shadowで装飾&widthを広げ、これで誤魔化すことにしました。

気が向いたら、ピンでも装飾しようと思います。

それでは。

2018/10/13 (Sat) 11:28
ぼっちん

ぼっちん  

To あトんさん

あトんさん、またまたのコメントをありがとうございます ^^

さっそくトライしてみましたが、はてなのブログカードは頑固者でCSSでは修正不可でした。(涙)
あららら、なんと、それは残念でしたね~ (^^ゞポリポリ
私はFC2ブログのことしか知らないようなものでして、はてブ関連ってシステムも含めてまったく分からないんですよね~ (^^ゞポリポリ
どこかのブログで「はてなのブログカードは自由度がなさすぎる!」って怒ってるコメントを目にしたことがあったくらいで (^_^; アハハ…

Webで検索すると、JavaScriptで色を変えることが出来る方法を見つけましたが、面倒臭いので、背景色の変更は諦めました。
なるほどですね~ 私はもう「極力jQueryは使わないようにしなくちゃ」なんて思っておりまして、いろいろなことがCSSで出来る時代になっちゃったものですから、サーバー負荷的(ブログ表示速度的と言うべきか)にもその方が「優しい」って思うようになりましてね ^^

GTmetrix分析をするようになってから、どうも私ってそちらに目が向くようになりまして (^^ゞポリポリ
もうMFIも始まっていることから「スマホ閲覧での高速化」を主眼にいろいろと楽しみながらブログしてます ^^

2018/10/13 (Sat) 13:16

-  

管理人のみ閲覧できます

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

2018/10/13 (Sat) 16:34
ぼっちん

ぼっちん  

To 鍵コメさん

鍵コメさん、こんばんは ^^
別サーバーで動かしてみましたよ~(笑) ナイスですね~ (^-^)//""パチパチパチ

弊ブログで公開しております「Akira風ブログカード」の各種CSSは、あくまでもAkira先生のデフォルトのブックマークレットとデフォルトのブログカード用CSSを先ずは装備して戴いて、そこにプラスアルファで弊CSSでカラフルに装飾して楽しんで戴くことを目的に公開しておりますから、ブックマークレット部分まで弄って公開してしまっては「Akira先生のデフォルトの存在」をなくしてしまうので、失礼になってしまうのです (^^ゞポリポリ
私が個人的に非公開で使うんでしたら、そこはもう自己都合でいろいろと含めてカスタマイズしてしまいますけどね(笑)

鍵コメさんも「Webテクニック」的カテゴリを新設して公開なさったらいいのに~♪って思いますよ~ ('◇')ゞ
勿体ないです ^^

2018/10/13 (Sat) 19:55

-  

管理人のみ閲覧できます

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

2018/10/13 (Sat) 20:43
ぼっちん

ぼっちん  

To 鍵コメさん

鍵コメさん、おはようございます ^^

Jqueryに依存しないのが目的ですが、もう一つの理由があります。
Chromeで閲覧した時に、ブログカードのどの部分にホバーしても、窓の左下にURLが表示されるようにしたかったので・・・

それですそれです! 私が感心しましたアイデアポイントはまさにその2点なんです d(-_^)good!!
jQueryって「書きやすい」もんですから、ついつい「仕方がないけど書いちゃえ」って感じですぐそっちに走っちゃう私の悪い癖! \(__ )ハンセ~です(爆)
だからなかなかjQueryから脱し得ないんですよね (^_^; アハハ…

ハーイ(^O^")/ お言葉に甘えて密やかに個人的に使わせて戴きますね~ ありがとうございます~♪

2018/10/14 (Sun) 07:53

-  

管理人のみ閲覧できます

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

2018/10/17 (Wed) 01:09
ぼっちん

ぼっちん  

To 鍵コメさん

鍵コメさん、おはようございます~ ^^

いやぁ、拝見させて戴きましたよぉ、凄くカッコイイ~って言うかセンス抜群の配色~ (^-^)//""パチパチパチ
とっても上品な配色に、マウスホバーで白い光がキラ~ンって感じで走りますねぇ、サイコ~ d(-_^)good!!
私のカメレオンと取り替えっこしたい感じです(爆)
この配色って、何度もテストしてかなりご苦労なさったことでしょう、お見事です ^^

やってみて気がついたんですが、背景色がある方がフッター画像が映えますね (苦笑)
でしょでしょ~(笑) そこがFC2の馬ファビコンじゃつまらないですけどね (≧ω≦。)プププ
やっぱりAkira風ブログカードってカラー背景が映えますよね~ (笑)

2018/10/17 (Wed) 08:14

-  

管理人のみ閲覧できます

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

2018/10/17 (Wed) 14:28
ぼっちん

ぼっちん  

To 鍵コメさん

鍵コメさん、こんにちは ^^

参照先のブログ見ました。
本当ですね・・・カメレオン背景が、そっくりそのまま使われている (笑)

ねっねっ(笑) まぁ、ブログジャンルの違いはあれ(笑)利用して貰えてることは嬉しい気分です(笑)

そそそ、まだSSL化なさってないから伝えてあげたい思いもあるんですけど、ジャンルの壁が(笑)
私がいきなりコメントしたら、びっくりされちゃいと思いますし (^^ゞポリポリ

FC2限定なのでしょうか?
いえいえ、特別な手法ではなくて、、、この件は鍵コメさんブログに直接お返事させて戴きますね~ (^^ゞポリポリ

2018/10/17 (Wed) 14:53

-  

管理人のみ閲覧できます

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

2018/10/17 (Wed) 15:48
ぼっちん

ぼっちん  

To 鍵コメさん

またまたのコメントをありがとうございます ^^

ブログの記事でこれだけ呼びかけているのですから、コメントまでする必要はないと思いますよ。
あっ そうですよね~(笑) 記事読んで「あっ 私もだぁ」って気がついてくれることを祈ることにします~ (≧ω≦。)プププ

もうひとつお聞きしたいことがあるのですが
ハーイ(^O^")/ ではそれもまた鍵コメさんのブログにお返事しますね~(笑)

2018/10/17 (Wed) 15:55

-  

管理人のみ閲覧できます

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

2018/10/17 (Wed) 16:50
ぼっちん

ぼっちん  

To 鍵コメさん

あらららら (^_^; アハハ…
私の説明不足と言うか抜けがあったようで申し訳ありません (^^ゞポリポリ
でも出来たご様子で(^。^;)ホッとしました~(笑)

是非ご活用下さいね~♪

2018/10/17 (Wed) 17:00

Leave a reply