「美しき日本の風景」ホームページを改修

美しき日本の風景」のホームページを、最近の多種多様なディスプレーサイズに対応するように、レスポンシブWebデザイン対応に改修した。
ネットを見ていたら、偶然に下記のサイトが見つかった。
http://www.coolwebwindow.com/html5/
ちょうど、ホームページをスマホ対応にしなければ・・・・。と思っていたところだったので、「無料で配布しています」の文字に、これ幸いと、飛びついた。

何から改修しようか迷ったが、最も構造が簡単で、改修が楽なのは「美しき日本の風景」だろうということで、先ず「美しき日本の風景」を改修することにした。
無料のテンプレートは6個用意されているが、1番人気とある「No.006」を使わせてもらうことにした。グローバルメニューの赤い色はギャラリーのページにはちょっとふさわしくないように思えたので「黒」に変更した。

いろいろ変更しなければならない部分もあり、完成に近づいて気が付いてみると、元のテンプレートで機能していたレスポンシブデザインが機能しなくなっている部分が出てきた。いろいろ試してみたが、うまく行かない。
そこで、このテンプレートのページに『ホームページの作り方がわからないなどありましたら、下記メールアドレスまでお気軽にお問い合わせください。』のサポート案内があることを良いことに、作者にメールでご指導を仰ぐことにした。
そうしたら直ぐに、たいへん詳しく具体的な内容の返信を頂いた。

ご質問の件ですが、画像が画面に合わせて拡大、縮小したりする仕組みをご説明します。
CSSにて、画像の横幅を100%表示することにより、画像を拡大、縮小しています。
例えば、トップページの右側サイドメニューのバナーが、スマートフォンサイズで見た場合に、ブラウザの幅に
合わせて拡大・縮小されるのは、公開されているテストサイトのCSSファイル(style.css)の513行目~
==================
.bnr img {
	width: 100%;
}
==================
というように、画像を横幅100%表示させているからです。
なので、profile.html の73行目の、
=====================================
<div id="sub">
	<img src="images/profile-01.png" alt="">
	<img src="images/profile-02.png" alt="">
</div><!--/#sub -->
=====================================
これを以下のように変更します。
========================================
<div id="sub">
	<ul class="bnr">
		<img src="images/profile-01.png" alt="">
		<img src="images/profile-02.png" alt="">
	</ul>
</div><!--/#sub -->
========================================
これで、画面に合わせてプロフィール画像サイズが変更します。
もし、バナーじゃないのに、バナークラスに入れるのが嫌だなーと思われたら
========================================
<div id="sub">
	<div class="profilePhoto">
		<img src="images/profile-01.png" alt="">
		<img src="images/profile-02.png" alt="">
	</div>
</div><!--/#sub -->
========================================
というように変更してください。

感謝感謝です。どこの誰かも分からない者に、本当にありがたいことです。

また、この作者は MITライセンスを取得されていたので、その取扱いについて質問した。以前から MITライセンスの扱いに関して、良く分からない部分があったのでちょうど良い機会だった。
その結果、MITライセンスの著作物を利用するには

1.著作権者の表示
2.MIT License そのものの記載(ただし、MIT License を記載したページのリンクでも可)

ということだ。
具体的には一般的に当該 JavaScript のソースの最初の部分に表示してあるライセンス条項を削除したり改変しない限り、複製の使用、複写、変更、結合、掲載、頒布、サブライセンス、または販売する権利、およびソフトウェアを提供することができ、利用は無償です。ということだ。
これで、今までページの下端部分に表示していた justifiedGallery.js の MIT License の著作者表示が不要だということに、すっきりした回答を得ることができた。

と、いうことで完成したのが、下記のサイト。
http://sjobojiz.sakura.ne.jp/

今回も各HTMLページには画像データや記事などのHTMLタグは直接入力せず「list.txt」によるデータベース方式にして、JavaScript で表示することにした。そのため画像や記事が追加になっても、春夏秋冬のページやトップページ、および日記ページのHTMLを書き換える必要は全くない。四季フォルダの「list.txt」と日記フォルダの「list.txt」にデータを追加するだけでよい。
日記一覧から指定の日付のページに遷移する場合、1枚のHTMLページを共用するために、URLパラメータ方式を採用した。このため各日付分のページを用意する必要はなく、1ページのHTMLページで済んだので非常にシンプルになった。

表示用の JavaScript はページのソースを見ていただけば分かりますが、justifiedGallery 関連の js および css については、下記を参照。
http://miromannino.github.io/Justified-Gallery/
また、CSVファイルからデータを取り込む csv2Array(filePath) については、下記の通り。


function csv2Array(filePath) {						//csvファイルのパス
	var csvData = new Array();
	var data = new XMLHttpRequest();
	data.open("GET", filePath, false);				//true:非同期、false:同期
	data.send(null);
	var LF = String.fromCharCode(10);				//改行コード
	var lines = data.responseText.split(LF);
	for (var i = 0; i < lines.length;++i) {
		var cells = lines[i].split("<>");
		if( cells.length != 1 ) {
			csvData.push(cells);
		}
	}
	return csvData;
}
				
データ
  • 2016.09.16(火)

 

アーカイブ

現在位置: ホームなんでも日記メニュー > このページ