kamenokoki.com

【41日目】gridでレスポンシブデザイン

Posted:  Last Update:

サイトを作成し始めて41日目になりました。昨日は最新投稿をflexboxを使ってレスポンシブデザイン(スマホ対応)にしようと奮闘したのですが、奮闘しただけに終りました…。

ロードマップ

ロードマップで進捗を見ると下記の通りです。

  • 準備 - サイトの全体像を決める
  • 使用するプログラミング言語を決めて環境を整える
  • サイトの基本構造を作って公開する
  • 収益化に最適なサイトにアップグレードする
    • コンテンツを充実させる(他の作業と同時進行)
    • サイトを見てもらえるようにサーチエンジンに登録する
    • sitemap.xmlとRSSを作成する
    • コンテンツに合わせてサイトを修正、スマホにも対応する ←今ここ
    • お問い合わせページを作る
    • 検索ボックスを作る
    • サイトマップページを作る
    • 個人情報に関するページを作る
    • SEOとセキュリティについて調べ、対応する
  • GoogleアドセンスとAmazonアソシエイトの申し込みをする
  • ローカルで簡単に入力ができるようにフォームを作る
  • フォローアップ - より収益化に向いたサイト構造に変更する

RSS pingが認識されない件

今日の作業の前に、自力でRSSを作成してブログランキングサイトに送りつけられるようにしていた件について、少し。送りつけているRSSが「FC2ブログランキングに反映されない」という話を数日前にしていました。手法を変えても反映されないので、こっそりFC2ブログランキングに問い合わせをしてみました!「無断転載・転用を禁じます」とあったので要旨だけご紹介。

最初に、リクエスト仕様がヘルプページにあると書いてあったのに見つからないので、泣きついてみました。お返事によると、リクエスト仕様のページは喪失しちゃったんだって!これまで誰も指摘しなかったんかい(苦笑)。管理画面からも案内を消しますと言うことで、見に行くと文言がなくなっていました。リクエスト仕様が分かれば対処の方法もわかるかも、と思っていたので残念です。

気を取り直して、次の質問への回答。上と合わせて、RSSのping送信が認識してもらえない理由を、ping送信の結果を添えて問い合わせていました。私のRSSはRSS2.0とatomを併用している(作るのが楽そうだったから)のですが、「ping.fc2.com」はRSS2.0に対応していないらしいです。RSS1.0かatomを使う必要があるそう。先に質問した「リクエスト仕様」で知りたかったのもこれなので、回答にはとっても満足です!

私のRSS2.0とatomを併用したRSS、手動でping送信する時には認識してもらえるのに…。自動ping送信を利用するには、RSSを書き換えるか、RSS1.0に対応したRSSをもう一つ作る必要がありますね。腰を据えて作業をしないといけないので、また後日やりたいと思います。手間がかかるけど、しばらくは手動で送信します…。

最新投稿を伸び縮みさせたい!

さて、今日の作業に入りましょう。昨日からずっとやっている、最新投稿を画面幅にあわせて拡大縮小する件です。昨日はflexboxを使ってやっていたのですが、横幅を%で指定するとなせが箱が縦に整列してしまいました…。画面を見ると、こんな感じになっています。
2020.10.09 なぜか縦に並ぶflexboxの要素

昨日は解決できないまま、憂鬱な気分を抱えてパソコンを閉じましたが、今日は新しい手法を試してみたいと思います!昨日いろいろと検索する中で発見した「grid」。新しいものに出会うと使いたい気持ち半分、恐い気持ち半分になります。昨日は恐さが勝って使いませんでした。でも、今日は使いたい気分!(気分で決めるから失敗するのかもしれない…)

はじめてgridを使ってみた

初めて使う「grid」。どういう動きをするか分からないので、テスト環境のさらにテスト環境を作ってみました。さっそく、最新投稿の小さい箱で使い方を練習。「grid」といういうのは、要するに、升目を書いて、何番目の升に入れるか指定していく感じで使うらしい。初めて私が設定したgridを必要部分だけ抜粋すると、こんな感じです。どの升に入れるかいちいち指定するのめんどくさいな~。

スタイルトート
#latestchild{
display: grid;
grid-template-rows: auto auto 1fr;
grid-template-columns: auto;
}
#latestcimg{
grid-row: 1;
grid-column: 1;
}
#latestcimg img{
width: 100%;
}
#latestctitle{
margin: 0;
padding: 0 0.3em 0.3em 0.3em;
grid-row: 2;
grid-column: 1;
}
#indexlinktime{
grid-row: 3;
grid-column: 1;
justify-self: end;
align-self: end;
}
利用しているHTML
<a href=リンク>
<div id="latestchild">
<div id="latestcimg"><img src="記事のイメージ画像"></div>
<div id="latestctitle"><b> '記事のタイトル'</b></div>
<div id="indexlinktime">日付</div><br>
</div>
</a>

要素は綺麗に表示できました。
2020.10.10 初めて使うgridで要素を配置できた

最新投稿の横並びにgridを使ってみた

升目のどこに要素を入れるか指定するのがめんどくさいな、とさらに検索していたら、簡単に配置できる方法が見つかりました。升目を指定しなかったら、左上から順番に升に入れてくれるらしい。なんて便利なんだ。行や列の数を繰り返し指定してくれる「repeat」というものも出てきたので、さっそく使ってみると、すごい!自動的に配置された上に、するすると拡大縮小する!

書いたスタイルシートがこちら。とても単純。このスタイルシートを適用したDIVで、一つ上で紹介したHTMLを挟んでいます。
#latestparent{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: max-content;
grid-gap: 1em;
}

画面表示がこちら。
2020.10.10 gridで作った画面表示、大きい画面 画面を狭くすると、画像も小さくなりました!
2020.10.10 gridで作った画面表示、小さい画面

gridに感謝!

ここまでの作業、調べながら修正していったので、軽く1時間弱かかっています。でも、昨日flexboxで悩みまくった時間が嘘のようです!ありがとう、grid!

箱の高さがそろっていないことが気になったので調べてみると、子要素に「height: 100%;」と入れるだけで高さを揃えられるという情報が。早速やってみると、見事に揃いました!細かいマージンなども設定して、見栄えも整えました。ちゃんと動いたので、本番用のファイルに移植してきました。ちゃんと動いています!

絵的には昨日と代り映えはしませんが、記念にスクショ(笑)
2020.10.10 gridで作った画面表示、本番用ファイル

スマホ対応にする - 箱の数を変える

さて、今は小さい画面でも横3つ並んでいる最新投稿の箱ですが、スマホ画面などでは箱が小さすぎて読めません。子要素にgridを適用したのは、これの下準備のためでした。失敗するといけないので、もう一度テスト環境に戻りましょう。

広い画面(min-width:640px)では箱を横に三つ、狭い画面(max-width:640px)では箱を横に1つ表示するようにしました。この設定だけで、画面幅が狭くなると箱の数が変わる!なんか感動します。

#latestparent{
 margin: 0 0 1em 0;
 display: grid;
 grid-gap: 1em;
}
 @media screen and (max-width:640px){
  #latestparent{
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: max-content;
  }
 }
 @media screen and (min-width:640px){
  #latestparent{
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: max-content;
  }
 }

スマホ対応にする - 箱の中身の表示を変える

箱が一つになって見やすくはなったのですが、今のままだと横幅いっぱいに画像が表示されてしまいます。スマホ画面で表示したときには、画像を左に配置して、右にタイトルと日付を入れたいと思います。ちょっと長いですが、スタイルシートをご紹介。

#latestchild{
display: grid;
}
 @media screen and (max-width:640px){
  #latestchild{
   grid-template-rows: auto 1fr;
   grid-template-columns: 30% auto;
  }
 }
 @media screen and (min-width:640px){
  #latestchild{
   grid-template-rows: auto auto 1fr;
   grid-template-columns: auto;
 }
}
#latestcimg{ }
 @media screen and (max-width:640px){
  #latestcimg{
   grid-row: 1 / 3;
   grid-column: 1;
  }
 }
 @media screen and (min-width:640px){
  #latestcimg{
   grid-row: 1;
   grid-column: 1;
  }
 }
#latestctitle{ }
 @media screen and (max-width:640px){
  #latestctitle{
   grid-row: 1;
   grid-column: 2;
  }
 }
 @media screen and (min-width:640px){
  #latestctitle{
   grid-row: 2;
   grid-column: 1;
  }
 }
#indexlinktime{
 justify-self: end;
 align-self: end;
}
 @media screen and (max-width:640px){
  #indexlinktime{
   grid-row: 2;
   grid-column: 2;
  }
 }
 @media screen and (min-width:640px){
  #indexlinktime{
   grid-row: 3;
   grid-column: 1;
  }
 }

うまくいった!狭い画面で見るとこんな感じになりました!
2020.10.10 スマホ画面での最新情報の見え方を変えてみた

達成感

さっそく本番用ファイルに内容を移植。ちゃんと動きました。昨日flexboxで苦しんだデザインが、作成に時間がかかったとは言え、gridでここまで簡単にできるとは!徐々にスマホ対応できるページになって来て嬉しいです。

今日の時間も迫ってきたので、作業はここまでにしたいと思います。明日は、各コンテンツの「投稿一覧」をスマホ対応にしていきたいです。「投稿一覧」をスマホ対応にしたら、各コンテンツのトップページのお手入れは完了です!前進している気がして嬉しい。

記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

広告