ヘッダとフッタは従来の会社HPのものと同じ

めんどくさい、ではなく、会社内でもデザインが統一感があると、安心も感じられるのではないかと思います

無駄に4K対応

4K画面で正しく最大化されてもきちんと閲覧できるように配慮

無駄なギガは使わない

画像の横解像度リストは、今回は以下の通りです

3840,2600,2160,1920,1680,1284,1100,992,810,768,750,576,512,428,414,412,375,312,288,256,214,207

もちろん、perl と b-shellでMakefileを作って生成するのですが

ペライチからダウンロードしたものが

Internet Explorer （これだけの為にまだ現役です）での、サイトダウンロード機能でダウンロードしてみたのですが

JavaScript 637,684bytes
CSS 371,794bytes

こんなにあってびっくりです。

こりゃ、ペライチは重いわ

そういえば画像もダウンロードしたのですが

これは担当君が悪いんです。

横300ぐらいで必要な画像が、横1200とか解像度あったりとか

まぁ、オリジナル画像はゲットできたものの、
これでWebサイト表示する側は重さで怒りが溜まらない

ペライチはwebpとかavifに対応してない

ということで、おなじみの画像変換をして

直接HTML書かせたくないから、こんな状態に

ペラのページは16セクションありました。
Wordpressのメニューに搭載すると、こんなに膨大に

完全にスタイルがCSSに依存するように、きれいなHTMLを書くためには、これしかなかったのです。

うちの会社の担当君なら、
タグをいっぱい連続させそうで。。。。

ペライチから出力されたHTMLは解析しずらい

まぁ、一応商用サービスですしね。

全く同一のものを全く別の記法で記述

でも、ホームページビルダーの自由配置モードよりは一応はマシ

Wordpressは、ただの特化型記事エディタになったわけです。

でも、それが本来あるべき姿なのかもしれません。
投稿も、固定ページも１つも書かず

唯一使ったのは、Contact Form 7

JavaScriptでAPIから状況が帰ってくるので、使いやすいです。

これだけでうまく動くかわかりませんが、↑のコードだけでも提示してみます。

script.js

/* 足りない関数は補完のこと */
	var	_footermenu = $(".footerFloatingMenu"),
		popuparray=[],
		popupflg=0,
		popupopen=undefined,
		func0, func1, func2, func3,
		contactcook="test";

	function popup(array) {
		if(array !== undefined)
			popuparray.push(array);

	}

	function popupview(mode) {
		if(mode == "open") {
			if(popuparray[popupflg] !== undefined) {
				if(popupopen === undefined && popuparray[popupflg][1] > -1) {
/* フォント読み込まない
					if(!popupflg) {
					    // ↓Google Web Fonts から Material Icons を読み込み
						var iconcss = document.createElement('link');
						iconcss.href = '//fonts.googleapis.com/icon?family=Material+Icons';
						iconcss.setAttribute('rel', 'stylesheet');
						document.head.appendChild(iconcss);
					}
*/
					var timer= popuparray[popupflg][1],
						color= popuparray[popupflg][2],
						str  = popuparray[popupflg][3];

					str='<p class="popupClose"><span></span><span></span></p>' + str;
					func0= popuparray[popupflg][4],
					func1= popuparray[popupflg][5],
					func2= popuparray[popupflg][6],
					func3= popuparray[popupflg][7],


					_footermenu.css("background",color);
					_footermenu.html(str);

					_footermenu.addClass('open');
					if(timer > 0) {
						enableclose=1;
						setTimeout(function() {
							popupview("close");
						}, timer);
					} else
						enableclose=0;

					popuparray[popupflg][1]=-1;
					popupopen= popuparray[popupflg][0]
					popupflg++;
				}
			}
		}
		if(mode == "close") {
			if(func0 !== undefined)
				func0();

			_footermenu.removeClass('open');
			setTimeout(function() {
				popupopen=undefined;
				_footermenu.html("");
				popupview("open");

				if(setting_reload)
					document.location.reload();

			}, 500);
		}

	}

	var wpcf7Elm = document.querySelector( '.wpcf7' );

	wpcf7Elm.addEventListener( 'wpcf7invalid', function( event ) {
		popup(mailsent(
			resc('forminput'),
			"rgba(127,127,0,0.8)"
		));
		popupview("open");

		$('input[type="submit"]').each( function() {
			var t=$(this);
			setTimeout(function() {
				t.prop('disabled', false);
				t.val(resc('send'));
			}, 300);
		});
	}, false );

	wpcf7Elm.addEventListener( 'wpcf7spam', function( event ) {
		popup(mailsent(
			resc('formspam'),
			"rgba(192,0,0,0.8)"
		));
		popupview("open");

		$('input[type="submit"]').each( function() {
			var t=$(this);
			setTimeout(function() {
				t.prop('disabled', false);
				t.val(resc('send'));
			}, 300);
		});

	}, false );
	 
	wpcf7Elm.addEventListener( 'wpcf7mailfailed', function( event ) {
		popup(mailsent(
			resc('formerror'),
			"rgba(127,107,10,0.8)"
		));
		popupview("open");

		$('input[type="submit"]').each( function() {
			var t=$(this);
			setTimeout(function() {
				t.prop('disabled', false);
				t.val(resc('send'));
			}, 300);
		});

	}, false );

	wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
		popup(mailsent(
			resc('formcomplete'),
			"rgba(10,107,149,0.8)"
		));
		popupview("open");
		$("textarea").trigger('autoheight');

		$('input[type="submit"]').each( function() {
			var t=$(this);
			setTimeout(function() {
				//t.prop('disabled', false);
				t.val(resc('sent'));
			}, 300);
		});
	}, false );

	function mailsent(msg, color, flg) {
		return [
			"contact",
			9999,
			color,
			flg === undefined ? 
				sprintf(
					"<p>" + resc('formmsg') + "</p><p>%s</p>"
					, msg
				)
			 : sprintf("<p>%s</p>", msg)
		];
	}