ブログカードで紹介したサイトを新しいウィンドウで開く方法
他の人が書いたブログ記事を読んでインスパイアされたとき、自分のブログ内で持論を展開しつつ、元の記事の紹介もすると思います。あるいはネットニュースを参照しながら記事を書くときとか。
そういうとき、私は最近ブログカードを多用しています。他のブログでもよく見かけます。
でもデフォルトのままだとすこ～しだけ不満がありまして。私はいつも一手間加えてから使用するようにしています。それが今回のタイトルにもあること。
まずは順を追って見ていきましょう。
ブログにおける参照元表記方法 5つのパターン
たとえば当ブログの記事を紹介する場合。
①「ここ」とか「こちらから」とか
昔はこんな感じのリンクが普通でした。
しかしこれだと訪問者にとってリンク先が分かりづらい。もしかしてアダルトサイトだったりして！？
なおかつキーワードもへったくれもないので、SEO 的にもよろしくない。いまはあまり見かけなくなりましたね。
② URL リンクだけ掲載する
なんてシンプル。ですがリンク先の記事の内容は、これだとやはりまったく分かりません。
訪問者も興味をそそられないので、せっかく紹介してもアクセスは流れづらいでしょう。
③記事のタイトルにリンクを貼る
これは分かりやすいですね。単に URL だけを掲載するよりも100倍はアクセスは流れると思います。
④記事のタイトルに加え、画像も使ってみる
リンク先がどんなサイトなのかが見えるようなりました。目を引く画像などでもいいでしょうね。もちろん画像にも当該記事へのリンクを仕込んでおきます。
これまでの①～④の手法の中では、いちばん効果があるでしょう。でも毎回記事紹介するたび、画像キャプチャしてトリミングして～というのはすごく面倒。そのうち「記事タイトルだけでいっか！」となることでしょう。
⑤ブログカード（ブックマークレット）を使う
という悩みを解決するため（かどうかは分かりませんが）、最近では外部サイトを紹介する際にはブログカードというものがあります。ブラウザのブックマークレットを使用するものです。もちろん別にブログじゃなくても大丈夫。
はてな風のデザインが定番人気ですが、最近だとこの embed.ly というサービスの見栄えが良いですね。
なんかかっこいいサイトに見える！
自分なりに規則性を持たせた使い方をしよう
なお当ブログではこのようなルールで使い分けています。
- ブログ内リンクは記事タイトルテキストリンクで、同一ウィンドウで開く
- 外部サイトへのリンクはブログカードを用い、新ウィンドウで開く
何かしらルールを決めれば運用も楽になると思います。
・・・そしてなんとここまでが今回の記事の導入部分。本題はここからになります。
ブログカードのリンクを新しいウィンドウで開くための方法
上述⑤の embed.ly 、あるいは他のブログカードも同じですが、デフォルトではリンクは「同一ウィンドウ」で開く形になっています。
ただし私のルールでは外部サイトへのリンクは新ウィンドウで開きたい。スマホ時代そんなこだわり意味がない。いやわかるけど、嫌なものは嫌なの！
同じように考えている方もいらっしゃるかもしれません。
そういう方のため、今回は各種ブログカードからのリンクを新しいウィンドウで開くための簡単な方法を記します。
まずはコードをコピペする
やり方はいたって簡単。 まずはいつものように、ブックマークレットから吐き出されるコードを貼り付けます。 ※超初心者さんのために一応書きますが、コードは「テキストエディタ」の方に書かないとダメですよ。 
こっちのほうね。 今回⑤で作ったカードのコードは下記のとおり。
|
1 |
<a class="embedly-card" href="https://pinonon.com/useless/">俺はダルシムよりもヨガ。愚地独歩よりもグリグリ動く</a><script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script> |
たった15文字を追記するだけでできあがり
ここに
という数文字を追加するだけで、リンク先を新しいウィンドウで開くことができるようになります。 追加するのは HTML コードの “<a” で囲まれた部分にある、href=”URL” のうしろ。別にうしろじゃなくてもいいですが、うしろにします。
とします。それだけ。 下記が新しいウィンドウで開くようにしたカード。ぱっと見は変わりませんが、リンクをクリックすれば新しいウィンドウで開くようになっていることが分かります。 俺はダルシムよりもヨガ。愚地独歩よりもグリグリ動く
他のブログカードでも同じやり方で OK
もしも他のブログカードを使っている場合でも大丈夫です。
コード内の “<a” で囲まれた部分にある href=”URL” を探し、その後に target=”_blank” を追記すれば OK。
注：くれぐれも記述は正確に
なお私はむか～し、target=”-blank” と書いたり target=”_black” と書いたりして、ぜんぜんうまくいかないことがありました。（何がおかしいのか分かりますよね？）
たとえ短くとも過信せず、コードは正確に書きましょう。
2016/12 追記
最近はこのサービスは使わなくなりました。
意外となんでもできるもんですよ
なんと target=”_blank” のために2,500文字を費やしましたw
こんなの知っている人にとっては当たり前のこと。でも最近ブログを始めた人なんて、これまでの人生で HTML など触ったことがない人のほうが多いでしょう。既存ウィンドウで開く／新規ウィンドウで開く、それを自分でコントロールできることすら知らないかも。
ましてやブックマークレットを使ったブログカードなんて、何も考えずにコピペする人のほうが多いでしょう。いじったら壊れる！とか考えちゃいますもん。
でも「こんなことできないかな？」と調べてみれば、意外となんでもできるもんです。私だって Web デザイナーでもコーダーでもないのに、当ブログで最低限のカスタマイズはできましたしね^ ^
では再見。
この記事へのコメントはこちら