ホーム > 亀の子記（日記）ど素人が独学でHTMLやPHPを勉強してサイトを作る日記

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

Posted:2021.01.14　 Last Update:2021.01.15

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

昨日までの成果

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

こうしました。

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

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

サイズを調整する

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

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

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

スタイルシートはこんな感じ。「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;
}