HP係の後書き
更新記録
2021年
2/23(火) ページスピード改善のためjQueryの読み込み位置変更、GoogleのCDNに変更。Google Fontsのサブセット化。<h1>の背景画像プリロード。各サービスへのpreconnect。
2/19(金) モリサワのTypeSquare導入(ヒラギノUD角ゴW3 JIS2004)。/このページ開設。2021年スプコン(2021/5/30予定)まであと100日らしい。
・最近の改良でPage Speed Insightsのスコアは改善傾向。文章メインではモバイル70点台、PC90点台で安定するようになった。
2/18(木) jQuery CDNのバージョンを3.2.1から3.5.1に変更/更新日時、演奏会カウントダウンのスクリプト内document.writeを置き換え/演奏会ページSNSシェアボタンをクリック後の読み込みに変更、各サービスのスクリプトもajaxで読み込み(但しLINEのみ仕様上スクリプトを事前読み込み)/新着情報のカテゴリ表示まわりのCSSを整理
2/17(水) PCメニューのキーボード操作対応(jQuery)。
2/17(水) フッターの連絡先表記に<address>利用。
2/16(水) 新歓情報各ページの2020年の内容を2020年ディレクトリに移設、古い情報である旨のお知らせバーを設置。既存ページを2021年向けにタイトル等修正/演奏会情報ページ試聴リンクのiframeをdetailsクリック後の読み込みに変更/利用規約の画像関係記述変更(イラストAC様とpixabay様の利用)/CSSでprefers reduced motion対応/メールアドレス画像等をGoogle image botのクロールから除外設定
2/15(火) 演奏会ページ会場表記のFontawesomeアイコンに代替テキストを<span class="sr-only"></spanで指定。
2/15(火) いまさらFontawesomeアカウント登録、kitの読み込みに変更。
2/14(月) HP掲載のメールアドレス変更/現時点での全てのページをWayback Machineに記録してもらう。
2/14(月)頃 PC向け游ゴシックの設定を通常時Medium、太字Regularの指定に変更。文章がはっきり見やすくなった気がする。
2/11(木) 画像のlazyload設定を拡大/Page Speed Insights対応でGoogle FontsとFontawesome CDNの読み込みを</body>直前に変更(「レンダリングを妨げるリソースの除外」)、Google AnalyticsのスクリプトURLを新しいものに統一(「使用していないjavascriptの削除」)、画像サイズの適正化(トップページ以外は出し分け面倒なので横1000px程度)、gzipでのテキスト圧縮設定
2/10(水) トップページスライドショー(slick)で解像度による画像出し分けに対応。
2/8(月) ページトップへ戻るボタンを<button>から<div>へ変更/<h1>を<article>内に移動し、W3CのHTMLチェッカーでのエラーを解消。合わせてaria-labelを指定。
1月初旬 PCメニューデザイン見直し、背景色を#ffaf58に統一、hover時に#fffaf4の背景(before疑似要素)、現在のページで#fffaf4の下線(before疑似要素)、mega menuはダークテーマ対応。本当は冬休み中に完成させたかった。/GA4対応、使い方が変わっていてよく分からないがひとまずデータを溜めておくことにした。/団員・OBOG専用ページの拡充/装飾のないリンクについてhover時に下線をなくし、変化をつけた。/中の人がやっとVS Codeを導入。各コードのインデントを修正。もっと早く使えば良かった。
2020年
年末(順番はだいたいの目安。)
・トップページのフェードインを1回きりに変更(従来は上に戻るとフェードアウトしていた)。
・トレーナー紹介ページをテーブルレイアウトから定義リストに変更
・YouTubeの埋め込みをモーダル表示に変更(演奏会ページ→活動内容ページ→トップページ)、演奏会ページはPCではクリックすると自動再生される。ページ読み込み時には動画は読み込まず、サムネイル画像とYouTubeロゴだけ。表示後閉じるときの×ボタン(Fontawesome)はダミーで背景の黒い部分ならどこをクリックしても挙動は同じ。トップページのPage Speed Insightsのスコアが余りにも悪かったため行った。
・演奏会ページに構造化データ(Googleのリファレンス)設定。HPの表示には関係ないが、HPの検索結果にリッチリザルトとして表示されるほか、「オリンパスホール八王子 イベント」で検索すると一覧表で確認できる。Googleがクロールして一覧表に反映するまで1週間くらいかかった。
・演奏会ページに各種配信サービスのリンク(とりあえずメインのブラ1のみ)をiframeで埋め込み。他大オケやラフォルジュルネのHPのアイデアの真似。ページが縦に長くなることを防ぎ、さらに読み込みを遅延させるため<details>と<summary>でエリアを作成。加えてiframeにlazyloadを指定したがそれでも各サービス最低限のスクリプトが読み込まれてしまい、Page Speed Insightsで40点未満になってしまったので、後に読み込み方法を変えることになった。
・ロゴ画像をSVGに変更。首都大時代のものは既にSVGを使っていたためやっと復帰することになった。作成にはPPTを使用。
・Webp画像対応。変換にはSquooshを使用。画像の出し分けはサーバーの設定で対応。
・トップページ、ニュース各ページの新着情報一覧で、最新5件以外はCSSでdisplay: none;指定していたものを、ajaxでの読み込み時に最新5件のみ読み込むように変更。後に団員専用ページも、団員向けの最新3件について同様に変更。
秋まで
・画像の代替テキストを拡充。
・新着情報一覧が増えてきたため最新5件の読み込みに変更。
・リンクボタンを作成しトップページに反映。後に他のページにも拡大。
・フッターの著作権表記に<small>利用
・説明付きリストを<ul><li>の間に段落を挟む形式から<dl><dd><dt>に変更
9/9(水)頃 過去の演奏会ページのレイアウトを見直し、検索機能をjQuery quicksearchを使って設置。AND検索もできることに後から気付いた。Enterキーを押すとソートが解除されてしまう問題があったが、後に挙動を見直して解消(11/3頃)。頻度の高い作曲家はドロップダウンリストに追加した。
・トップページのレイアウトを見直し、部員募集(新歓)の面積を広げ、新歓PVも埋め込み。さらにブロック毎に閲覧者のスクロールに連動して左右からフェードインするように設定。
・サイドバーの新歓情報メニューにposition: sticky;を設定。
・スクリーンリーダーを意識し<p>などを出来るだけ用いるように見直し。
夏まで
8/16(日)頃 スマホ表示時ヘッダーの水平スクロールを取りやめ、団員専用エリアでテストしていたハンバーガーメニューと、画面上部固定固定の"クイックメニュー"に変更。これにより、水平スクロールのわかりにくさの解消と、ハンバーガーメニューの回遊性の低さの両立を図った。
・<article><section><main><aside>等を利用して各ページのレイアウトを統一。
・<strong>に赤太字を指定して各所で利用。
・401、403、404エラーページを設定。
・Android対策でGoogle Fontsの明朝体(Noto Serif JP)導入。
5/3(日) YouTubeチャンネル開設。
4/26(日) Twitter公式アカウントのID変更に対応。
4/25(土) Google Analyticsをトップページに設置、4/28に全ページに拡大。
4/24(金) slick.jsのスライドショーをEdge Legacyに適用。positionの設定が不適切だったものを修正した。
・演奏会カウントダウンのデザインを変更し、演奏会ページにも追加。
・スマホ表示時のTwitter埋め込みを廃止。そもそもHPにTwitterから流入していることや、スマホでは下の方までスクロールされにくい、Twitterウィジェットをスクロール設定しているとHPが無限スクロール状態になる、などの理由。フッターへのリンク設置のみにした。はじめはdisplay: none;を指定したが、無駄なスクリプトが読み込まれることになるのでajaxで画面サイズによりPC時のみ読み込みに変更。
・一部ページに目次を設置。並べ方はfloat: left;。
・団員専用ページへの新着情報一覧読み込みを[内部向け]カテゴリのみに変更。
4/10(金) トップページへの新着情報一覧読み込みをiframeからajaxに変更。
4/8(木)OS又はブラウザのダークテーマ対応。合わせてCSSの色の設定を変数でまとめた。CSS gridを利用している段階でIEでの表示は崩れていたが、これによりIEでの表示がさらに崩れた。
4/9(木) XMLサイトマップを設置。
4/9(木) IEでの閲覧時にフッターにEdge、Chrome、Firefox、又はSafariの利用を促すメッセージを表示。
・4月初めまでにブログの累積PVが500を超える。
4/2(木) トップページ演奏会情報の背景をslick.jsを用いてスライドショーに変更。但しEdge Legacyで適用できず、Edgeのみ静止画を維持。
4/1(水) 都立大に名称変更。合わせてHPをロゴ変更、全体の装飾変更。楽器をイメージして独断で暖色系にした。
・外部サイトへのリンクにFontawesomeのアイコンを付加。
・新着情報一覧にカテゴリによるソート機能追加。
・新歓情報各ページのサイドバーに新歓情報メニューを追加
・PDFのリンクに自動でFontawesomeのアイコン(疑似要素)を付与するようにCSSを設定。
・HTMLサイトマップを設置。
3/19(木) ヘッダー部分を更新した結果、ディレクトリが異なる新歓各ページにも同じコードを貼り付けてしまった結果、当該ページのヘッダーがリンク切れとなってしまう。ローカル環境でも確認できるように相対リンクを使っていたため。ヘッダーファイル分離を模索するようになる。
3/15(日) 部員実態調査ページ開設。
3/12(木) 楽器紹介ページ開設。
3/3(火) ブログ開設。HPより柔らかく、活動記録を残すメディアとして検討。
・新着情報一覧をトップページから分離しトップページへはiframe読み込みに変更。但しスマホ表示時にiframe内にも広告が出るようになった。
3/1(日) ホームページ・ブログ利用規約設置。
・最終更新日時のスクリプトを全ページに設置。
・ページトップに戻るボタンを設置。
・トップページのみmeta descriptionを設定。
・HPスマホ閲覧に最適化。ブレイクポイントは750px。<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />の設定。メニューは水平スクロールで画面上部固定、スクロールを促す左右矢印をjQueryで表示(但し一部画面幅に対応できず)。CSS gridでの作成を継続。その後徐々に各ページのレイアウトを見直し、多くのページでPCでは左側記事・右側Twitter埋め込み、スマホではTwitter埋め込みが下部にくるように設計。CSSはモバイルファースト。演奏会・新歓ページはメインの情報を強調するためTwitter埋め込みなし。
2/27(木) COVID-19拡大により春合宿中止決定。団員専用ページと新着情報ページの連携が検討課題。
2/22(土) リンク集開設。
参考にさせていただいたサイト様
- HTML文法チェック
- https://validator.w3.org/nu/
- ヘッダー
- タブレット、スマホ表示 : https://tech-dig.jp/hamburger-global-nav/ PC表示(900px以上) : https://theorthodoxworks.com/web-design/drop-down-menu-multi-css/
- メニューの画面上部固定
- https://proengineer.internous.co.jp/content/columnfeature/12366
- メニューの表示中の項目強調
- https://fukuoka-pamphlet-seisaku.com/glossary/fukuoka-blog/?p=1086
- PCメニューのキーボード操作対応
- https://www.webcreatorbox.com/tech/accessible-drop-down-nav
- 見出しのデザイン
- https://saruwakakun.com/html-css/reference/h-design
- 見出しの文字の影
- https://qiita.com/NoxGit/items/59dfcb41b204008bea9f
- リンクボタンの矢印アイコン表示
- https://h2ham.net/add-icon-after-and-middle/
- 新歓情報メニューを画面上部に来たら固定
- https://mae.chab.in/archives/59690#TOP
- CSS grid
- https://www.webcreatorbox.com/tech/css-grid-basic-layout https://qiita.com/kura07/items/e633b35e33e43240d363 https://sterfield.co.jp/designer/%E5%B0%91%E3%81%97%E3%81%9A%E3%81%A4%E5%AE%9F%E8%A3%85%E3%81%AE%E9%80%B2%E3%82%93%E3%81%A7%E3%81%8D%E3%81%A6%E3%81%84%E3%82%8Bcss%E3%81%AE%E3%82%B0%E3%83%AA%E3%83%83%E3%83%89%E3%83%AC%E3%82%A4/
- ダークテーマ
- https://www.webcreatorbox.com/tech/dark-mode https://coliss.com/articles/build-websites/operation/design/how-to-design-delightful-dark-themes.html
- prefers-reduced-motion 対応
- https://note.com/takamoso/n/ncd758ab68491
- ページトップに戻るボタン
- http://serinaishii.hatenablog.com/entry/2015/11/06/%E8%B6%85%E7%B0%A1%E5%8D%98%26%E3%82%B3%E3%83%94%E3%83%9A%E3%81%A7OK%EF%BC%81%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%88%E3%83%83%E3%83%97%E3%81%B8%E6%88%BB%E3%82%8B%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE
- ヘッダー、フッター、新着情報一覧を別ファイルから読み込む
- https://codelife.cafe/entry/2015/10/27/222803 https://www.sejuku.net/blog/42555
- トップページスライドショー(slick.js)
- https://techacademy.jp/magazine/9529 https://b-risk.jp/blog/2020/01/slick-customize/ https://webdesignday.jp/inspiration/technique/jquery-js/3847/ https://qiita.com/wifeofvillon/items/0d1f6844533c7bed95c8 https://www.granfairs.com/blog/staff/slick-solve-tandem
- トップページのフェードインアニメーション
- https://www.tsurezure-owls-nest.work/html%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E5%B7%A6%E5%8F%B3%E3%81%8B%E3%82%89%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A4%E3%83%B3/
- 新着情報一覧ソート
- https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html
- YouTubeをオンデマンドで読み込みモーダル表示
- https://web-diy.jp/2017/10/171023_01/
- 演奏会カウントダウンの数字を一つずつ囲む
- https://allabout.co.jp/gm/gc/437937/
- 過去の演奏会一覧の表のデザイン
- https://b-risk.jp/blog/2018/07/table-css/
- 過去の演奏会ページ検索機能
- https://github.com/DeuxHuitHuit/quicksearch https://webkaru.net/jquery-plugin/quick-search/ https://www.sukicomi.net/2015/06/quicksearch-jquery.html (ソフト)キーボードの動作調整 https://taroken.org/keypress-function/ 候補表示 http://code.shotalog.com/?p=158
過去の当団のHP
- 現在運用中のサイトのアーカイブ
- 2021年2月14日のアーカイブ
- 2019年3月31日までのサイト(Yahoo! Geocities)、http://www.geocities.jp/tmuoke/
- 2019年3月30日のアーカイブ