このサイトに関して




  • 2017/11/18
    ブログを更新しました。


    ■特設コーナー










    憲法改正を実現する1,000万人ネットワーク 美しい日本の憲法をつくる国民の会




    ■ご利用上の注意
    記事へのリンクはご自由になさって結構です。
    但し、画像等、記事内のコンテンツの無断転載、画像への直接リンクによるまとめサイト等他サイトへの転載は固くお断りします。(加計学園問題関連の画像はご自由にお使い下さい。)

    コメントにURLを貼る場合は、「http://」、「https://」を除いて貼り付けて下さい。

    上記に関し、詳しくは下記バナーから「当サイトについて」をお読み下さい。



    このブログの趣旨など。コメント欄はゲストブックとしてご利用下さい。


    記事についてご不明な点などはメールでは回答しかねますので、各記事のコメント欄にお願いします。





各種ノウハウ集



管理人ポータル

大師小同窓会関連








  • 画像を提供、あるいはオリジナル写真を貸して下さる方は管理人までご連絡ください。


我が町!大師の情報

  • 大師の歴史・町名の由来

私家版スクラップブック

  • ブログ主の個人的スクラップブック集です。

    100円ショップの木箱やディスプレイケースなどを利用したドールハウスのまとめページです。

    メンテナンス中のため一時アクセスを制限しています。

友達の輪・お薦めSHOP

  • CHITIのボディデザイン
    魅せるボディデザイン/カラダ作りの本質とは!?
    川崎市在住のインストラクターが近隣のスポーツ施設や公園・ご自宅でのパーソナルトレーニング受け付けます。




    かわさき楽大師

    ファッション・雑貨の店 「+R」

    ヘアーサロンE'(イーダッシュ)


« レスリングオリンピック除外へ:『IOC理事はオリンピックの精神を殺した』 | トップページ | 【プチ工作】・【書籍】100均ボトルをシールでデコ/沢木耕太郎『キャパの十字架』 »

2013/02/16

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

この記事の目的

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

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

 

 

 

 

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

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

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

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

 

Google

 

 

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

 

Target_blank01

 

 

設定方法

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

 

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

 

Target_blank02

 

 

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

 

Target_blank03

 

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

 

Target_blank04

 

ここで、

 

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

 

Target_blank05

 

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

 

画像にリンクを貼る

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

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

 

Banner_excel 画像(1)

 

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

 

Banner_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>

 

 

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

 

作業手順

 

Link_on_image

 

 

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

 

 

 


 

« レスリングオリンピック除外へ:『IOC理事はオリンピックの精神を殺した』 | トップページ | 【プチ工作】・【書籍】100均ボトルをシールでデコ/沢木耕太郎『キャパの十字架』 »

コメント

ブログ主さま

ココログを使用している者です。
リンクのご説明大変大変助かりました!

右クリックで別ウィンドウで開く方法を知っている方がいらっしゃるんですね。
なら、今のままでリンク張って行きます!

素晴らしい知識をありがとうございました!

ブログの場合、ページランクって努力しなくても高くなるんじゃないでしょうか。
要はcocologの評価が高いわけで、その配下にある、あるいはそれにリンクされている各ブログは同じランクじゃないかと思うのですが、どうなんでしょう...検証したことはないのですが。

タイトルにキーワードが多く入っている、文章が長いとわりと簡単に上位に来ますね。

いつか自分もノウハウ系記事を書いてみたいと思いました

ところでさっき計測してみたら
大師小ブログ主様もグーグルのページランク4なのですね

ユウぱぱさん、こんにちは

このようなノウハウは以前からwebページで目次を作って管理しています。

記事中にそのwebページへのバナーを貼ってみました。

記事のタイトル文も分かりやすくていいですね

同じような解説記事をまた書いたら
この記事の一番下にリンクさせて
まとめて見れるようすると読者としては
大変嬉しいです

コメントを書く

(ウェブ上には掲載しません)

« レスリングオリンピック除外へ:『IOC理事はオリンピックの精神を殺した』 | トップページ | 【プチ工作】・【書籍】100均ボトルをシールでデコ/沢木耕太郎『キャパの十字架』 »

サイト内検索
ココログ最強検索 by 暴想
2017年11月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    

sponsored link


ドールハウス工作おすすめ参考図書

ドールハウス工作おすすめアイテム(材料・工具)

カテゴリー

無料ブログはココログ