kamenokoki.com

【137日目】関連記事リンクのアップデート完了!

Posted:  Last Update:

数日前から「関連記事リンクをお洒落に作り変えたい!」というプロジェクトに挑んでいます。昨日、いったん完成はしたものの、デザインを新鮮な視点で見るために一晩寝かせていました。

昨日までの成果

昨日までの3日間の作業の振り返りです。こうなっていた関連リンクを、

予定変更

こうしました。

画像に文字を載せてみる

スマホ画面はこんな感じです。

画像に文字を載せてみる-2

悪くないですね。悪くないのですが、でかいな…。もう少し小さくしてみます。

サイズを調整する

さっそくサイズ感を調整してみたいとおもいます。少し小さくするのと、関連記事の掲題と内容の文字間隔を空けたいです。

で、こんな風になりました。少しだけ小さくなっています。

サイズを調整する

スマホ画面は、少し画像の幅を狭くしてみました。

サイズを調整する-スマホ画面

スタイルシートはこんな感じ。「h5」は「関連記事」の文字を入れています。「#bloglinktext」は関連記事の掲題と内容です。

#bloglink{
margin: 0 0 30px 0;
padding: 1em;
max-width: 900px;
border: none;
display: grid;
grid-template-rows: 2;
grid-template-columns: 1;
border: 1px solid silver;
column-gap: 1.3em;
position: relative;
}
#bloglink h5{
position: absolute;
top:0.7em;
left: 0.7em;
margin: 0;
padding: 0 0.5em;
background-color: #008000;
font-weight: bold;
font-size: 0.8em;
color: #FFFFFF;
}
#bloglinkimg{
grid-row: 1/2;
grid-column: 1/2;
}
#bloglinkimg img{
object-fit: cover;
margin:0;
border: none;
vertical-align: center;
vertical-align: top;
}
@media screen and (max-width:600px){
#bloglinkimg img{
width: 90px;
height: 90px;
}
}
@media screen and (min-width:600px){
#bloglinkimg img{
width: 160px;
height: 91px;
}
}
#bloglinktext{
line-height: 1.3em;
height: 5.2em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
grid-row: 1/3;
grid-column: 2/3;
}
#bloglinktext p{
text-indent: 0;
margin:0;
padding:0.2em 0 0 0;
color: grey;
}

本番環境に移植

完成したので、本番環境に移植してきます!スタイルシートの移行をして、h5を入れられるように確認して…。完了です!

早速テスト。スタイルシートを変更した場合に、表示崩れが起きないようにする方法をまとめた記事。今日もスタイルシートを変更したのでこの小技に役立ってもらいます。

問題なく表示されたので、完成!

姉妹サイトも変更

ついでに姉妹サイトも変更しちゃいましょう。「亀のチャレンジ」というサイトで、今は漢検1級にむけてチャレンジしています。

リンクは色違いで同じデザインです。

今日はここまで!

はい、今日は時間が来たのでここまでです!

明日はまた、毎日のブログ更新を簡単にしてくれるはずの、入力フォームの作成に戻りたいと思います!では、また明日!

記事をシェアする

亀の子に連絡

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

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

広告