イントロダクション
ブログ上では、レイアウトが決まっているため、大きなサイズのコンテンツは扱いづらいです。特に、横幅はたいてい固定されているうえに、サイドバーなどがあるため、大きなコンテンツは縮小して配置するか、狭い領域に配置する工夫が必要になります。
コンテンツのなかでも、特に表のような幅が広いコンテンツは、配置するのが面倒です。
Webページでも、本文とその他の部分でコンテンツのサイズが固定されている場合には、大きなサイズのコンテンツは扱いづらいです。
そんな時は、ブログの本文中では、収まらなかった部分をスクロールで見せるようにしておき、新しいウィンドウでそのコンテンツ全体を見せる方法があります。
本文中のコンテンツを新しいウィンドウで表示する JavaScript コード
JavaScript コード
<div id="new_window_src" style="overflow-x:scroll;">
<!-- コンテンツ ここから -->
<table>
<tr>
<td>
<b>これはテストの表です。！ </b><br />
</td>
<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</tr>
</table>
<!-- コンテンツ ここまで -->
</div>
<input type="button" value="新しいウィンドウで開く" onclick="openNewWindow(document.getElementById('new_window_src').innerHTML, 'new window')"/><br />
<script type="text/javascript">
<!--
/*
新しいウィンドウを開き、指定された HTML を出力する
html : 出力する HTML データ
title : タイトル
*/
function openNewWindow(html, title) {
// 新しいウィンドウを開く
var win = window.open();
// 書き込み開始
win.document.open();
win.document.write("<html><head><title>" + title + "</title></head><body>" +
html +
"</body></html>");
// 書き込み終了
win.document.close();
}
//-->
</script>
実行結果
| これはテストの表です。！ | aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa |
解説
<div id="new_window_src" style="overflow-x:scroll;"></div> 内に記載されたコンテンツを、そのまま新しいウィンドウで開きます。その div タグの style 属性に overflow-x:scroll; が指定されているため、ブログ本文中では本文の幅よりも大きなコンテンツはスクロールして全体を確認することになります。
overflow-x - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/overflow-x
https://developer.mozilla.org/ja/docs/Web/CSS/overflow-x
そして、ボタンをクリックすると、openNewWindow 関数が呼び出され、引数に指定された HTML コードと、タイトルを用いて、新しいウィンドウで新しいHTMLドキュメントを作成します。
なお、一つの本文中に 2 つ以上このコードを配置したい場合には、id 属性値"new_window_src" をそれぞれ別物にする必要があります。（script タグの部分は 1 つだけあれば問題ありません。）
例）new_window_src1, new_window_src2 など。
その時に、以下の 2 つの値が同じ値となる（対応する）ようにする必要があります。
なお、一つの本文中に 2 つ以上このコードを配置したい場合には、id 属性値"new_window_src" をそれぞれ別物にする必要があります。（script タグの部分は 1 つだけあれば問題ありません。）
例）new_window_src1, new_window_src2 など。
その時に、以下の 2 つの値が同じ値となる（対応する）ようにする必要があります。
- div タグの id 属性 の new_window_src
- input タグの onclick 内の new_window_src
まとめ
このように、新しいウィンドウにコンテンツを出力することで、Webページやブログなどといった媒体の本文の幅などに制約されずに、巨大なコンテンツを見やすく設置することが可能になります。唯一問題となるのは、Webページ自体を印刷するなどして、巨大なコンテンツのスクロール機能や新しいウィンドウで表示機能が働かなくなる状態でしょうか。
この仕組みをうまく活用して、使いやすいブログ/Webページのコンテンツを作りたいものですね。
 |
コメントを投稿
コメント投稿機能について