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

弊ブログ記事では Akira風ブログカード を多々採用させて戴いております ^^

開発者Akiraさんのその記事は ↓ こちらです。

ブログカードのブックマークレットを作成しました - カスタマイズ

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

もっともこの「 Akira風 」の冠は私が勝手に付け足したネーミング(笑)ですのでご承知おきください。 単に「 ブログカード 」だけじゃ多種類のものが存在していて区別が付けられませんからねぇ (^^ゞポリポリ

この Akira風ブログカード は、それはそれはカスタマイズ性に富んだ素晴らしいブログカードですから、いろいろなブロガーさんが改良というか機能を付け足すと言うか、もうもうそのような更なる使いやすさ楽しさを求めてカスタマイズの輪がどんどん広がって行っております。 それはある意味、筆者ぼっちんの密やかなる狙いでもあったんですけど(笑)

きっと開発者Akiraさんもその広がりを 『 あららら(笑) 』 って笑ってみておられることでしょうね(爆)

今回は「どこでもドア」 じゃなくて(笑)ブログカードの何処をクリックしてもリンク先に遷移出来るようにする方法を紹介致します。

通常のままの Akira風ブログカード(この背景色は筆者のカスタマイズ) ですと

FC2ブログのお友達の皆さんへSSL化を勧めてあげてください - AOSSL

明けましておめでとうございます 皆さんが年末年始休みの間、筆者は毎年仕事でとても忙しくなる時なんです(爆) 今年もそんな年始のぼっちんでして「お正月」感はもう十数年体感しておりません...

このような表示でして、ブログカードをクリックしてリンク先に遷移する場合にはリンクが張られている「記事のタイトル」「サムネイル画像」「カード下のURL」のどれかをクリックすることで遷移するようになっているんです。 他の部分ではクリック出来ません。

これはパソコンからの閲覧の場合にはマウスでクリックしますから困ることはないんですけど、スマホからの閲覧では、指でこれらのリンク部分をタップすることになって、場合によってはそのリンク部分をうまくタップ出来ないことが発生する場合があるんです。(筆者iPhoneでの経験談(笑))

今回これをクリック(タップ)し易くしてみましたので ↓ ブログカードにマウスポインタを乗せてみて下さい ^^

FC2ブログのお友達の皆さんへSSL化を勧めてあげてください - AOSSL

明けましておめでとうございます 皆さんが年末年始休みの間、筆者は毎年仕事でとても忙しくなる時なんです(爆) 今年もそんな年始のぼっちんでして「お正月」感はもう十数年体感しておりません...

こちらの ↑ Akira風ブログカードの何処にマウスオンしてもポインタが「指マーク」になっていてクリック(タップ)出来ることが分かりますよね ヽ(^^ ) ヨシヨシ

Mousepointer

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

① FC2ブログの場合には、ご自身のブログテンプレートの「HTML編集」欄の一番下の方の </body> の直上に下記のJavaScriptをコピーして貼り付けて「更新」ボタンをクリックします。

■ 枠内をクリックで”全選択”されますからそれをコピーすると簡単です

<script>
$(function(){
     $(".tobuyo").click(function(){
         window.location=$(this).find("a").attr("href");
         return false;
    });
});
</script>

② 続いて、ブログテンプレートの「スタイルシート編集」欄の一番下に

.tobuyo {
        cursor:pointer; /* マウスポインタを指マークにする */
}
をコピーして貼り付け「更新」ボタンをクリックします。

① ② の操作で、上記コードをテンプレート編集の各欄に貼り付けた時には「ソースコードの色」は無くなりますがそれで正常ですので気にしないで下さい。 この色付けはあくまでも説明用です。

③ 記事に貼り付けてある(またはこれから貼り付ける)Akira風ブログカードのソースコードの先頭辺りにある

<div class="blogcard">
の部分に tobuyo のクラス名を挿入する。
<div class="tobuyo blogcard">
但し tobuyo と blogcard の両クラス名の間には必ず「半角スペース」が必要になります。 複数のクラス名を並記する場合にはこのような書き方をしますが全角スペースはNGですからご注意下さい。

さて、上記①~③を施すことでAkira風ブログカードは、どこでもドアじゃなくて(笑)ブログカード上のどこをクリックしてもそのリンク先に遷移出来るようになるんですが、それにはご利用中のブログテンプレートに jQueryが備わっている必要があります。

Akira風ブログカードの開発者さんの Akira(vanillaice000)さん が配布しているレスポンシブテンプレートには全てそのjQueryは装備されておりますから問題なく動作出来ますが、もし備わっていないテンプレートをご利用でしたら

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
のソースコードを、テンプレートの「HTML編集」欄の </head> より上にコピペしてから「更新」ボタンをクリックしてjQueryを導入しておくことが必要ですが、既に別のバージョンのjQueryが存在していることに気がつかないで上記を貼り付けてしまうと、干渉しあって他のJavaScriptまで動作出来なくなってしまうことがありますからよく確認しましょう。

さてさて、Akira風ブログカードのカスタマイズ性に富んだその魅力にはウハウハ(笑)してしまう筆者でした(爆)


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

Comments 4

There are no comments yet.

よつば  

スゴイスゴイ ""ハ(^▽^*) パチパチ♪

ぼっちん先生~♪ こんにちは~♪ 早速教えてくれてありがとう💕

やっぱりぼっちん先生はスゴイね~!
どこでもクリック♪早速よつばも 装備完了!∠(*^ー^*)oラジャ!!
こうだと良いのにってこと、すぐに実行できちゃうなんてね~!流石!

これからは、パソコンよりスマホで見る人も増えるようだし~
タップしやすいって必要なことなんでしょうね~♪

そうそう、コメントしたらぼっちん先生のプロフィール画像が
ドーンと出てきてビックリ!w(*゚o゚*)w
以前コメント弾かれた時、あれの設定最中にコメントしちゃってて
受け付けられなかったのかなぁとも思いました(*^ー^*)

2018/01/11 (Thu) 11:40 | EDIT | REPLY |   

ぼっちん  

よつばちゃんへ

よつばちゃん、いらっしゃい ^^

どこでもクリック♪早速よつばも 装備完了!∠(*^ー^*)oラジャ!!
あっ 素早いねぇ、もう導入しちゃったって ヽ(^^ ) ヨシヨシ
でもパパパってやれちゃうくらいに簡単だったでしょ(笑)

こうだと良いのにってこと、すぐに実行できちゃうなんてね~!流石!
さすがって言うか(笑)以前からこういうテクってけっこう使ってたから「あっ そうだ、Akira風ブログカードでもやっておこう」って思ったまでなんだけど、よつばちゃんが言うように、これからはほんとにモバイルデバイスでのブログ閲覧がもっともっと増える一方になると思うから、この考え方は正解なんだと思うけどね ^^

そうそう、コメントしたらぼっちん先生のプロフィール画像が
ドーンと出てきてビックリ!w(*゚o゚*)w

(〃^▽^〃)oあはははっ♪ いきなり出てくるとインパクトあるでしょ~(爆)

以前コメント弾かれた時、あれの設定最中にコメントしちゃってて
受け付けられなかったのかなぁとも思いました(*^ー^*)

あのねぇ(笑)私がそれを編集してた時ってことよりも、きっとたぶんFC2運営がこのシステムを調整していた時に、たまたまよつばちゃんのコメントが引っかかっちゃったのかな?って感じだよ (^_^; アハハ…

お察しの通り、コメント直後の表示ページの編集は「コメント投稿完了ページの設定」ってのが有料版で機能追加になったばかりなんだけど、ある日突然「おやぁ?」って感じで気がついたのよ (^^ゞポリポリ

2018/01/11 (Thu) 13:52 | EDIT | REPLY |   

mochi  

コレやりたかったやつだぁ!!

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

コレをやりたくて、ブログカードのアチコチに<a href="">とか入れたけど、
うまく出来なくて諦めてたやつですよぉ!! m(;∇;)m うれしすぎるっ!

やはり本質を理解できている人は一味違いますね。
さっそくパクらせてもらいました。 パク(*'~'*)モグモグ

過去に貼り付けたものにも反映させたかったので、
汎用性は無くなりますがJavaScriptのところの".tobuyo"を
ブログカードのクラス".blogcard-gr"に変えちゃいましたけど。(;^_^A アセアセ・・・

ぼっちんさんのおかげでブログカード全体でリンクできるようになったので、
カードにオンマウスした時にピン留めが外れるようにしてみました。

もうもうブログカードがどんどん進化していって嬉しくなっちゃいます!! ヾ(〃^∇^)ノわぁい♪

2018/01/11 (Thu) 21:40 | EDIT | REPLY |   

ぼっちん  

mochiさんへ

mochiさん、こんばんは~ コメントをありがとうございます ^^

コレをやりたくて、ブログカードのアチコチに<a href="">とか入れたけど、
うまく出来なくて諦めてたやつですよぉ!! m(;∇;)m うれしすぎるっ!

あららら(笑) mochiさんにそんなに喜んで戴けてるなんてウソのようで (〃^▽^〃)oあはははっ♪
このテク、私はもう5年くらい前から使ってるんですけど (^^ゞポリポリ

過去に貼り付けたものにも反映させたかったので、
汎用性は無くなりますがJavaScriptのところの".tobuyo"を
ブログカードのクラス".blogcard-gr"に変えちゃいましたけど。(;^_^A アセアセ・・・

えっ! そ、それなんですけど~ それやっちゃうと今後の他の拡張性に於いてちょっと支障が出てくる予感がしちゃうんですけどね~ (^_^; アハハ…
ですから、わざと私はクラス名を独立化させたんですけど (^^ゞポリポリ
まぁ、そうなったらなった時に対応することも可能でしょうけど(笑)

ぼっちんさんのおかげでブログカード全体でリンクできるようになったので、
カードにオンマウスした時にピン留めが外れるようにしてみました。

あ~(笑)なるほどなるほど、一石二鳥でしたねぇ (〃^▽^〃)oあはははっ♪

もうもうブログカードがどんどん進化していって嬉しくなっちゃいます!! ヾ(〃^∇^)ノわぁい♪
でしょでしょ(笑)カスタマイズ性の高いAkira風ブログカードのおかげで、いろいろと楽しめちゃいますもんね~(笑)
他のブログカードじゃこんなアイデアも盛りつけられないですからねぇ(笑)

2018/01/11 (Thu) 21:55 | EDIT | REPLY |   

Leave a reply