やっとこのブログのテーマを変えることができました。

変えようと思い始めて数ヶ月、なのに印象はあまり変わらない結果となりました（笑）。白ベースを基本にしていますのでまあこんなもんでしょう。

変更のポイントをあげておきます。

• ブレイクポイント
• ボトムナビゲーション
• その他の特徴
  • トップページの記事一覧に「前のページ」を実装
  • フォントサイズを可変
  • その他 CSSテクニック
• トップページに名言ランダム表示

01ブレイクポイント

レスポンシブデザインですのでブレイクポイントを決める必要があります。たとえば Bootstrap5 では、

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap


// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }


// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }


// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }


// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }


// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

と、かなり細かい設定になっています。

ただ、ブログの場合はもう少しシンプルに考えればいいように思います。結局ブログは日々書いていく文章を読んでもらうものですので、その文章を読みやすい状態で表示すればいいわけで、またその本文以外に表示すべきものはと言えば、最新記事の一覧であるとか、アクセス数の多い記事の一覧であるとか、カテゴリーであるとかのリストですので、1カラムであれば記事の下に、2カラムであればサイドブロックにということになります。

ですので次のように考えてブレイクポイントを決めてみます。

• 本文表示幅　650px
• デバイス幅とコンテンツ幅の比率　92%
• サイドブロック幅　300px
• 本文とサイドブロックのギャップ　50px

この数値を頭に入れてモバイルからデスクトップに向けてイメージしていきますと、

1. コンテンツ幅が 650pxになるまで 92％の比率で徐々に本文幅が広くなっていく
2. コンテンツ幅が 650pxになったら固定となり、デバイスからのマージンが徐々に広くなっていく
3. コンテンツ幅が 650px + 50px + 300px、かつデバイス幅からの比率 92%になったら2カラムにする
4. これ以降はデバイスからのマージンが徐々に広くなっていく

ですのでブレイクポイントは、(650+50+300) / 92% ≒ 1086.9 、切り上げて 1087pxから2カラムとなります。

ただ今回のテーマでは1カラムの時にもうひとつブレイクポイントを設けています。1カラムの時にはサイドブロックは本文下に来るわけですが、そのままですと記事のリストが 650px幅で表示されます。それで気にならなければ問題ないのですが、このテーマでは 650pxになった時にサイドブロックを2カラムに分けています。

そのブレイクポイントは、650 / 92% ≒ 706.5、切り上げて 707pxになります。

ということで、このテーマでは

@media (min-width: 707px) { ... }


@media (min-width: 1087px) { ... }

としています。若干変更していますが次の記事で詳しく書いています。

www.imuza.com

02ボトムナビゲーション

1カラムですと記事は読みやすくなりますがサイト全体の見通しが悪くなります。そのために2カラムにしてサイドに検索、カテゴリー、最新記事一覧などを表示するわけですが、1カラムですとサイドブロックは本文下になってしまいます。

それを補うためにボトムナビゲーションを導入しています。

これは Javascriptを使って、「カテゴリー」「検索」「ページトップへ」「ページャーへ」「ホームへ」のアイコンをボトムやトップに常時表示するものです。

このページにも表示されているもので、デバイス幅が 707px未満であればすべてボトムに、707px以上であればカテゴリーと検索はページトップに、その他はボトムに固定表示されます。

現在この記事をデスクトップで読んでいる場合はブラウザの幅を変更すれば変化が見られます。詳しくは次の記事をご覧ください。

www.imuza.com

また、このテーマでは Contuct us アイコンを追加しています。当サイトのフォームメールについては下の記事から過去記事をたどってください。

www.imuza.com

03その他の特徴

トップページの記事一覧に「前のページ」を実装

トップページには「次のページ」リンクはありますが、「前のページ」はありません。それを history.back() ではなく Session Storage を使って実装しています。詳しくは次の記事をご覧ください。

www.imuza.com

フォントサイズを可変

レスポンシブデザインの場合、タイトルや特定の文字のサイズを可変にしたいことがあります。それを min(), max(), clamp() を使って実現しています。ただし、これは IE や iOS13.3 までは対応していません。

• Can I use… Support tables for HTML5, CSS3, etc

実際、現在のところ古い iPhoneでは背景画像も表示されませんし、エントリーヘッダーなどもかなり大きく表示されてしまいます。ボトムナビゲーションもアイコンがかなり小さくなります。フォールバックを考えないといけないようです。

次の記事をご覧ください。

www.imuza.com

その他 CSSテクニック

ブラウザのデベロッパーツールなどでご覧ください。

04トップページに名言ランダム表示

現在、トップページにはスティーブ・ジョブズの「ベストを尽くして失敗したら、ベストを尽くしたってことさ」を固定表示していますが、少しずつ追加してランダム表示するようにしようかと考えています。

ただ、いつできることやら…。