【42日目】投稿一覧もスマホ対応にしてみた
Posted: Last Update:
サイトを作成し始めて42日目になりました。昨日は初めて「grid」というHTMLタグを使って、記事と日記それぞれのトップページにある「最新投稿」をレスポンシブデザイン(スマホ対応)にすることに成功しました!
ロードマップ
ロードマップで進捗を見ると下記の通りです。
- 準備 - サイトの全体像を決める
- 使用するプログラミング言語を決めて環境を整える
- サイトの基本構造を作って公開する
- 収益化に最適なサイトにアップグレードする
- コンテンツを充実させる(他の作業と同時進行)
- サイトを見てもらえるようにサーチエンジンに登録する
- sitemap.xmlとRSSを作成する
- コンテンツに合わせてサイトを修正、スマホにも対応する ←今ここ
- お問い合わせページを作る
- 検索ボックスを作る
- サイトマップページを作る
- 個人情報に関するページを作る
- SEOとセキュリティについて調べ、対応する
- GoogleアドセンスとAmazonアソシエイトの申し込みをする
- ローカルで簡単に入力ができるようにフォームを作る
- フォローアップ - より収益化に向いたサイト構造に変更する
過去の投稿もスマホで見やすくしたい
昨日までは「最新投稿」の部分をスマホでも見やすく作業をしてきました。今日は「過去の投稿」を見やすいデザインにしたいと思います。画像でみると、昨日までの作業が上の部分、今日手をつけたい部分が下の赤枠部分です。クリックするとずらずらとリンクが表示されます。
現在のデザイン、PCではそれなりに見やすいのですが、スマホで見るとリンクが折り返されてしまって読みにくいんです。
日付とタイトルの境目をはっきりさせることで、いくらか見やすくなるかな?あと、まだまだ投稿が少ないので、最大単位が年になっているのを月に変えてもいいかと思いました。年をまたいだら、年ごとに丸めて表示する形式に戻すようにしたいと思います。
デザインに試行錯誤する
まずは、年度で丸めているのを外す作業から。<details><summary>で囲っているのを外しました。と言っても、<details><summary>をコメントアウトしただけです。年度ごとに丸めたくなったら、コメントアウトを外して再度利用します。
次に、投稿部分の日付とタイトルの境目をはっきりさせましょう。まずは日付後に改行を入れてみたのですが…。まだ見にくいですね…。
もっと境目を明確に、はっきりとさせたいですね。ここは「grid」の出番に違いない!昨日からたくさん使っています。すごく便利。日ごとの投稿をdivでくくってgridを設定して、日付を左に、右側にリンクを入れて、下線も引いてみようかな。
スマホ対応してたら大きな画面がかわいくなった
いろいろと頭を悩ませて、やっとスタイルシートが書けました。画面幅が640px以下の時には日付部分を10em(10文字分)にしています。画面が広い時に同じ設定にすると、やけに広くなってしまうので、画面幅が広い時は自動で位置取りをしてもらえるように「auto」を設定してみました。スタイルシートとHTMLです。
スタイルシートpadding: 0.5em 0 0 0;
display: grid;
grid-template-columns: auto 1fr;
border-bottom: 1px solid grey;
}
@media screen and (max-width:640px){
#indexpastdiv2{
grid-template-columns: 10em 1fr;
}
}
<div id="indexpastdiv2">
<div id="indexlinktime2">日付</div>
<div>タイトル</div>
</div>
</a>
適用した画面がこちら
ちなみに、大きい画面で見ると、ノートみたいになっていました。狙ってなかったけど、かわいい(笑)
最新の投稿に説明文を入れてみる
「最新投稿」の部分、昨日で完成の予定だったのですが、タイトルだけだと内容がよく分からない日記もあるので、説明文も入れてみようかと考えました。ものは試しにまずは入れてみます。
やっては見たけれど…
なんだか画面が情報過多でうるさくなってしまいました。しかも、文章の長さが違うので、統一性がなくなってしまった。はっきり言って邪魔…。やめよう。タイトルのつけ方を工夫する方が効率がいい気がします。また日記や投稿記事のタイトルを弄っていくかもしれません。
だいぶ進んだかな?
私自身も忘れていた(笑)、ロードマップのさらに細分化した目標を掘り返してきました。これによると次はサイトのトップページを作るらしいのですが、トップページのデザインは少し考えたいので、次は「ブログ/記事ページの見栄えを整えつつ、記事画面もスマホ対応にする」に取り組みたいと思います。
- ファイルの構成を修正し、関連するPHPの呼び出しなどを変更する ←完了
- ブログと記事の、それぞれのトップページを作る ←完了
- サイトのトップページを作り直す
- ブログ/記事ページの見栄えを整えつつ、記事画面もスマホ対応にする
- 日記の「何日目」を自動で入れられるようにする
- ファビコンを作る
- 記事に目次を入れる
しかし!今日は記事の詳細とか入れて遊んでいるうちに時間が来てしまいました。明日からは、日記と記事ページの見栄えを整えていきたいと思います!