気楽に生きよう!

うつ病、野球、エンタメ 色々喋るよ

PC版トップページのデザインをカード型に変更してみた

スポンサーリンク

この記事はご覧のスポンサーの提供でお送りします

f:id:nuruta:20170312013233j:plain
メインブログのトップページをかっちょよくしてやったぜって記事。

このブログのデザインに惚れ込んだ

今僕のこのブログのトップページが、凄く格好良くて。
ダウンロードしたブログテーマをそのまんま使ってるんですけれどね。
カード型って言うんですか?
記事が2列に綺麗に並んで表示されているのが、とてもスマートに思えたので、メインブログでも真似したくなりました。

単純に同じテーマにすればいいのかもしれませんが、とある理由で無理なので、色々とお力を借りてカスタマイズしちゃいました。

*

ベースとなる考えは「ねこのここねこ、ししのここじし」さんのこちらの記事。
www.cocococococococococococo.com
そのまんま「Brooklyn」に当て嵌める事は出来ませんでしたので、右カラムは残したまんま2列表示に。
2列にするのも、色々と試行錯誤して、なんとかCSSを組みました。

で、最大の問題ですよ。
画像が記事の最初に来てる必要性がある…。


無理。


800もの記事を画像が最初に来るように更新し直すなんて、手間がかかる事、絶対無理。

なので、a-kuma3さんのお力をお借りいたしました。
続きを読むに記事のアイキャッチ画像を設定してしまおう!!と。

最初はカテゴリごとに決まった画像を表示させようと思いついて、自分でコードを書いたのですが、どうもしっくりこない。
そこで、記事のアイキャッチ画像をバックグラウンドに表示させたいなと。
自分では限界だったので、人力検索はてなに頼っちゃいました。
「続きを読む」の背景画像に当該記事のアイキャッチ画像を設定し… - 人力検索はてな
これで、大きな問題は解決。
画像があって、記事タイトルだけがある。

うん、出来た!!


と思ったら、まだだった。


このブログのテーマがそうなんですが、どこを押してもリンクになってるんですよね。
ちゃんとその記事の個別ページに飛ぶ。

これはなんでだろう?
どうやってるんだろう?
と、クロームの検証を使って色々見ていって、気づきました。

このテーマ、カードの母体…ていうのかな。
一番下に「続きを読む」を使ってるんだと。

「続きを読む」をカード型に整形。
CSSで透明にして、その上に画像とタイトル文字を重ねているようです。多分。

だから、どこをクリックしても、ちゃんとリンク先である…「続きを読む」の記事に飛ぶ。


僕はその「続きを読む」に背景画像を設定していますので、この手は使えません。
なんてこったい。

でも、これはすぐに解決しました。
ググったら、jqueryのコードがありましたので。

(その後も、コードが引き起こしたバグの解決とか色々あって…)

完成。
f:id:nuruta:20170328035215g:plain
ししねこさんとa-kuma3さんのお力で、素晴らしいトップページに仕上がりました。