kamenokoki.com

【39日目】各カテゴリのトップページをデザイン

Posted:  Last Update:

サイトを作成し始めて39日目になりました。昨日はレスポンシブデザイン(スマホ対応)に挑戦したのですが、納得がいかない所も少々…。

ロードマップ

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

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

本文を画面の中央に置きたい…

本文を画面の中央に置きたい。それだけのことがなぜこんなに難しいんでしょうか…。昨日は苦肉の作として、下記のようにスタイルシートを設定しました。本文が900px、ナビゲーションバーが300pxなので、これで画面の中央に配置されるはずです。

@media screen and (min-width:1400px){
#articlestyle{
margin-left: calc(50% - 450px);
margin-right: auto;
width:900px;
}
}

ところが、あるはずのないマージンを計算されてしまっていて、1400pxではうまくいかず、最終的に1600px辺りで変更できるようにしました。すると、今度は、1600px以下、1260px以上辺りでは、本文が左側に飛んでしまいます(1260~1600pxではナビゲーションバーがまだ右側にある)。なんかいい計算式はないものでしょうか…。

もしかして、これがうまくできないから、みんな要素を中央に寄せているのかしら?…解決できないので、ゆっくり考えていくことにします。

各トップページの最新情報をそれっぽく

考えても思いつかないことは後回しにして、各トップページの最新情報をデザインして行きたいと思います。既にflexboxで囲っているので、位置決めは自動的にやってくれます。今日やりたいのは、とにかく「最新投稿」を見やすい箱にすること。まずは他の人のデザインを見て、どのようなデザインをしているか研究しました。字だけの方もいましたが、画像だけの方もいました(画像に字を入れ込んでる)。字だけだと情報量が多すぎて探すのが大変、画像だけは私の技術が追いつきません。画像+文字少しで勝負したいと思います!

デザイン的には、やはり箱で囲っている人が多かった気がします。あと、日付は下の方についてることが多いかな?それと、画像サイズ。アイコン?サムネ?用に、決まったサイズの画像を準備されていました。統一感のあるデザインには、これが重要だと思います。早速作業をしていこう。

まずは画像の研究

画像のサイズをまず決めて、バランスをみながら作っていこう!ということで、いろいろなブログを見て回って、画像サイズを研究しました。横対縦が、8対5、7体4辺りが多い気がします。私の場合は、もともとある画像が7対4に高いものが多い気がするので、7対4を採用することにしました。まずは、今使っている画像を7対4に変更しないといけません…。全てやるのは面倒なので、表示される最大数(6件)分だけ今は処理しておきましょう。後はおいおい(こうやってやることが溜まっていく…)

まだ半分もやってないのに20分経ってます…。そして作業中に気付きました。これまで、スクリーンショットを撮るときに赤い枠をつけていたんですけど、要らないかも…。本文中の画像にはスタイルシートで赤枠(オレンジ?)をつけておこう…。

時間はかかりましたが、それなりの成果が。画像サイズを同じにして、枠線をつけただけで、統一感が出てきました。
作業前
2020.10.08 画像サイズを一致させる前
作業後(画像にグレイの枠を仮につけています)
2020.10.08 画像サイズを一致させた後

過去の投稿も、そのうち「人気記事」とかで出していきたいので、ちょこちょこ画像を整えていきたいと思います。

ボックスを作る

画像が(一応)きれいになったので、画像と文字を入れる箱を作っていきたいと思います。ちょっと浮かび上がるようなデザインにしたいな~なんて思っております。

ますば箱を作ってみました。boxshadowを使って陰をつけてみました。flexboxの高さがそろわないので、100%からマージン分1emをひいた高さに固定もしてみた。

#latestchild{
width:280px;
height: calc( 100% - 2em );
margin: 0.5em 0.5em 2em 0.5em;
border-radius: 2px;
box-shadow: 0 1px 3px 0 grey;
}

画像は大きさを固定して作成しているので、横幅は100%、縦は自動で入るようにしました。左右と上は「#latestchild」の箱で線が引かれているので、下だけ枠線を引いておきました。

#latestchild img{
width: 100%;
height: auto;
object-fit: contain;
margin: 0;
padding: 0;
border-bottom: 1px solid grey;
}

あとは、文字が箱にぎちぎちにならないように、マージンを指定。日付は薄く、小さい字で表示します。

#latestchild div{
margin: 0 0.5em 0 0.5em;
}
#indexlinktime{
font-size: 0.9em;
color:grey;
}

それっぽくなったかな?

上で指定したスタイルシートを呼び出すHTMLがこちらです。PHPで毎回違うリンクや画像を呼び出しています。

<a href=リンク>
<div id="latestchild">
<img src="記事のイメージ画像">
<div>
<span id="indexlinktime">日付</span><br>
<b> '記事のタイトル'</b>
</div>
</div>
</a>

HTMLとスタイルシードを適用したデザインがこちら。なんだかそれっぽくなってきました。
2020.10.08 最新記事へのリンクをそれっぽく作ってみた

今日はここまで

最近作業がなかなか進まないのですが、…天気が悪くて集中できないせいかな…?今日も時間が来てしまいました。まだ、画面幅に従って箱の大きさを変えるという作業が残っていますが、明日に回します。

しばらく続けていた「見栄えをよくするための日記の修正」が昨日終りまして、「日記にメタデータのdescriptionを入れる」という作業も残り4日になりました。今日から「画像をサムネサイズに作り変える」という作業も加わりますが、記事も増やしていきたいなぁ。

明日は、画面幅に従って最新投稿の箱の大きさを変える作業から進めたいと思います!

記事をシェアする

亀の子に連絡

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

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

広告