はてなブログでトップページをカード型にした際に、1記事目だけ全幅で表示する方法

f:id:tsubasa123:20170604181324j:plain

こんにちは、つばさ(@tsubasa123)です。

短文ですが久しぶりにはてなブログカスタマイズの小ネタをお届けします。ツイッター見てたら気になったのでちょっとだけ試してみました、ご本人様に届くといいですね。

トップページのことだと思うんですが

ツイートを引用で拝借。

2列に並んでいる記事の一番上に2列分の大きさで一つの記事を配置したい。

とのこと。

この方ははてなブログを利用されており、トップページにはアーカイブ表示をカード型にするカスタマイズを導入されています。部分的に私のカスタマイズ(画像をごちゃごちゃするやつ)もご試用いただいているみたい、ありがとうございます。

ってことは、さきほどのツイートははてなブログのトップページのことなのかな?1つ目の記事だけ全幅で、それ以外の記事は今まで通り2列表示でいいのかな?どうかな?

私の仮説が正しければ

.page-index .archive-entries > section:first-child {
flex: 0 0 100%;
}

この3行(実質1行)を追加すればカード表示の1つ目だけが全幅で表示されるようになります。

f:id:tsubasa123:20170905203906j:plain

こんな感じ。うん、確かに目立つようになります。悪くないですね。

www.foxism.jp

design.syofuso.com

www.tsubasa-note.blog

トップページをカード型にする方法もいくつかあると思いますが、私が把握しているのはこの3つ。試さずに記事を書いていますのでもしかしたらダメかもしれませんが、おそらくどのカスタマイズでも大丈夫だと思います。先のスクショはminimalgreenさんのカスタマイズをベースにしているので、minimalgreenさんのものは確認済みということになります。

ただ、レスポンシブの場合はどうなるかちょっと予想ができません。導入される際は自己責任でお願いします。わからないことがあったら質問してください。

さいごに

というわけで、最近はてなブログのカスタマイズ記事をあげてなかったので小ネタではありますが筆をとってみました。

ツイートみて思いつきで書いたんですが、これ作りこんだら結構需要がありそうな気もしますね。ご本人様に届いたらクオリティアップバージョンを検討しても良いかもしれません。

ではでは、最後までお付き合いいただきありがとうございました。