サイトの改変、経緯。
2015/12/26(土) 天気 曇り？
市内にて年明けの施工現場の養生ー床とドア枠等をしてきました。
原工務店の原さんが私の日記に反応をしてくれました。
同じ墨壺を使っているそうです！
嬉しい。
説明できませんが、嬉しいのです！
この日記の22日以降の部分については
「２２日からの分は何度も読んでみました。難しいです。」
と。
はい、難しいです。
難しい理由はここ10年位のネットの急速な発展やスマホの登場と言った事柄も関連してくるからだと思います。
まずは時間の経過とともに書きます、ー少し長いです。
2004年に須賀建築サイト（ホームページ）を立ち上げました。
はじめは「nifty」内で作りアドレスも「nifty所属」みたいな。
私の師匠・児玉社長からアドバイスを受けながらサーバーを借りてサイトも作りなおしました。
それが2004年7月です。
HTML4での作成で、（CSS）スタイルシートも使いましたがまだまだ（何が？）でした。
専門の方の回想録、http://kidachi.kazuhi.to/blog/archives/038862.html
上記を読むと2004年ではプロの方でもサイトの「table」タグを使用してのサイト作りだったヨようです。
ド素人の私ももちろん「table」タグで作りました。
この頃はまだ「8秒ルール」などというものがありました。
サイトをクリックして8秒以内に表示されないサイトはキャンセルされてしまって機会損失になる、ということです。
回線の遅かったので・・・
回線についてはダイヤルアップ→ISDN→ADSL→FTTH（光回線等）
2004年当時、自宅はISDNでしたが2004年11月にはADSLにしております。
サイトを見るのは家や建物の中にあるパソコンが主流です。
（スマホはまだない！）
サイト作りもHTML4からXHTMLになったようです。
私は「XHTML」についてはわかりませんし、本を読んだことすらありません。
理由は難しそうだから。
しかし自サイトのページは日記やら施工例が増えるます。
その後は自分も忙しくネットからの注文がどんどん入ってくるので自サイトに手を入れるどころではない状態が2008年7月まで続きました。
多分この時期にサイト作りは「table」タグから「CSS」を使った「div id=" "」という形に変わったのだと思います。
この「div id=" "」はホームページ作りを検索すると今でも沢山出てきます。
奥様からは私のサイトは見づらいと言われてどうすればいいのかと。
部分的にはちょくちょく手をいれていました。
本格的な改変は2014年8月です。
「table」から「div id=" "」へ3カラムで作成です。
ーこれは大きな間違いでした。
そう、サイトを見る物がPCからスマホへ、という主役の交代がありました。
その1ヶ月前の2014年7月の日記には自サイトへのアクセス解析を載せています。
メインはブラウザーシェアについてです。
2010年7月のシェア
IEの独占状態でした。
「iPhone」の日本での発売は2008年7月です。
新しもの好きの私でもまだ手にしていません。
私が「iPhone」を手にしたのは2009年10月初旬です。
「iPhone 3S」です。
その当時はソフトバンクの独占契約だたために珍しがられました。
「iPhone」に代表されるスマホの爆発はなんといっても
「iPhone」がソフトバンクの独占から外れドコモやauでも販売されるようになった
2013年9月以降です。
これは2013年９月のものです。
これ以降、ブラウザーのシェアは激変します。
IEは減り、Safariはシェアを伸ばします。
翌2014年１月には逆転します。
これです、ドン！
2014年7月の日記を書いた時点のシェア。
ブラウザーのシェア別だけでなく画面の解像度のシェアを見てもやはり「iPnone」からの流入が多くなっていることも知ってはいました。
サイトを見る画面の大きさが違います。
表示されるエリアも違います。
プロの方が作るサイトは「HTML5」になり、
更にはスマホ等への対応として「レスポンシブWEB」へと。
しかし私は「HTML4」で「div id=" "」で作りなおしました。
つくづく馬鹿だなと・・・
※この時期に木達 一仁（きだち かずひと）さん を知ったのです。
それから少し立ち2015年4月からスマホ対応しているとサイトとそうではないサイトに差をつけるというグーグル様のお達しがありました、ヘイ！
急いで、本を書いサイトの改変しました。
「やっつけ」です。
とりあえずスマホで見れればいいレベル。
確認はグーグル様のスマホ対応「モバイル フレンドリー テスト」にて行いました。
この最中に「PageSpeed Insights」を知りました。
「須賀建築のサイト」は複雑なサイトでは無いので写真の多いページでも56/100程度なので放置してモバイル対応を先にしました。
その後「HTML5」へ。
そして最近なのです。
ようやく本題。
HTMLやCSSの縮小と指摘されれば、無料で変換してくれるところを調べて使いました。
「画像の縮小」は時間を見ては行っています。
しかし
特に「２」と「３」は「.htaccess」の書き換えという難問。
「.htaccess」って自分で作った「Home page」のファルダーの中には無いんです。
私の場合、自分のサイトのサーバーの中にあったので、それをコピーして書き換えて貼り付けて終わりでした。
このやり方もほぼ偶然のような形で知りました。
「１」はもしかしたらと思ってlinkしていたCSSファイルを全てHTMLの中に放り込んでみたら解決しました。
これが今の状態です。
それ以外で行ったこと
「Google Search Console」で指摘され事項の手直しです。
「タイトル タグの重複」
「短すぎるmeta タグ」
「meta タグの重複」
の手直しです。
これで終わりです。
余談。
「HTML5」でのサイト作成にあたっては
「ねこ又 ホームページ作成」さんの「2014年10月28日 HTML5勧告！」
を参考にしました。
そして参考書
左の本です。
「HTML５＆CSS3 レッスンブック」エビスコム著 ソシム株式会社
市内にて年明けの施工現場の養生ー床とドア枠等をしてきました。
原工務店の原さんが私の日記に反応をしてくれました。
同じ墨壺を使っているそうです！
嬉しい。
説明できませんが、嬉しいのです！
この日記の22日以降の部分については
「２２日からの分は何度も読んでみました。難しいです。」
と。
はい、難しいです。
難しい理由はここ10年位のネットの急速な発展やスマホの登場と言った事柄も関連してくるからだと思います。
まずは時間の経過とともに書きます、ー少し長いです。
2004年に須賀建築サイト（ホームページ）を立ち上げました。
はじめは「nifty」内で作りアドレスも「nifty所属」みたいな。
私の師匠・児玉社長からアドバイスを受けながらサーバーを借りてサイトも作りなおしました。
それが2004年7月です。
HTML4での作成で、（CSS）スタイルシートも使いましたがまだまだ（何が？）でした。
専門の方の回想録、http://kidachi.kazuhi.to/blog/archives/038862.html
上記を読むと2004年ではプロの方でもサイトの「table」タグを使用してのサイト作りだったヨようです。
ド素人の私ももちろん「table」タグで作りました。
この頃はまだ「8秒ルール」などというものがありました。
サイトをクリックして8秒以内に表示されないサイトはキャンセルされてしまって機会損失になる、ということです。
回線の遅かったので・・・
回線についてはダイヤルアップ→ISDN→ADSL→FTTH（光回線等）
2004年当時、自宅はISDNでしたが2004年11月にはADSLにしております。
サイトを見るのは家や建物の中にあるパソコンが主流です。
（スマホはまだない！）
サイト作りもHTML4からXHTMLになったようです。
私は「XHTML」についてはわかりませんし、本を読んだことすらありません。
理由は難しそうだから。
しかし自サイトのページは日記やら施工例が増えるます。
その後は自分も忙しくネットからの注文がどんどん入ってくるので自サイトに手を入れるどころではない状態が2008年7月まで続きました。
多分この時期にサイト作りは「table」タグから「CSS」を使った「div id=" "」という形に変わったのだと思います。
この「div id=" "」はホームページ作りを検索すると今でも沢山出てきます。
奥様からは私のサイトは見づらいと言われてどうすればいいのかと。
部分的にはちょくちょく手をいれていました。
本格的な改変は2014年8月です。
「table」から「div id=" "」へ3カラムで作成です。
ーこれは大きな間違いでした。
そう、サイトを見る物がPCからスマホへ、という主役の交代がありました。
その1ヶ月前の2014年7月の日記には自サイトへのアクセス解析を載せています。
メインはブラウザーシェアについてです。
2010年7月のシェア
IEの独占状態でした。
「iPhone」の日本での発売は2008年7月です。
新しもの好きの私でもまだ手にしていません。
私が「iPhone」を手にしたのは2009年10月初旬です。
「iPhone 3S」です。
その当時はソフトバンクの独占契約だたために珍しがられました。
「iPhone」に代表されるスマホの爆発はなんといっても
「iPhone」がソフトバンクの独占から外れドコモやauでも販売されるようになった
2013年9月以降です。
これは2013年９月のものです。
これ以降、ブラウザーのシェアは激変します。
IEは減り、Safariはシェアを伸ばします。
翌2014年１月には逆転します。
これです、ドン！
2014年7月の日記を書いた時点のシェア。
ブラウザーのシェア別だけでなく画面の解像度のシェアを見てもやはり「iPnone」からの流入が多くなっていることも知ってはいました。
サイトを見る画面の大きさが違います。
表示されるエリアも違います。
プロの方が作るサイトは「HTML5」になり、
更にはスマホ等への対応として「レスポンシブWEB」へと。
しかし私は「HTML4」で「div id=" "」で作りなおしました。
つくづく馬鹿だなと・・・
※この時期に木達 一仁（きだち かずひと）さん を知ったのです。
それから少し立ち2015年4月からスマホ対応しているとサイトとそうではないサイトに差をつけるというグーグル様のお達しがありました、ヘイ！
急いで、本を書いサイトの改変しました。
「やっつけ」です。
とりあえずスマホで見れればいいレベル。
確認はグーグル様のスマホ対応「モバイル フレンドリー テスト」にて行いました。
この最中に「PageSpeed Insights」を知りました。
「須賀建築のサイト」は複雑なサイトでは無いので写真の多いページでも56/100程度なので放置してモバイル対応を先にしました。
その後「HTML5」へ。
そして最近なのです。
ようやく本題。
HTMLやCSSの縮小と指摘されれば、無料で変換してくれるところを調べて使いました。
「画像の縮小」は時間を見ては行っています。
しかし
１，スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する。
２，ブラウザのキャッシュを活用する。
２，ブラウザのキャッシュを活用する。
３，圧縮を有効にする。
には手が出せなかったのです。
グーグル様提案の修正方法を読んでもちんぷんかんぷんで
特に「２」と「３」は「.htaccess」の書き換えという難問。
「.htaccess」って自分で作った「Home page」のファルダーの中には無いんです。
私の場合、自分のサイトのサーバーの中にあったので、それをコピーして書き換えて貼り付けて終わりでした。
このやり方もほぼ偶然のような形で知りました。
「１」はもしかしたらと思ってlinkしていたCSSファイルを全てHTMLの中に放り込んでみたら解決しました。
これが今の状態です。
それ以外で行ったこと
「Google Search Console」で指摘され事項の手直しです。
「タイトル タグの重複」
「短すぎるmeta タグ」
「meta タグの重複」
の手直しです。
これで終わりです。
余談。
「HTML5」でのサイト作成にあたっては
「ねこ又 ホームページ作成」さんの「2014年10月28日 HTML5勧告！」
を参考にしました。
そして参考書
左の本です。
「HTML５＆CSS3 レッスンブック」エビスコム著 ソシム株式会社
コメント
コメントを投稿