【ブログの楽しみ方】リンク先の説明をポップアップ表示する方法【ココログ】
ブログ記事の中で特定の文字にリンクを貼ることはよくありますが、リンクにマウスポインターを重ねたときに説明文をポップアップさせる方法を説明します。
下はサンプルです。
このように表示されたら閲覧者にとって分かりやすいだけでなく、ブログ記事上には表示されていなくても、実際の記事には、ポップアップされた文言も書かれているので、Googleなどの検索の対象になり、アクセスアップにもつながります。
「title」プロパティ
説明文をポップアップさせるには、記事編集画面を「HTMLの編集」に切り替えて、HTMLタグに「title」プロパティを書き加えるだけです。
記事中の文字にリンクを貼ると、
詳しい経緯はこちらの記事をお読み下さい。
「HTMLタグ」に切り替えると...
詳しい経緯は<a href="http://daishi100.cocolog-nifty.com/blog/2017/05/post-55ce.html">こちらの記事</a>をお読み下さい。
<a>というHTMLタグの中に「href="リンク先のURL"」という要素(プロパティ)が書かれています。これに更に、「title="説明文"」プロパティを書き加えるだけです。
プロパティとプロパティの間には半角スペースを入れて下さい。
詳しい経緯は<a href="http://daishi100.cocolog-nifty.com/blog/2017/05/post-55ce.html" title="ブログ記事『【加計学園問題】5分で分かる“真実の”加計学園を巡る経緯』">こちらの記事</a>をお読み下さい。
再び「記事の作成」に切り替えると...
詳しい経緯はこちらの記事をお読み下さい。
見た目は変わりませんが、マウスポインターを下線が引かれている「こちらの記事」に重ねると、「ブログ記事『【加計学園問題】5分で分かる“真実の”加計学園を巡る経緯』」という文字がポップアップします。
以下は過去の記事にも書きましたが、
「target="_blank"」プロパティで別タブ(別ウィンドウ)でリンク先を開く
詳しい経緯は<a href="http://daishi100.cocolog-nifty.com/blog/2017/05/post-55ce.html" title="ブログ記事『【加計学園問題】5分で分かる“真実の”加計学園を巡る経緯』" target="_blank" >こちらの記事</a>
再び「記事の作成」に切り替えると...
詳しい経緯はこちらの記事をお読み下さい。
クリックすると別タブ(ブラウザの設定によっては別ウィンドウ)で開きます。
「title」プロパティで画像の説明をポップアップさせる
「title」プロパティは画像でも使用できます。
画像を記事内に挿入すると、自動的に「title="画像のファイル名"」がプロパティとして記述されるので、「画像のファイル名」部分を書き換えるだけです。
« 【衆議院選】他党名義で選挙に出て選挙後は再結集を目論む民進党 | トップページ | 【プロ野球】2017年10月、11月のプロ野球日程・テレビ中継まとめ »
« 【衆議院選】他党名義で選挙に出て選挙後は再結集を目論む民進党 | トップページ | 【プロ野球】2017年10月、11月のプロ野球日程・テレビ中継まとめ »
コメント