今回はWebページの見栄えを改善するために、テーマのカスタマイズをCSSを使って行った。今まで、既存のテーマのスライダーを使っていたが、表示する元の画像によって、白い空白ができていて見栄えが悪かった。そこで、CSSを使って、空白をなくす工夫を行った。具体的にはファイルマネージャーに、
.flexslider .slides li {
   height: 400px;
   overflow: hidden;
}

.flexslider .slides img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}を入力した。すると、切り抜き表示にすることができた。しかし、それでは二枚目のスライド以降が横に黒い空白が生まれてしまったため、元の画像をパノラマ比率にし、よこに画像を設定することで改善した。今後は、見た目のデザインだけでなくユーザーが利用しやすいサイトにすることを心掛けていきたい。

タグ