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

2018年08月09日
2
0
Akira風ブログカード

以前の弊記事 『 Akira風ブログカードをクリック(タップ)しやすくする方法  』 で「Akira風ブログカード」をクリックしやすくする方法を書いておりました。

大抵のブログカードは、ブログカード内のテキストリンク部分や画像リンク部分をクリックしないとリンク先に遷移しない仕組みになっております。

Akira風ブログカード
[ 参考画像です ]

上図がその例なんですが、幸いに弊ブログで好んで扱っております「Akira風ブログカード」はとてもカスタマイズし易いものですから、ブログカード上のどの部分をクリックしても下図のようにリンク先に遷移出来るようにしたのでした ^^

Akira風ブログカード
[ 参考画像です ]

ところが、前回記事でカスタマイズしたものでは、ブログカードをクリックした時に同じタブ内にリンク先が開く為に、閲覧者さんが元の記事に戻るのにブラウザの「戻る」を利用する必要がありましたので「これでは使いにくい」と感じる人もいるようです。 考えてみれば開いたリンク先を閉じてしまったら元記事に戻れなくなってしまいますしね (^^ゞポリポリ

そのようなコメント会話を某ブログさんで拝見した(因みにそれは「Akira風ブログカード」ではなかった(笑))ものですから「おっ なるほどねぇ、それもそうだねぇ♪」ってことで早速に前回記事のものに改良を加えて「別タブで開くバージョン」を作ってみました ^^

まぁ、それは実は筆者も前回記事を書き終わった時点で「次は別タブで開くバージョンを書かなくちゃね」なんて構想はしていたんですけど、もうすっかりコロっと忘れ去ってしまっておりました、筆者自身では同一タブ内で開くことに不便さって感じてなかったものですから (^^ゞポリポリ

下の「Akira風ブログカード」がその別タブで開く新バージョンですから、ブログカードの何処でも良いですからクリック(タップ)してみて別タブ(別窓)で開くか確かめてみて下さいね(笑)


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

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


新バージョンと言っても、単にリンク先の開き方を変えただけの単純なことなんですけど (^^ゞポリポリ

前回記事で、、、

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

のようにブログテンプレートに埋め込んだjQueryを、、、

枠内をクリックすると「全選択」されますからそれをコピーすると簡単です
<script>
$(document).ready(function(){
	 $(".tobuyo").click(function(){
	 	 if($(this).find("a").attr("target")=="_blank"){
			 window.open($(this).find("a").attr("href"), '_blank');
	 	 }else{
		 	 window.location=$(this).find("a").attr("href");
	 	 }
	 return false;
	 });
})
</script>

のものと差し替えるだけで「Akira風ブログカードのリンク先を別タブで開く」ようになりますが、上記を部分的にコピペすると不具合が起きやすいですから、全部を差し替えるようにして下さい。

CSSやブログカードのHTMLは前回記事のそのままで変更不要です。

下記コードは上記の圧縮版です、こちらでも同じ動作をしますのでよろしかったらご利用下さい。

枠内をクリックすると「全選択」されますからそれをコピーすると簡単です
<script>$(document).ready(function(){$(".tobuyo").click(function(){return"_blank"==$(this).find("a").attr("target")?window.open($(this).find("a").attr("href"),"_blank"):window.location=$(this).find("a").attr("href"),!1})});</script>

はい、お茶です~

カスタマイズお疲れさまでした♪
お茶、熱いからふ~ふ~しますね~♪
え゛っ (^^;; アセ

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

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


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



関連記事
ぼっちん

Comments 2

There are no comments yet.

ロビンソン  

いいですね

こんにちは。
以前の記事を読んで、テンプレートとブックマークレットを書き換えました。
そして過去記事内のブログカードhtmlを修正していたんですが、別窓で開きたいものもある事に気がついて断念していました。

本当はこれをリクエストしたかったんですが、ぼっちんさんの開発者様へのお気持ちを考えて、控えていました(苦笑)

クラス名を使い分けて、同じタブと別タブで開くスクリプトを両方使わせていただきます。

2018/08/09 (Thu) 12:06
ぼっちん

ぼっちん  

To ロビンソンさん

ロビンソンさん、こんにちは
いつもご熱心にコメントをありがとうございます ^^

おやおや(笑) それではナイスタイミングだったでしょうか?(笑)
「Akira風ブログカード」は、ほんっとに多彩なカスタマイズが可能ですから、夢中になり過ぎちゃって時間を忘れちゃうんですよね~ (^_^; アハハ…

クラス名を使い分けて、同じタブと別タブで開くスクリプトを両方使わせていただきます。
うんうん(^-^) 良いですねぇ、そういう使い分けも出来ます (^_^)ニコニコ
きっとそのうちにロビンソンさんのオリジナルアイデアが登場するんじゃないかと ( ̄∀ ̄*)イヒッ

2018/08/09 (Thu) 12:34

Leave a reply