「『WCR御礼より』追加記事一覧」の表示形式を修正

 2024/12/15 Sun

Blogger

Blogger 本館「花楽紗【KARAKUSA】」内の「『WCR御礼より』追加記事一覧」を、
スマホでの閲覧時に重きを置いて、少し変えてみました。

「WCR御礼より」追加記事一覧

「WCR御礼より」追加記事一覧

「FC2拍手」を利用していた頃に多くの拍手を頂いた記事の一覧です。 Seesaa BLOG 時代に「WEB拍手ランキング」として 月末ごとに集計結果を発表したり、ちょっとした裏話の公開などをしていました。 以下の記事には、当時の御礼コメントを加筆修正して追記していますの...


具体的には、1件ずつの表示面積をコンパクトにして、
ページ全体の長さ(高さ?)を抑えて、
そんなにしゃかしゃかスクロールしなくてもいいようにした、って感じ?

このページ、リンクカードをぺたぺた貼り付けて作っているのですが、
パソコンで見ている場合はともかく、
スマホなどの小さめの画面では、
サムネイルがちょっと大きすぎるかなぁ、と思いまして。
イラストページのリンク集としてならともかく、
あのページでは、よみものページの地味なキャッチ画像も多くて、
ちょっと無駄に感じてしまったのです。

うーん、言葉だけでごちゃごちゃ説明するよりも、
ここはビフォーアフターの画像を見て頂いた方が、きっと早いよね。
というわけで、はいドン!(↓)


before

(↑)before(PC版/スマホ版)

(↓)after(PC版/スマホ版)

after

PC版だと、表示幅100%でスニペット(記事の概要)が3行では、
ちょっとぎっちりしてかっこ悪いかな、とも思いましたが、
最大値を指定しても、それはそれで何だか不自然に見えてしまったので、
とりあえずこれでいいかな、と。

ただ、まだ少し迷い中なので、
こちらの memo の方の、ほぼ同一内容の「WEB拍手ランキング TOP35」では、
修正前の大きなサムネイル表示のままにしてあります。
こちらはもともと、「記事」ではなく「ページ」として作成した、
おまけとか隠し通路みたいなページなので、見る人も少ないだろうし。
(一応、サイドバーの下部からリンクは張ってありますが、
 特にスマホ閲覧時では、そこに気付く方はごく少数と予想中)

いやー、こないだ Bluesky のシェアボタンを追加するべく、
久しぶりに HtML や CSS をいじっていたら、
またいろいろと、サイトの表示とか UI 的なもの(?)で課題を見つけて、
悩みつつもちょっと楽しくなってしまってねぇ、えへへ……。
本館はすっかり倉庫化しつつありますが、せめて手入れは怠らないようにしたい。
またいろいろと、勉強しよう。

WEB拍手ランキング TOP35

WEB拍手ランキング TOP35

本館サイト 「花楽紗【KARAKUSA】」 にて「FC2拍手」を利用していた頃に 多くの拍手を頂いた記事の一覧です。 Seesaa BLOG 時代に「WEB拍手ランキング」として 月末ごとに集計結果を発表したり、ちょっとした裏話の公開などをしていました。 以下の記事には、...

Labels

Archives

Recent Posts

Profile

桜衣淑乃(SAKURAI Yoshino)
めんどくさがりやの凝り性
ラクをするための手間は惜しまず
お茶と焼き菓子とぬいぐるみが好き
本館サイト「花楽紗【KARAKUSA】」

HOMETOPCONTACT

Powered by Blogger | Designed by QooQ