attention admin about comments trackbacks you may also like

スマホでもホバー(hover)効果を簡単に設定しましょう 簡単すぎて笑っちゃう♪

2018年10月15日
iPhone話題
8
FC2ブログ スマホ 画面タッチ hover iOS Android

弊ブログではよくブログカードを記事に貼り付ける機会が多いんですが、筆者が利用する「Akira風ブログカード」には、背景色をグラディエーション等のカラー背景に装飾しているものが多いんです。
そしてパソコンの場合ですと、マウスポインタをブログカードに乗せる(マウスホバーする)と、その色合いがス~っと変化するような遊び心をCSSで設定してあります。

ただですね~ この遊び心をスマートフォンでは上手く表示してくれないんですよね (^_^; アハハ…

過日に筆者が、記事にあるコメントしてくださった方に、、、


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

こんなこと言ってたんです (^^ゞポリポリ
でも内心では「なんとかしたいなぁ、スマホでもホバー効果が見られるように!」って、ずっと密やかにCSS研究もしてたんです、面倒くさがり屋なのに凝り性なんですよね~(笑)

まぁ、かなり面倒くさいCSSを書けば、筆者の意図するような「スマホでもホバー効果」を得られるようになることは分かったんですけど、残念ながら動作が不安定で、ホバー効果が表示される時もあるけど表示されない時もある(笑)と言った具合で、皆さんに公開出来る代物ではないんです (^^ゞポリポリ

「もっとなんか良い方法がないかなぁ?」ってことで、iOSのタッチイベント(画面タッチをした時の効果)関連の情報をネットで漁っているうちに、なんと、、、


Simple Little Tricks for Web Transition Touch Events on Mobile Devices

If you want to have a web transition hover event to show on your website for mobile devices, you just need to attach this attribute:


こんな情報を見つけてしまったんでした(爆) 上記引用文の「出典」先リンクをクリックしてご参照下さい。
英文ですけど、Chromeでしたら翻訳も簡単に出来ますから面倒がらずにご参照を(笑)

『 見~つけた~~~♪ 』 (爆)

同記事によると <body ontouchstart=""> を書けば良いと書いてある ( ̄ー ̄)ニヤリ

■ 追記: 2018/10/16
上記文字列をコピペでご利用下さい! 出典先記述の同文字列には誤りが存在しているので利用はしないで下さい。

( 上記出典先記述の誤りをロビンソンさんよりご指摘戴きまして、筆者が確認出来ました、感謝申し上げます m(_ _)m )

従って 弊ブログで提供しております Akira風ブログカードのカラー背景用CSS をご利用くださっているブロガーさんは、ご自身のテンプレートにこの設定をされるようお勧め致します。

要はFC2ブログを例にしますと、ブログテンプレートの「HTML編集」欄で、、、

上図の青線部分を下図の赤線部分のように書き加えるだけの超簡単設定です(笑)

bodyontouchstart="" の間は必ず半角スペースを入れます(全角スペースはダメ!

■ 追記: 2018/10/16
この記述方法では W3C 統合検証サービス のチェックに於いてエラーが発せられますが、これは ontouchstart属性 がまだHTML5に収容されていない為で、致命的エラーではない(現状で正常動作している)と筆者判断に於いて「今のところはそれでも実用性を取る」と言う考えでこの方法を公開しております。

W3C エラー

さてさて、それでは早速「スマホでもホバー効果」がほんとに機能するのか、下のブログカードをスマホからタッチしてみて下さいね~(笑) パソコンでは今までと同じようにブログカードにマウスポインタを乗せると、今までと同じ効果が見られますのでご安心下さい、またうっかりスマホ画面でこのブログカードをタップしてしまっても遷移しないように tobuyo は 外してしてありますから、ホバー効果を見て戴くことが出来るようになっております。


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

先日、弊ブログで下記のブログカードの記事を書いたんですよね。 Akira風ブログカード グラディエーション背景色ふわ~っと変色のCSS配布ずっと以前より、...oops0011.blog.fc2.com [ デフォルトのブログカード ] その時に、ブロ...


どうです? ちゃんとスマホでもブログカードの背景色がカメレオン(笑)のように変化して見えるでしょ~ ^^

iOS(Androidにも)にこんな ontouchstart 属性 なんて存在していたんですねぇ、筆者は今まで全く知らなかったです (^^ゞポリポリ
調べると、なんと iOS9 の頃には既に存在していたような! 今はもう iOS12.0.1 ですよ(爆)

これを発見(笑)するまで、同じような効果を作り出す為に、必死な思い(笑)で長く複雑で怪しげなCSSを書いて来たその時間はいったいなんだったやら、、、たった1個のこの属性にあざ笑われてしまいました (^_^; アハハ…

得意げにスマホを操る男

[ どうだい! スマホでホバ~♪ イケてるね ]


自身のブログを各種ツールで分析しましょう

スマホで正しく表示されるかテストする!
モバイル フレンドリー テスト

スマホ表示速度分析は PSI が強力です!
Google PageSpeed Insights

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


関連する記事
ぼっちん
Author: ぼっちん
記事に関わらないコメントでもOKですからね~ ^^

コメント(8)

There are no comments yet.

二階堂朱哩  

2018/10/15 (Mon) 21:49

すごい!!

私はカメレオン仕様にはしていませんが、ブログカードがスマホだとタップしても色が変わらないのは残念に思ってました。でも出来ないものなんだ、と勝手に思ってました。
すごい!しかもこれだけの設定ならスマホからでも編集出来るかも♪と今設定しました。出来た〜!!
ありがとうございます〜ヾ(@⌒ー⌒@)ノ
自分がスマホから見る事が多いのでなんかさらにワクワクしちゃいます♪
何かをやろうとして上手くいかなくてようやく出来た時はカイカン!ですよね。今夜はきっと良い夢見れますよ〜♪♪

ロビンソン  

2018/10/15 (Mon) 22:03

知りませんでした

こんばんは、ぼっちんさん。
こんなやり方があるんですね・・・
ぼっちんさんの探究心には頭が下がります。

私も試してみましたが、これってW3C validatorではエラー警告を受けるようで、ある意味では裏技のような感じなのでしょうか?
あと、出典先の記述をそのままコピーすると、何故か最初のダブルクォーテーションマークが全角になっていて、貼り付けた時に半角スペースが出来るのも要注意ですね。

ぼっちんさんが故意に危険な手法を紹介するはずがないし、水を差すつもりもありません。
苦心して作り上げたブログカードのカメレオン背景を、スマホでも表現したいという情熱には敬意を表します。

ぼっちん  

2018/10/15 (Mon) 22:08
ぼっちん

To 朱哩ちゃん

朱哩ちゃん、こんばんは~ ^^

ねっねっ ちゃんと出来たでしょ(笑) 嬉しくなっちゃうよね~こういうのって♪

> 自分がスマホから見る事が多いのでなんかさらにワクワクしちゃいます♪
> 何かをやろうとして上手くいかなくてようやく出来た時はカイカン!ですよね。今夜はきっと良い夢見れますよ〜♪♪
あのね、ほんとを言うと、何年かぶりくらいに口内炎が舌の先っぽに出来てて、いま一番大きくなってる時(笑)で、喋るのも痛いしご飯食べるにも痛いしで、夜寝てる時に痛みを堪えてるのか歯を食いしばって眠ってるみたいなのよ δ(⌒~⌒ι)とほほ...
だから、朝目が覚めると首の筋肉がパンパンになっちゃってて、首から上がボ~っとしちゃってて、まるで熱が出てるみたいな感じで思考力ゼロ状態なの (^_^; アハハ…

そんな中でこの記事を書き上げたもんだから、少し気分がよくなってるところ (^^ゞポリポリ
明日の朝は、もう少しよくなってたら嬉しい (^_^; アハハ…

ぼっちん  

2018/10/15 (Mon) 22:23
ぼっちん

To ロビンソンさん

ロビンソンさん、こんばんは ^^

> こんなやり方があるんですね・・・
> ぼっちんさんの探究心には頭が下がります。
いやぁ、私もこの方法を知ったのは今日の午前中のことなんですよ (^^ゞポリポリ

> 私も試してみましたが、これってW3C validatorではエラー警告を受けるようで、ある意味では裏技のような感じなのでしょうか?
これ、実は私は承知の上なんです(笑)「まぁ、いいかぁ」って感じでして (^^ゞポリポリ
ontouchstart 属性 ってHTML5×には存在してなくて、iOSとAndroidに存在しているだけなんですね。
それでバリデートエラーが出るみたいなんですけど「実用性」を取りました(笑)
ほんとは <body ontouchstart=""> に書かないで、各要素個々に ontouchstart="" を埋め込んであげればバリデートエラーは出ないと思うんです。

> あと、出典先の記述をそのままコピーすると、何故か最初のダブルクォーテーションマークが全角になっていて、貼り付けた時に半角スペースが出来るのも要注意ですね。
おやおや、それには全く気がつかなかったです、なんでそんな書き方になっちゃってるんでしょうねぇ? ご本人に聞いてみるのも面倒で (^_^; アハハ…

-  

2018/10/16 (Tue) 14:07

管理人のみ閲覧できます

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

ぼっちん  

2018/10/16 (Tue) 14:18
ぼっちん

To 鍵コメさん

鍵コメさん、こんにちは ^^
いろいろとお気遣いを感謝致します~♪

あっ なるほど~ スマホ版テンプレではW3C validatorには引っかからなかったですか、笑ってしまいますねぇ(笑)
まぁ、やがてontouchstart属性はHTML5に含まれるようになるでしょうね、もしかして次期バージョンでは(笑)

お互い、Akira先生の優秀なレスポンシブテンプレート愛用者(笑)で良かったですねぇ (〃^▽^〃)oあはははっ♪

-  

2018/10/16 (Tue) 14:40

管理人のみ閲覧できます

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

ぼっちん  

2018/10/16 (Tue) 15:39
ぼっちん

To 鍵コメさん

ハーイ(^O^")/ focus効果、確認しちゃいましたよ~(笑)
けっこう鍵コメさんも私と同じで凝り性なんですね~ (≧ω≦。)プププ

私も鍵コメさんも、こういう他人があまり気がつかないと言うか、手を出さない部分でのカスタマイズを一人ほくそ笑む(笑)楽しみを味わえるのも、やっぱりAkira先生のとってもカスタマイズ性に富んだ優秀なレスポンシブテンプレートを使わせて戴いてるからこそ実現出来ていることなんですよね ^^
私は見た目のデザインよりも、そういう「細かに自分好みにカスタマイズし易い構造」で主にテンプレートを選択してるもんですから、新しいテンプレート作品がリリースされると、真っ先に「テンプレート構造」を先に覗くのがクセになっちゃってるくらいなんです(笑)
なんたっていつもo(^-^)oワクワクさせられちゃってるもんですから (^^ゞポリポリ
だからいつもホイホイって感じでテンプレートチェンジしちゃうんですよね~ (^_^; アハハ…

> 方向性は似て非なるものですが、カスタマイズの喜びを分かり合っていただけると思います (笑)
> 私のブログで書く内容ではないので、せめてぼっちんさんに見ていただきたくて (苦笑)
でしょでしょ~(笑) お互い、ブログの楽しみ方の中の1つ(笑)はまったく同じ方向性ですよね~ (≧ω≦。)プププ