ズボラ×こそだて×デジタル

”ズボラマミー”すーさんによるデジタル&子育て&moreライフ

【ブログカスタマイズ】トップページの記事一覧をカード式にしました

f:id:kobedzmint:20181115175706j:plain

こんにちは、すーさん(@kobedzmint)です。

この度、ブログのトップページの記事一覧を、カード式にカスタマイズしました。
そこで、今回はカスタマイズの参考にしたサイトと現在の見え方についてまとめたいと思います。

記事一覧をカード式に

以前からカード式にカスタマイズしたい!と思いながら、知識も時間もなく挑戦することもなく過ごしていました。
ですが、今回思い切ってカスタマイズに挑戦しました。

知識もないのでまだまだな点も多いですが、また一歩自分らしいブログに近づくことができました。

参考にしたサイト

トップページを記事一覧に変更する際は、以下のサイトを参考にしました。
知識がないので、ほぼそのまま使わせてもらっています。

一覧表示の画像をオリジナルのものにするカスタマイズも合わせて一度は導入しました。
しかし、タブレットとPCから見るカード式ではいい感じになったのですが、スマホ版(スマホ版は以前と同じ一覧表示です)の画像が綺麗に表示されませんでした。

そのため、以下のカスタマイズは一度導入したものの保留中です。

さらにカスタマイズ

  • 一覧表示には、シンプルにしたかったので、はてなスター・はてなブックマーク・本文の抜粋文は非表示にしました。
  • ブレークポイントは480pxにしました(タブレットでもカード式の表示にしたかったので)。

見え方

現在私は、iPhone7、iPadpro9.7、MacbookAirを使用しています。

そこで、私の持っている端末からの、それぞれの見え方のスクリーンショットを載せたいと思います。
他の端末から見られた方で、カード式の見え方がおかしい場合は、教えていただけるとありがたいです!
が、知識がないので、直せるかは微妙なところですが・・・。

iPhone7(縦)の場合

iPhone7(横)の場合

iPad pro 9.7(縦)の場合

iPad pro 9.7(横)の場合

MacBookAirの場合

まとめ?!

あまりカスタマイズは得意でないのですが、これからも少しずつ自分らしいブログにしていきたいと思います!
えいえいおー!


▼知識ゼロなすーさんがチャレンジした、タグクラウド風カスタマイズ記事もぜひ▼