PC版トップページのデザインをカード型に変更してみた
メインブログのトップページをかっちょよくしてやったぜって記事。
このブログのデザインに惚れ込んだ
今僕のこのブログのトップページが、凄く格好良くて。
ダウンロードしたブログテーマをそのまんま使ってるんですけれどね。
カード型って言うんですか?
記事が2列に綺麗に並んで表示されているのが、とてもスマートに思えたので、メインブログでも真似したくなりました。
単純に同じテーマにすればいいのかもしれませんが、とある理由で無理なので、色々とお力を借りてカスタマイズしちゃいました。
*
ベースとなる考えは「ねこのここねこ、ししのここじし」さんのこちらの記事。
www.cocococococococococococo.com
そのまんま「Brooklyn」に当て嵌める事は出来ませんでしたので、右カラムは残したまんま2列表示に。
2列にするのも、色々と試行錯誤して、なんとかCSSを組みました。
で、最大の問題ですよ。
画像が記事の最初に来てる必要性がある…。
無理。
800もの記事を画像が最初に来るように更新し直すなんて、手間がかかる事、絶対無理。
なので、a-kuma3さんのお力をお借りいたしました。
続きを読むに記事のアイキャッチ画像を設定してしまおう!!と。
最初はカテゴリごとに決まった画像を表示させようと思いついて、自分でコードを書いたのですが、どうもしっくりこない。
そこで、記事のアイキャッチ画像をバックグラウンドに表示させたいなと。
自分では限界だったので、人力検索はてなに頼っちゃいました。
「続きを読む」の背景画像に当該記事のアイキャッチ画像を設定し… - 人力検索はてな
これで、大きな問題は解決。
画像があって、記事タイトルだけがある。
うん、出来た!!
と思ったら、まだだった。
このブログのテーマがそうなんですが、どこを押してもリンクになってるんですよね。
ちゃんとその記事の個別ページに飛ぶ。
これはなんでだろう?
どうやってるんだろう?
と、クロームの検証を使って色々見ていって、気づきました。
このテーマ、カードの母体…ていうのかな。
一番下に「続きを読む」を使ってるんだと。
「続きを読む」をカード型に整形。
CSSで透明にして、その上に画像とタイトル文字を重ねているようです。多分。
だから、どこをクリックしても、ちゃんとリンク先である…「続きを読む」の記事に飛ぶ。
僕はその「続きを読む」に背景画像を設定していますので、この手は使えません。
なんてこったい。
でも、これはすぐに解決しました。
ググったら、jqueryのコードがありましたので。
(その後も、コードが引き起こしたバグの解決とか色々あって…)
完成。
ししねこさんとa-kuma3さんのお力で、素晴らしいトップページに仕上がりました。