Q&A
回答ではありませんがツッコミを。質問者様はおそらくJavaとJavaScriptを混同しておられます。普通htmlと一緒に使用するのはJavaScriptです。JavaとJavaScriptはグレープとグレープフルーツぐらい違います。まぁこの区別がないことにより質問者様はjsができないというのは伝わりますが…(^ ^;
ブラウザーのタグにタイトルを表示したいと思っています。
普通にタイトルをつける場合は
<title>サムネイル</title>で表示されるのはわかります。ですが、以下のコードで新しいタグで拡大画像を開いた時に、
新しい方のタグの方にも「拡大画像」と表示する方法がわかりません。
画像のような感じでサムネイルのページの方は
<title>サムネイル</title>のタイトル「サムネイル」が表示されるのですが、 新しいタグで開いた拡大画像のページは何もしなければ「ファイル名」が表示されてしまいます。このページのファイル名の表示を「拡大画像」にしたいのですが、
コードの書き方がわかりません。
すいませんが、詳しい方、説明の上手な方、htmlのコードの書き方を教えて下さい。
追記
手軽に使いたいので、htmlでお願いします。
css、javaでないと、表記できない場合は説明は不要です。
※「htmlだけでは表示出来ない」とだけ、ご解答を頂ければ十分です。
※cssは勉強中です。javaは全く知識がありません。
説明して頂いても、今の知識では理解出来ないと思いますので。
<title>サムネイル</title> <a href="Image1B.jpg" class="popup-image" target="_blank"> <img src="Image1A.jpg" /></a><br>
回答2件
0
ベストアンサー
面倒ですけど、
画像だけ表示するhtmlを作り、aタグのアンカーに設定しているurlをそこにして、そのhtmlのタイトルを「拡大画像」にする、
というのはどうでしょうか？
表示する画像が多くなるならばちょっとはjs等を使いたくなりますけどね…(^ ^;
追記 :
- 質問者様が本当は例えば100枚の画像(
Image1A、Image2A、…、Image100A)を似たような方法で表示するつもりなのだとしたら、次に示す2)のコードだとhtmlファイルを100個用意しなければなりません。
それは非常に効率が悪いので、もしそうなら私ならjsを使った実装をします。という意味で書きました。
1枚しかないならどうでもいいです。忘れてください。
- つまりこんなイメージです。
↓index.html (メインページ)
html
1<!doctype html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>サムネイル</title> 6 </head> 7 <body> 8 <a href="Image1B.html" class="popup-image" target="_blank"> 9 <img src="Image1A.jpg" /></a><br> 10 </body> 11</html>
↓Image1B.html
html
1<!doctype html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>拡大画像</title> 6 </head> 7 <body> 8 <img src="Image1B.jpg" /> 9 </body> 10</html>
追記2 :
JavaScriptを使ってしまいましたが、以下はどうでしょうか?
html
1<a onclick="w=open('',null,'');w.document.write('<title>拡大画像</title><img src=\'Image1B.jpg\' />');" class="popup-image"> 2 <img src="Image1A.jpg" /> 3</a>
はてブでうまくいくかは試していないのでもしかしたら失敗するかもですが...(^ ^;
それとある意味で「js使わないと無理」と言っているようなものですね、、
試してみていただけると幸いです。m(_ _)m
投稿2018/03/06 16:13
編集2018/03/07 00:14総合スコア2043
ご解答ありがとうございます
すいませんが、ご指摘の意味が全くわかりませんでした。
順番にいきますね。
１）表示する画像が多くなるならばちょっとはjs等を使いたくなりますけどね…(^ ^;
↓
表示する画像は1枚です。コードをメモ帳にコピーして、拡張子を「.html」にして、
ブラウザーで開いてみて下さい。
※同じフォルダーに「Image1A.jpg」と「Image1B.jpg」が必要です。
※「Image1B.jpg」が大きい方です。
２）aタグのアンカーに設定しているurlをそこにして、そのhtmlのタイトルを「拡大画像」にする、
↓
これも意味がわからないです。コードはどう書くのでしょうか？
せっかく教えて頂いたのですが、こちら知識不足で理解出来ず、すいません。
お手数ですが、サンプルのコードに書き加えて頂けたら、ありがたいです。
ご解答ありがとうございます。
追記しました。よろしくお願いします。m(_ _)m
ご解答ありがとうございます。
２）aタグのアンカーに設定しているurlをそこにして、そのhtmlのタイトルを「拡大画像」にする、
↓
これも意味がわからないです。コードはどう書くのでしょうか？
↓
コードを書いて頂き意味がわかりました。
ですが、これはダメです。
理由は「はてなブログ」という無料ブログのページ上で使うからです。
自分で自由にデザインできるのなら、別途拡大画像用のページを作成できます。
ですが無料ブログにはそんな機能はありませんし、
1ページ(＝ブログの1記事)を拡大画像用に割り当てるのでは、
手間がかかり過ぎます。
※自動生成されるURLが複雑ですし、画像1枚だけとはいえ記事の作成も手間です。
先のサンプルコードはページに貼り付けるだけで機能します。
非常に手軽なので、もし出来たらこのポップアップページ(新しいタグ)で
ページのタイトルが「拡大画像」と思い、質問させて頂きました。
追記
ポップアップページ(新しいタグ)は、ブログの記事と無関係です。
自動で新しいタグを生成するので、手作業で記事の作成は(自作のhtmlページ)は不要です。
このあたりの手軽さが魅力なので、「何とかならないのかな？」
と思った次第です。
何度もご解答ありがとうございます。
今日はもう寝ます。
しばらく質問は開けておきますので、また何かありましたら、
アドバイスを頂ければ嬉しいです。
何度もご解答ありがとうございます。
また追記しました。よろしくお願いします。m(_ _)m
ご解答ありがとうございます。
頂いたコードでバッチリです。
コードを書いて頂き、ありがとうございます。
前述のとおり私はJavaScriptの知識が全くありません。
ですが1つだけ教えて下さい。
頂いたコードを「はてなブログ」のページに貼り付けた時は
問題なくタイトルが表示されます。
ですが、ローカルでアップした時は2枚目の画像の右側（黄緑の枠の中）のように文字化けします。
なぜローカルでは文字化けして、サーバー上なら（インターネット上）なら
文字化けしないのか教えて下さい。
教えて頂いても理解できない可能性がありますが、今後、
JavaScriptの勉強をする時のヒントになればいいと思って、
質問させて頂きました。
この件だけ、簡単に（1122さんのストレスのない範囲で）説明して教えて頂けるとうれしいです。
ご面倒でしたら、スルーでもOKです。
※しばらく質問はあけておいて、「追記２」をベストアンサーにさせて頂きます
今回は解答して頂きありがとうございます。
おそらくですが、shift-jisとしてエンコードされたものをutf-8と解釈したために、文字化けが起きたのだと思います。jsの問題ではないです。
確証は全くありませんが(あと試してませんが)、<meta charset=\'utf-8\'>を加えれば直るかもしれませんし、直らないかもしれないですね。
最近は全てutf-8で処理するので、どこでshift-jisが混じったかぶっちゃけると私も見当がつかないです。
一応ファイルのエンコードも確認してみてください。
document.writeの発想はなかった. 地味に便利そう.
早速のご解答ありがとうございます。
<meta charset=\'utf-8\'>を追加しましたが、
文字化けのままでした。
実用上問題ありませんので（サーバー上で正常に表示されるので）、
この件は「よくわからないけれど文字コードの問題らしい。サーバー上では問題なし」
ということで大丈夫です。
今回は解答して頂きありがとうございます。
機会がありましたら、またお願いします。
JavaScriptを勉強するいいきっかけになりました。
アドバイスありがとうございます。
0
NOTE:
これはZZ-TOPさんに対する回答ではありません.（はてなブログで動作するかは不明です）
namnium1125さんの回答からヒントを得て, script要素一つ+αで対処する方法を考えてみました.
a要素にdata-title属性を設定しておくとリンクをクリックした際にその内容がウィンドウタイトルに設定されます
JavaScript
1window.addEventListener("click", e => { 2 const a = e.target.closest("a"); 3 const href = a.href; 4 const title = a.dataset.title; 5 if(!title || href==""){return;} 6 e.preventDefault(); 7 const doc = window.open("", "_blank", null).document; 8 doc.write(` 9<meta charset="utf-8"/> 10<title>${title}</title> 11<body style="margin:0;"> 12<img src="${a.href}" style="width:100%; height:100%;object-fit:contain;"> 13</body> 14 `); 15 doc.close(); 16}, true);
HTML
1<body> 2 <a href="a.jpg" data-title="あああああ"><img src="a.jpg"></a> 3 <a href="b.jpg" data-title="いいいいい"><img src="b.jpg"/></a> 4</body>
NOTE:
ブラウザによってはリロードで画像が消えてしまうようですが, こればかりは仕方がないなと
投稿2018/03/07 07:48
総合スコア4756
あなたの回答
tips
プレビュー
