Blogs list page 制作

Diposkan oleh 雑居ビル管理人 pada 29 Januari 2022

List page by tags

ブログ一覧ページが元々ないので作成。

本当はこうしたかった。コレクションリストページのように、自動フィルタリングされたカテゴリーが表示、そのサムネイルも設定可能、が理想的。

けど、Shopifyの構造上できないと言われたので、コレクションじゃなくページのテンプレートを少し弄ってそれっぽくした。
絶対なんかやり方あるはずだけどなぁ、まあ形にはなったかな？

ただ、一番下段に記載した"Home"のとこを、私が無理矢理作ったブログ一覧ページに飛べるようにはまだできてない。

これはどこをいじればいいんだろう、でもこの元々あるhtmlをどうにかしないとだろうな。
blog.liquid(中段のブログフィルタ)
blog.article.liquid(下段の個々のブログ記事)

blog.liquidに関しては、表示する行数を少なくするのと、read moreを太く変更してる。でも、カラーがなぜか変更されない。なんでー

<p>{{ article.content | strip_html | truncatewords: 4 }}</p>
{% endif %}

<span style="color:#ff0000; font-weight:bold;">
<p class="read-more"><a href="{{ article.url }}">{{ 'blogs.article.read_more' | t }} →</a></p>
</span>

話は戻ってリストの件
page.blog-list.liquid(今回作った上段のブログ一覧 html)
⬇️
<div class="blog-list">
<table border="1">
<tr>
<td>
　　<a href="https://zakkyobiru.com/blogs/film">
　　<img src="https://4.bp.blogspot.com/-STGpmE-suDo/V5zJVtxZruI/AAAAAAAA82k/tJKQHZJqrikZfjB-UexOg8fXIEsldshOwCLcB/s400/eiga_set.png"/>
<center> <h2>film</h2> </center> </a>
</td>
</tr>
</table>
</div>
現状このやり方でやってみた。

これで画像のリンク付け、でも本当は相対パスにしないといけない？容量の負担が向こうにかかるってことかな

⬇️このやり方だと、写真下の文字もカーソルを合わせると色変わってアンダーバーも出る。けど二重で同じリンク書かないといけない。
今のやり方は、文字はカーソルなしアンダーバーなしだけどボックス内全部にリンクが付いてる状態。まあどちらでもいいのかな。
<td>
　<a href="https://zakkyobiru.com/blogs/cook">
　　<img src="http://placekitten.com/g/300/300"/></a>
　　<center><h2><a href="https://zakkyobiru.com/blogs/cook">cook</a></h2></center>
</td>
あと、このやり方だと写真のサイズをcssじゃなくこっちのhtmlで設定できる。でもいらすとやの絶対パスだとうまくいかなかったのでcssで指定中。なんでかな？

そうだ、cssの4500あたりでブログリストの追加したけど、media-queryごとにサイズを300と150で分けた。そしたらレスポンシブにうまくサイズが動いてない。当たり前か。
最初に書いた参照サイトだとそんなことないから、おそらくobject-fitを使用した違うやり方を考えないといけない。

/*================ Blog list 元々ない ================*/
/*親要素、画面の幅を100とする*/
.blog-list {
　　width:100%;
}

/*子要素の１かたまりを画面の三分の一に*/
.blog-list td {
float:left;
width:33%;
/*文字下の空きが広いので多少狭まった*/
padding-bottom:0px;
@include media-query($small) {
width:50%;
}
}

/*displayなくても変化ないけど、幅高さ指定するのにいるのか？なんとなく入れてる*/
.blog-list img {
display:block;
/*比率の違う画像を上下中央寄せ*/
object-fit: contain;
/*本当はobject-fitを使用してデバイスごとにレスポンシブに縦横比変わるようにしたかったけど諦めた*/
@include media-query($medium-up) {
width: 300px;
height: 300px;
}
@include media-query($small) {
width: 150px;
height: 150px;
}
}

ちょっと疲れて適当にやってしまった。問題点まだあるけどとりあえず放置、、、

解決策ご存知の方、コメント頂けると参考になります。

ネットで調べてどうにかやってる程度、勉強したことないので、お見苦しい点が多くてすみません（−＿−；）

Tag: coding

Blogs list page 制作

0 komen

Tinggalkan komen