【88日目】関連記事をおしゃれに表示させたい！-2
Posted: Last Update:
昨日から取り掛かっている「関連記事の投稿をおしゃれに表示したい」という課題。昨日は辛うじて箱ができたので、今日はおしゃれに磨きをかけていこうと思います。
昨日までの成果と今日やりたいこと
昨日はこんな感じで箱ができました。今日はもう少しちゃんと画像の表示をしたり、画面幅に合わせたりしていきたいと思います。
画像を箱に合わせて表示させる
まずは、箱に合わせて画像を表示させるところからやってみたいと思います。
どうでしょう？画像を変えたせいもありますが、一気にそれっぽくなりました。
画像に「object-fit: cover;」というスタイルシートを使ってみました。中心を始点にして、縦横狭い方を幅に合わせ、広い方はトリミングしてくれるスタイルシートの優れものです。
スタイルシートはこんな感じです。
#bloglinkimg img{
width: 115px;
height: 115px;
object-fit: cover;
margin:0;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
border: none;
vertical-align: center;
vertical-align: top;
}
width: 115px;
height: 115px;
object-fit: cover;
margin:0;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
border: none;
vertical-align: center;
vertical-align: top;
}
文字列を箱に合わせて表示させる
次は、タイトルなどの文字列の変更。line-clampを使って説明文を短縮します。せっかくなので、line-clampの使い方のページでリンクを作ってみました。
説明文をもう少し薄い色で表示させた方が見やすい気がしますね。あと、ちょっと縦に太い気もします…。現在のスタイルシート（文字部分）がこんな感じです。
#bloglinktext{
font-size: 0.9em;
line-height: 1.5em;
padding: 1em;
height: 5em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
font-size: 0.9em;
line-height: 1.5em;
padding: 1em;
height: 5em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
今日はここまで
時間が来てしまったので、今日はここまで。明日は、もう少し箱の形を整えていきたいと思います。
スタイルシートの設定が終わったら、PHPでリンクを作成できるようにしないと！やることがたくさんあります。
おまけのロードマップ
サイト作成がどのくらい進んでいるかロードマップで進捗を確認すると、ここまで進んでいます。
- 準備 - サイトの全体像を決める
- 使用するプログラミング言語を決めて環境を整える
- サイトの基本構造を作って公開する
- 収益化に最適なサイトにアップグレードする
- GoogleアドセンスとAmazonアソシエイトの申し込みをする ←完了！
- ローカルで簡単に入力ができるようにフォームを作る
- フォローアップ - より収益化に向いたサイト構造に変更する
記事をシェアする
亀の子に連絡
ランキング参加中！ぽちっとしてね
