雑記ブログをやってみる-ひげしげノート

雑記ブログです。日記的なもの、興味のあるもの、買ったもののレビューとか書いたり書かなかったり。

【はてなブログをカスタマイズ】2列表示のカード型にしてTOPの記事を大きく表示する方法

f:id:higeshige:20181020005002j:plain

今回はTOPページの記事一覧の表示を2列のカード型表示にする方法と一番上に来ている記事を大きく表示する方法について紹介します。

※はてなブログproでトップページの表示形式を一覧表示にしているPC版ブログ限定の記事になります。

 

2列のカード型にする理由と記事を大きく表示する理由

2列のカード型

トップページを開いたときに目に飛び込んでくる情報量を増やしたかったからです。1記事分しか増えてないんですけどね。

 

情報量を増やすためにやたらに詰め込んでも下手をするとごちゃごちゃするだけになってしまうので、そこはうまくやりたいところです。思ってはいるけど中々形にできない。デザインできない。変更したこの2列型も「サイコー!」という感じでもない。

 

デザインは難しい。

 

とりあえずはこの形で様子をみようと思っています。

 

トップの記事を大きく表示 

いまトップには一番読んでもらいたい記事を固定で置くようにしています。

詳しくはこちらで。

www.hs-note.com

 

2列型に変更すると、この固定記事ともう一つ最新記事が並んで表示されることになって、何となく強調具合が薄れる感じがしたんです。折角固定して上に持ってきているのだから強調させたい。

 

ということでTOPの記事だけ横幅いっぱいのカード型にしました。

 

2列表示のカード型にしてTOPの記事を大きく表示する方法 

次のコードを

「デザイン」→「カスタマイズ」→「デザインCSS」

にコピペすれば完了です!

 

/* トップページカード型 

------------------------*/

@media (min-width: 768px){

.page-index .archive-entries {

  display: -webkit-flex;

  display: flex;

  -webkit-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-justify-content: space-between;

  justify-content: space-between;

}



.page-index .archive-entry {

  margin-bottom: 20px!important;

  padding-bottom: 10px;

  box-sizing: border-box;

  width: calc(50% - 10px);

}



/*一番最初の記事*/

.page-index .archive-entries > section:first-child {

    flex: 0 0 100%;/*一番最初の記事だけ大きく表示*/

}

}

 

黄色のマーカー部の数値を変更して好みの記事間隔にすることができます。 

 

@media (min-width: 768px)〜はデバイスの画面幅が768px以上のものに適用しますよという意味でサイズ的にタブレットを指すようです。

 

なのでスマホで見ると以前と何も変わっていません。

 

もちろんこの数字は自由に変えられます。

 

ビフォーアフター

変更前の記事一覧がこんな感じ。(ちょっと古いですが)

f:id:higeshige:20181028001524j:plain

 

今回の変更を加えたものです。

f:id:higeshige:20181028001534j:plain

 

もうちょっとスッキリさせたいですが、しばらくこれで行きたいと思います。

 

<注意事項> 

ひげしげはHTMLやCSSなどあまり知識のない素人です。そんなやつが、カスタマイズについて書かれているサイトから持ってきて、くっ付けて、ちょっと変えて、を繰り返して作ったものです。ご自分のサイトでもし使う場合はご注意ください。形が崩れたり、機能しないなんてこともあるかもしれません。

 

それと、ひげしげの別のブログを作る時に使ったものなのでどこから頂いたものかもうわからない状態です。悪しからずご了承ください。(判明したものはもちろん紹介させてもらいます!)

 

では!