attention admin about comments trackbacks you may also like

Akira風ブログカードにチラリズムアクションを加える方法(面白お遊び)

2019年11月19日
Akira風ブログカード
21
FC2ブログ Akira風ブログカード カードめくり ふわ~ん CSS

Akira風ブログカード に、ちょっと面白いアクションを加えて閲覧者さんを楽しませてあげましょう(笑) 既にあなたのブログにAkira風ブログカードを導入しておりましたら、簡単に利用出来ます。

要はブログカードにチラリズムアクションを加える(笑)んです。


Akira風ブログカード は楽しく利用しましょう

弊ブログでは、カテゴリ[ Akira風ブログカード ]に於いて、様々なブログカードの楽しみ方をカスタマイズして紹介して来ておりますが、また1つ面白テクニックを加えてみます。

Akira風ブログカード の端が ふわ~ん♪ とめくれちゃう(笑)

尚、弊記事で紹介しますこのWebテクニックは、筆者が当初より「 Akira風ブログカード 」と勝手に銘打っております、開発者 Akiraさん のブログカードシステムに於いて利用出来る面白テクニックでして、その他のブログカードシステムには一切関わりませんことを明記して於きます。


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

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


先ずはサンプルとして、そのチラリズム(笑)を加えたブログカードを貼りますので、マウスでちょっとタッチしてみてください。


FC2ブログでまだSSL設定してないブログは今からでも「管理ページでSSL設定したら大丈夫」なんですよ

Google が2019年10月03日に、下記ブログカード記事のようにとても重要な公式アナウンス行っておりました。...


ほら、ブログカードの端が ふわ~ん♪ って感じでめくれ上がったでしょ、これですこれ(笑)

このチラリズムアクションはお友達の mochiさん が開発

このチラリズムアクションを考案したのは筆者ではありませんで、弊ブログのお友達の mochiさん が、ずっと以前に下記ブログカード先の記事で紹介されており、筆者はその一部を抜き出してほんのちょっとだけ修正紹介させて戴くものです。


記事中のブログ・サイトリンクにブログカードを導入してみました。【ピン抜き動作を追加しました】

溢れる煩悩はヌースでも吸い取れきれないみたいね。ちゃんとピン抜き動作できるようになりました 2018/1/11追記 ブログカードへとマウスを持っていくと、ピン留めが抜かれる動作を加えました...

上記記事の下部の方に、、、
2.カードめくりのCSSの追加点です。
と言う項目があり、そこにこのアクション用CSSが記載されておりますが、ここを筆者は下記のCSSコードに修正してみました。

ブログカードのチラリズムアクションのCSSを公開します



上記CSSをコピーして、それをあなたのブログテンプレートのスタイルシート編集欄の最下部にペーストしてから「 更新 」をクリックして編集を確定させてください。 その様子のサンプルスクショを貼ります。

テンプレートのCSS編集欄の様子
クリック拡大

ブログカード貼り付け用のHTMLに tira を追記するだけの簡単利用

この追加した、チラリズムアクション用のCSSをどう使うかですが、あなたの記事にブログカードを張るために、Akiraさんのブックマークレットを利用して生成したブログカード用のHTMLの先頭の方にあります、、、
<div class="blogcard"> のクラス部分に tira を追記( 必ず blogcard との間に半角空けてください )してあげるだけです。 つまりは下記HTMLの赤文字部分のように追記します。


<div class="blogcard tira"><div class="blogcard-content"><div class="blogcard-image"> ~ 以下省略 ~

以上で、あなたが現在利用中の Akira風ブログカード にこの面白アクションを簡単に導入出来ます。


この tira を追記する・しないだけで記事に貼り付けるブログカード個別に簡単設定出来ますから、その時の気分次第(笑)でご利用戴けます。

Akiraさんのデフォルトのブログカードでも、この ふわ~ん♪ が楽しめるようになりますから、下記ブログカードもタッチしてみてください。


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

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


楽しいアクションCSSを作成紹介してくださった mochiさん に感謝致しましょう。


暗闇に立つ貞子画像

私の
めくる勇気ある?
ヒヒッ


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

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

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

ブログのPC表示速度分析は GTmetrix が強力です!
GTmetrix

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


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

コメント(21)

There are no comments yet.

そふぃあ  

2019/11/20 (Wed) 08:11

こんにちは

ぼっちんさんのところで拝見する、触ると「笑っちゃう」ブログカードも好きで、どうやったらできるのだろう?と思っていた時があります。
めくれの仕組み、記事にしてくださりありがとうございます。
嫌味ない感じでチラッとめくれる感じが良いです。
早速導入してみます。

mochiさんのブログも度々拝見に行きますが、凄いですよね。見ていて楽しい。
みなさん凄いですよね。

そふぃあ  

2019/11/20 (Wed) 08:17

追記

導入できました!
いい感じにめくれます(感謝)

ぼっちん  

2019/11/20 (Wed) 10:04
ぼっちん

To そふぃあさん

そふぃあさん、こんにちは ^^

> 触ると「笑っちゃう」ブログカードも好きで...

あっ これってもしかして

【 【Akira風ブログカード】に愉快な遊び心を加える(笑) 】
https://oops0011.blog.fc2.com/blog-entry-209.html

の記事で書いた、カードに触るとバタバタって暴れるアクションのことですかね? (笑)
そう言えば、これ、導入方法の紹介をしてなかったですねぇ (^_^; アハハ…
実はですね、このアクションを作り出す大元の「CSShake」って言うCSSのファイル容量がとっても大きくて、これを皆さんのブログのテンプレートのCSSにそのままコピペしてしまうと、ブログ全体の表示速度がやや遅くなってしまう可能性が大きいものですから、あえて導入仕方の紹介を控えていたんです。
まぁ「導入の仕方が解る人は自己責任で~~~」って感じで記事にしていた次第ですよ (^^ゞポリポリ

今回の「チラリズムアクション」(笑)はCSSがちっちゃいですから、誰でも使えます ^^

> mochiさんのブログも度々拝見に行きますが、凄いですよね。見ていて楽しい。

でしょでしょ(笑) mochiさんって発想力がとても豊かで、まさに「Web奇術」言う辺りがピッタリです(笑)

> 導入できました!
> いい感じにめくれます(感謝)

おっ 成功しましたか(笑) 適度に使ってお楽しみくださいね~♪

遠太  

2019/11/20 (Wed) 11:13

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

導入しました。ありがとうございました。mochiさんにも感謝です。

ぼっちん  

2019/11/20 (Wed) 11:25
ぼっちん

To 遠太さん

遠太さん、こんにちは
こちらへの初コメントをありがとうございます ^^

> 導入しました。ありがとうございました。mochiさんにも感謝です。

は~い、適時にお楽しみくださいね~(笑)

mochi  

2019/11/20 (Wed) 21:27

懐かしいネタ紹介ありがとうございます。

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

昨日この記事には気づいていたのですが、自分のブログ記事を先に書き上げてから…とかやってたら日を跨いでしまいまして。コメントするのが出遅れてしまった感があります (笑)
思い起こせば、今回紹介してもらっている記事の執筆にあたって、ぼっちんさんに初めてコメントしたことが、お付き合いの始まりだったと記憶しています。またそれまでWeb技術に疎かった僕を、Web奇術師への道に導くキッカケにもなった思い出深い記事です。(*^^*)

ぼっちんさんと出会えたこと。そしてこうやって楽しくコメントをやりとり出来ていることに感謝です。
あらためまして、これからもよろしくお願いします。(^^)/

ぼっちん  

2019/11/21 (Thu) 08:26
ぼっちん

To mochiさん

mochiさん、おはようございます ^^
mochiさんに断りもなく、この記事書いちゃいましてスミマセンでしたね (^_^; アハハ…

実は、FC2の某女子ブロガーさんで「ブログカードの端がチラっとめくれたら楽しいのに」ってつぶやいているのをキャッチしましてね(笑)
それがたまたまAkira風ブログカードでしたから「あっ なるほど、私の背景色カスタマイズでなくても、Akiraさんのデフォルトブログカードでもチラってなったら楽しいんだ(笑)」って、思った瞬間から、もうパパパって勝手に指が動き始めてて記事にしちゃった次第でした(笑)

> 思い起こせば、今回紹介してもらっている記事の執筆にあたって、ぼっちんさんに初めてコメントしたことが、お付き合いの始まりだったと記憶しています。またそれまでWeb技術に疎かった僕を、Web奇術師への道に導くキッカケにもなった思い出深い記事です。(*^^*)

あっ そうでしたねぇ(笑) Akira風ブログカードの「カラー背景」カスタマイズをmochiさんが「こりゃ楽しい」って採用してくださって、それがキッカケでしたねぇ、たしか(笑)

> ぼっちんさんと出会えたこと。そしてこうやって楽しくコメントをやりとり出来ていることに感謝です。
> あらためまして、これからもよろしくお願いします。(^^)/

いやいや、mochiさんのWebテクニックに対する素晴らしいアイデアの発想力と、それを「実現してしまう」確かな技術力には、ほんっとに感服させられております ^^
これからも、mochiさんの「Web奇術」力をふんだんに発揮なさって、ブロガーの皆さんを楽しませてあげてくださいね~♪

よつば  

2019/11/22 (Fri) 16:26

v(*'-^*)-☆ ok!!

ぼっちん先生~♪ 出来た出来た!以前は出来なくてガッカリだったけど
今回はバッチリ!ヾ(〃^∇^)ノわぁい♪

ホントぼっちん先生もmochi先生もスゴイよね~♪いつも感謝感謝です♡

ぼっちん  

2019/11/22 (Fri) 16:36
ぼっちん

To よつばちゃん

よつばちゃん、こんにちは~♪
よつばちゃんにしてはこの記事への登場が「遅いねぇ、どうしたのかな~?」って、ちょっと心配してたのよ (^_^; アハハ…
こう言うの、よつばちゃんの好きなテクだから(笑)

> 今回はバッチリ!ヾ(〃^∇^)ノわぁい♪

うんうん(^-^) 最新記事で、しっかりめくれ上がってたねぇ、確認したよ~ (≧ω≦。)プププ

> ホントぼっちん先生もmochi先生もスゴイよね~♪いつも感謝感謝です♡

今回のは、mochiさんの「Web奇術」の盗用(笑)だから、凄いのはmochiさんだけ~ (〃^▽^〃)oあはははっ♪
楽しく利用してくださいね~♪


徳川たぬこ  

2019/12/01 (Sun) 09:23

いただきました

初めまして○┓
 
mochi様、ぼっちん様、ありがとうございます
こういうの、大好きです

どうしてもお礼を申し上げたくコメントさせていただきました
お邪魔いたしました

ぼっちん  

2019/12/01 (Sun) 09:40
ぼっちん

To 徳川たぬこさん

徳川たぬこさん、おはようございます 初めまして ^^

おやおや、こんな変なお遊び(笑)を気に入ってくださって、ありがとうございます(笑)
なんと、もう既にブログでこのチラリズム使ってくださってるんですねぇ ^^
えっえっ? なんと個別画像にも「lazyload」使ってらっしゃる ^^
「あなた 何者?」って感じで、実に素晴らしいWeb知識をお持ちですね~♪ かなり「出来る人♪」って雰囲気で素敵です~♪

おや、同県人なんですね~ (≧ω≦。)プププ

ご丁寧にコメントをありがとうございます ^^

あトん  

2019/12/15 (Sun) 21:49

チラリズム

外野から失礼します。
ぼっちんさん、大変ご無沙汰してます。
ブログカードのチラリズム良いですいねー。
私は2年前mochi さんに断って、はてなブログのトップページのタイルに導入しました。
今は若干路線を変更し、シルエットのヒーローヘッダーが気に入って遊んでます。

ぼっちん  

2019/12/16 (Mon) 08:19
ぼっちん

To あトんさん

あトんさん、おはようございます コメントはお久しぶりですね~ ^^

> ブログカードのチラリズム良いですいねー。

こういうちょっとした「楽しさ」って大好きなんですよね(笑)
ですから、mochiさんのアイデアを、もっと誰でも使いやすくしてみました ^^

> 私は2年前mochi さんに断って、はてなブログのトップページのタイルに導入しました。

は~い、あトんさんのトップページで拝見しておりましたよ~ ^^

> 今は若干路線を変更し、シルエットのヒーローヘッダーが気に入って遊んでます。

(笑)あトんさんもいろいろと凝り性ですもんね、私もなんですけど (〃^▽^〃)oあはははっ♪

ところで、あトんさんはWebテクニカル的に、モバイルファーストインデックス(MFI)とかPageSpeed Insights(PSI)って、あまり関心を持たないんでしょうか?
以前から私は心の中で「不思議だなぁ」って気持ちでいるんですけどね (^^ゞポリポリ

あトん  

2019/12/17 (Tue) 02:32

To ぼっちんさん

ぼっちんさん、今晩は。

MFIやPSIは決して軽視してなく、それなりに取り組んでます。
CSSはPCファーストではなくモバイルファーストで記述してます。
記事はすべてモバイルフレンドリーでユーザーエージェントはスマートフォン用Googlebotになってます。
URLも自動生成ではなく意味があるパーマリンクに変えてます。
PSIはヒーローヘッダー以外はlazysizeを導入、dns-prefetch導入、アドアセンス遅延読込等、を実施してます。
しかし、残念なことに、はてなブログ自体がクソ遅いので、FC2のような爆速は期待できません。(涙)
なので、意思を持って全画面のヒーローヘッダーを採用し、誤魔化してます。

ところで、service workerって良くわからないのですが、FC2ではどうやっているのでしょうかね。

ぼっちん  

2019/12/17 (Tue) 08:05
ぼっちん

To あトんさん

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

> MFIやPSIは決して軽視してなく、それなりに取り組んでます。

やっぱり、あトんさんが様々な「ブログ表示の高速化」を努力なさっているにも関わらず「重たい」んですねぇ (^^ゞポリポリ
私は、はてブって一度も使ったことがないものですから、ブログシステムそのものも知りませんので「やっぱりサーバーに原因が?」ってことなんでしょうか (^_^; アハハ…
せっかくのあトんさんのWeb技術が勿体ないですねぇ (^^ゞポリポリ

> ところで、service workerって良くわからないのですが、FC2ではどうやっているのでしょうかね。

あっ 実はですね、FC2ブログの公式テンプレートで「爆速」ってタイプがあるんですけど、これには service-worker.js が現状で使えているんです。
でも「爆速」のテンプレートの中身はユーザーは編集出来ないんです、つまりは、ただ記事を書くだけの権限しか与えられていないんですよね(笑)

で、爆速テンプレートが利用出来るようになった時に直ぐに「もしかしてユーザーレベルでも service-worker.js が使えるんかい? 」ってことでその存在を確認しようと思いまして、独自ドメインで運用しているブログのURLの後ろに ○○○○.com/service-worker.js なんて付記して動作させたら表示されるんです(笑)
つまりはドメインのルートディレクトリには存在しているってことですよね。
でも、中身がほぼ空っぽ状態(笑)で、要は service-worker.js を編集出来ないのでは意味がないんですよね (^_^; アハハ…
その編集権限があるのは、FC2運営さんだけと言う現状なんです(爆)

ほんとは使えれば、いろいろと楽しいんですけどね (^^ゞポリポリ

あれ? あトんさんは、確かFC2ブログのアカウントお持ちだったですよね? 以前私が知らずに迷い込んだ記憶があるんですが(笑)
直接いろいろと確かめられる術があるんじゃないですか? ( ̄ー ̄)ニヤ

■追記 2019/12/17 10:55
ただ、DevToolsで見ますと DOMContentLoaded: 8.46s Load: 10.43s と、DOM構築にちょっと時間が掛かりすぎているのが気になるんですよね~ (^^ゞポリポリ

あトん  

2019/12/17 (Tue) 21:09

ぼっちんさん、service workerの解説ありがとうございます。

Akira先生のテンプレートにservice worker導入済とあったので、
FC2で遊べるかなー、弄ってみたいなー、と漠然と思ってました。

service-worker.js が使えれば楽しいことが出来ると知って、
参考になりました。

なお最近はWordPressも勉強しようかなーと思っていて
「Luxeritas」という無料テーマに興味を持ってます。

それでは。

ぼっちん  

2019/12/17 (Tue) 21:48
ぼっちん

To あトんさん

あトんさん、こんばんは ^^

> Akira先生のテンプレートにservice worker導入済とあったので、

えっえっ? おやぁ?(笑) 確かにテンプレート紹介で4点ヒットしますねぇ、ただ「OmbreRose」はまだ配布前ですから3点になるんですけど、、、う~ん、ちょっとなんかそれは変(笑)

> service-worker.js が使えれば楽しいことが出来ると知って、
> 参考になりました。

(笑)実際に使えれば、いろいろとやれます ^^

> なお最近はWordPressも勉強しようかなーと思っていて
>「Luxeritas」という無料テーマに興味を持ってます。

私は実はWordPressは「面倒でこんなもんやってらんね(笑)」って感じで、もう長いこと放置状態なんです (^_^; アハハ…

いろいろと楽しんでみてくださ~い ^^

あトん  

2020/03/17 (Tue) 23:31

Hatena風ブログカード、作りました。

ぼっちんさん、ご無沙汰してます。

「Akira風ブログカード」に対抗して「Hatena風ブログカード」を作ってみました。

また、ぼっちんさんのCSSのカスタマイズ記事について、いくつか当ブログで勝手にリンクを貼らせて頂きました。

事後報告になってしまいましたが、ご了承下さい。

ぼっちん  

2020/03/18 (Wed) 08:11

To あトんさん

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

> Akira風ブログカード」に対抗して「Hatena風ブログカード」を作ってみました。

は~い、実は、昨日読み逃げさせて戴いてたんです、すみません (^_^; アハハ…
しかしまぁ、記事完成までかなり時間掛かっておられたんでしょう、とっても力作で「凄いねぇ♪」と感嘆しておりました ^^

> また、ぼっちんさんのCSSのカスタマイズ記事について、いくつか当ブログで勝手にリンクを貼らせて頂きました。

いやぁ、照れてしまいますよ、ご丁寧に沢山のブログカード張ってくださって、ありがとうございます。
とりあえず、いま「HATENA風ブログカード TYPE3」のブックマを戴いてテストさせて戴きましたが、Akira先生のデフォルトCSSがそのまま利用出来て、とっても便利に仕上がってますねぇ、素晴らしいです「はてな風」にUSERマークも付いて笑ってしまいます(笑)
必要な場面で「HATENA風ブログカード TYPE3」愛用させて戴きます(笑)

> 事後報告になってしまいましたが、ご了承下さい。

いえいえ、そんなの気になさらないでくださいね~ ^^
ご丁寧にお知らせくださってありがとうございます ^^

あトん  

2020/03/19 (Thu) 06:02

ぼっちんさん、コメントありがとうございます。

「HATENA風ブログカード TYPE3」のご利用、恐縮です。

お役に立てて嬉しいです。

「HATENA風ブログカード」は結構前に出来ていたのですが、過去記事の「はてなブログカード」を「HATENA風ブログカード TYPE3」に置き換えた時、1つだけ、某サイトのブログカードが上手くできず、記事のHTMLが崩れてしまい、悩んでました。

結局、原因がわからず諦めました。(笑)

それでは。

ぼっちん  

2020/03/19 (Thu) 07:39
ぼっちん

To あトんさん

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

> 結局、原因がわからず諦めました。(笑)

あの~ もしかして、そのお相手サイトが「OGP設定」してなかったとかじゃないんでしょうか?(笑)
まさかねぇ (^_^; アハハ…