【ブログの楽しみ方】リンク先を別タブまたは別ウィンドウで開かせるには？【ココログ】

この記事の目的

HTMLタグの知識がない方でも、「HTMLの編集」で編集し、リンク先をブラウザの別タブまたは別ウィンドウ（以下「別タブで開く」と省略）できるように説明するもの。

後半では、画像にリンクを貼る方法を説明しています。

ココログでブログを書いていて、他のサイトや自ブログの他のページへのリンクを貼ると、デフォルト（規定値）では同じウィンドウで新しいページを開くという設定になっています。

ブログ主は別タブで開くか同一ウィンドウで開くかは自分でルールを決めて、適宜htmlタグを編集しているのですが、ブログの滞在時間や閲覧数を増やすために、特に他サイトへのリンクは自分のウィンドウは閉じずに別タブで開かせたいと思われる方も多いのではないでしょうか。

別タブで開かせるのはとても簡単な設定なので、以下、ご紹介します。

下は「Google」という文字列にGoogleのトップページへのリンクを貼っていますが、これは別タブでひらくようにしています。

Google

なお、別タブで開くか別ウィンドウで開くかは、閲覧している人のブラウザの設定によります。（下はFireFox（左）とInternet Explorer8（右）のプロパティです。）

設定方法

以下の説明の1と2はココログでリンクを貼るという基本的な操作なので、ご存じの方は3からお読み下さい。

1.　特定の文字列にリンクを貼るには、その文字列をドラッグで範囲指定し、『リンクを挿入』アイコンをクリック。

2.　ポップアップするアドレス入力欄に、リンク先のURLをコピーして貼り付け。

3.　編集モードを「HTMLの編集」に切り替える。

ここで、

<p><a href="http://www.google.co.jp/">Google</a></p>

となっているのを、

<p><a href="http://www.google.co.jp/" target="_blank">Google</a></p>

と、『target="_blank"』を挿入（タイプ）するだけです。

『target="_blank"』の前に半角スペースを必ず入れ、全て半角で入力て下さい。

『別タブで開く』はほどほどに

なお、別タブで開く設定の多用は嫌われる場合もあるので注意して下さい。

時々、常に別タブで開くように記述しているサイトがありますが、次々に新しいタブが開いたり別ウィンドウがポップアップするを煩わしいと感じる閲覧者もかなりいます。

『target="_blank"』が設定されていてもいなくとも、「このページは開いたままにしておいて、リンク先は別ウィンドウで開きたい」と思えば、下のようにリンクの上で右クリックして表示されるメニューから選ぶ方も多いのです。

ですから、ブログ主は原則、『外部サイトへは別タブで開く設定、自ブログへのリンク（マイフォトを除く）は同一タブで開く』というマイルールを決めています。

画像にリンクを貼る

基本的には、文字列にリンクを貼るのと同じ構造です。

下の2つの画像は自分で作成したバナー（banner／他のサイトやページを紹介する役割をもつ画像で、アイコンの一種です）ですが、上のバナーは単純に画像としてブログに貼り付けてあるので、クリックすると元のサイズの画像がポップアップで表示されます。

　画像(1)

対して、下のバナーにはマイフォトの『Excelでお絵かき』のページへのリンクが貼られています。

　画像(2)

以下、このようなバナーの使い方を説明します。

ここで、もう一度Googleへのリンクを例にHTMLタグを見てみると、

<p><a href="http://www.google.co.jp/">Google</a></p>

• <p>～</p>　：　段落
• <a href="URL">～</a>　：リンク先の指定　
• 赤字の部分　：　リンクが貼られる対象（ここでは「Google」という文字列）

となっています。

画像(1)は

<p><a href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2013/02/13/banner_excel.jpg" onclick="window.open(this.href, '_blank', 'width=223,height=97,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img width="159" height="69" border="0" alt="Banner_excel" title="Banner_excel" src="http://daishi100.cocolog-nifty.com/blog/images/2013/02/13/banner_excel.jpg" /></a></p>

となっていて、複雑に見えますが、

• <a href="～" ...>の「～」の部分が「画像のURL」か、「他の記事、またはサイトのURL」か
• 赤い文字で示した部分が、「Google」という文字列か、画像（<img .... />）か

の違いのみで構造は基本的に同じです。

従って、<a href="画像のURL" ...>の部分を<a href="リンク先のURL">とすれば、リンク先が開き、更に<a href="リンク先のURL" target="_blank"> とすれば、画像をクリックすると別タブでリンク先を開かせることができます。

画像（2）はそのように編集し直したもので、htmlタグは下記のようになっています。

<p><a href="http://daishi100.cocolog-nifty.com/photos/excel/" target="_blank"><img width="159" height="69" border="0" src="http://daishi100.cocolog-nifty.com/blog/images/2013/02/13/banner_excel.jpg" title="Banner_excel" alt="Banner_excel" /></a></p>

　

以下、作業手順を図示したものを追加します。

作業手順

　

（拍手はブログ主のモチベーション維持程度の目的です。面白かった、役に立った、等々、宜しければクリックしてください。）

---