スポンサーリンク
Programing備忘録の方は久々の投稿。
この数か月少しずつ進めたサイトのリニューアルを実行した。何を改良したかという点をメモしておく。
一番の不満はサイトの反応速度が遅い、ってことなのだが、これはなかなか改良できない。こんなにたくさん表示しているのだから遅いのは当たり前。
対策は続きを見るボタンで一部しか最初にダウンロードしないようにするか、もっと早いサーバに乗り換えることかなと考えている。
どっちも未着手。
その次に不満なことを考えて、洗い出した。
順に何をしたか簡単に紹介する。
MENUボタンはたいてい上部にあり、左右どちらかに固定であるべきだろう。これまでのサイトは左上にあったが、2の理由もあって画面外に追い出されており、MENUボタンがあることに気づいてもらえてなかったかもしれない。
このため、左上に移動して、最上部の行のレイアウトを変更した。具体的にはMENUボタンの横にはロゴを表示している。PCではさらに右に領域が開いているので、広告を2つ表示するようにした。
広告についてはPC表示時の上部にいくつか広告を表示しているが、ここからピックアップしている。
PCとスマホ、タブレットの表示の区別は、CSSで横幅をチェックしている。
具体的には、PC用は以下のコードだ。
#bl_logo_ad_area {
float: left;
width: 100%;
padding-left: 100px;
}
.ly_logo_ad_area {
display: block;
}
CSSの定義を2つに分けているのは、以前読んだ本に書かれていたことをまねしているため。#bl_~は画面に1か所しかない領域に対する固定的な属性、ly_~は画面に複数あってもいい領域に対するクラスでありまた、領域の属性を決めている。
CSSについて書かれている本はこちら。
アフィリエイト広告 ここから購入いただきますと当ブログに報酬が支払われ、運営資金になります。
コードを１つのままスマホ、タブレットなどデバイスの画面解像度に応じて切り替えることができる方式をレスポンシブデザインと呼ぶが、これは通常はデバイスの横幅で決める。
今回のケースでは横幅が1080ピクセルを下回ると、下記コードが有効になって、ly_～で指定したエリアが表示されなくなる。
@media only screen and (max-width: 1080px) {
.ly_logo_ad_area {
display: none;
}
}
PC用ではly_~のエリアをdisplay:block;、つまり表示するようにしているが、1080ピクセルを下回るとdisplay: none； に切り替わる。
これによりbl_~の広告エリアがスマホやタブレットでは表示されなくなる。（もちろんPCでも幅を狭めれば小さくなる）
なお、スマホ画面の解像度は仮に1080ピクセルと書かれていても、CSS上はそうではない。上記CSSの判定は実際の画面解像度ではないので、初期は手探りでやったりネットを検索したりした。
面倒なのでクライアントの画面情報を表示するページを作り、アクセスして調べている。使いたい方はご利用ください。
調べた結果を一部書いておく。ずいぶん前の調査なので最新のものがないのはご容赦を。
| デバイス名 | CSS上の横幅 | 実際の横幅 |
|---|---|---|
| シャオミ Pad5 | 844 | 1,600 |
| iPadPro11インチ | 834 | |
| FireHD8(2020) | 626 | |
| Xiaomi 11T Pro, Redmi Note 10 Pro | 432 | 1,080 |
| iPhone 12Pro MAX | 428 | |
| iPhone12, Pro | 390 | |
| iPhone SE2 | 375 | 750 |
| Pixel 7a | 412 | 1,080 |
細かい修正を行ったので詳細は書きつくせないが、主にwidthの値を変えている。入れ子になった領域で画面幅を突き抜けるようなことをすると、前のサイトのようになる。
リニューアルしてもまだ残っているが、ずいぶん減ったと思う。
ブログカードのプラグインを使っているが、最近管理画面でエラーや警告が出るようになっている。アイコンなどをDBに保管してくれるので重宝する場合もあるが、サイト内のリンクでは不要な機能だ。
プラグインはサイト外へのアクセスのときだけにして、サイト内では今回作った内部用ブログカードに置き換えていく。
その記事のアイコンとタイトル、文章の書き出しを表示する。
具体的には上にある、CSS確認ページのリンクカードだ。
最近不満だったいくつかの点は解消した。しかし根本的解決には応答速度の向上が必要だ。
また現状のテーマは管理画面なしで何でもかんでもコードで済ませている。細々と管理画面を作ることも進めているので、次は管理画面かな。
しくじるとサイトが吹っ飛ぶので怖い。
PR
" >
