神戸グルメゲリラ

神戸生活での日常雑記、神戸の風景や野良猫たちの写真、たま~にグルメブログ書いてます。

トップページの記事一覧をflexboxにて、カード型2カラムのレイアウトに変更してみる。(はてなブログpro限定)

スポンサーリンク

はてなブログテーマを作成しました。

tommyoctopas.hatenablog.com

 

設定でトップページの表示形式を一覧形式に設定している人向けの限定記事です。

なので、はてなブログpro限定の記事となります。

 

現在、使用しているテーマのまま、記事一覧を大きなサムネイルのカード型2カラム、3カラムで表示できるCSSの記事です。

 

記事一覧をカード型2カラムに変更できるCSSを考えてみる

このレイアウトの特性は大きなサムネイルを用いて一覧表示しても情報表示の利便性が維持しやすいようです。

カード型2カラムの基本枠をflexboxだけで構成し、カード内のサイズ調整は最小限に留めて、どこまでカード型になるかの試みです。

どんなテーマでも記事一覧がカード型2カラムの表示に対応できれるCSSが完成できれば、いいなぁと考えております。

 

当ブログのテーマだけ、うまく表示されるケースを避ける為、はてなブログのデフォルトデザインでやってみたいと思います。ブログはテストデータです。

まず、通常、トップページを一覧形式にしていると、こんな感じです。

写真系のブログでは、やはりサムネイルを大きくしたいです。

f:id:tommyoctopas:20170908171422j:plain

 

アイデア

トップページの記事一覧の1記事のコンテンツが、archive-entryという要素となっております。これを束ねてる一覧の親玉がarchive-entriesという要素です。

親玉のarchive-entriesにflexboxを使わせて、各記事のarchive-entryを再配置させます。

記事の幅を47%に指定しておけば、100%枠内に2カラム並ぶ計算です。残り3%は記事間の余白の意味合いです。

記事単体(archive-entry)内のレイアウト構成、大きくは4つで構成されています。この内部も一旦、flexboxで、すとーんと縦に下方向へ並べます。


①<div class="archive-entry-header">日付と記事タイトル</div>

②<div class="categories">カテゴリー</div>

③<a class="entry-thumb-link">サムネイル</a>

④<div class="archive-entry-body">記事抜粋とソーシャル</div>

 

③(サムネイル)から④(記事抜粋とソーシャル)が引き離され、サムネイルの右横に空き領域ができます。これでサムネイルの横幅を100%してワイドにできちゃいます。あとはサムネイルの高さを適度な値に指定してあげるだけで、カード型の記事の基本枠の完成できるかもと、結構斬新なアイデアです。あとflexboxだと、orderを使えば各部品の配置換えが1発で指示できるというメリットもありそうです。

 

基本枠CSSでの挙動を確認してみる

・2カラムに変更してみる。

・記事単体をflexboxで縦に並べてカード型ぽくなるのか確認してみる。
・サムネイルの高さを調整してみる。

 

/* 親玉の記事一覧を2カラムに変更 */

.archive-entries {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
justify-content: space-around;

}
.archive-entries .archive-entry {
width: 47%;
}

/* 記事単体をカード型に変更 */

.archive-entries .archive-entry {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.archive-entries .entry-thumb {
margin: 0;
background-size: cover;
background-position: 50% 50%;
width: 100%;
height: 180px;
}

 

まずプロトタイプは、こんな感じになりました。

f:id:tommyoctopas:20170908172100j:plain

 

まずは、flexboxで思惑どおりに表示されてます。

ざっと見た感じ、さらに手直ししてカード型に近づけるなら

 

・サムネイル上に記事タイトルを置いてしまう。いかにもカード型になるのと高さの尺が稼げる

・はてなスターもサムネイル上へ設置してしまう

・記事の概要文が長いので、.archive-entryの高さを指定して、切ってしまう

・日付をサムネイル下の概要分の先頭位置に移動させ、記事タイトルの尺を稼ぐ

・邪魔ぽいカテゴリーを一旦、非表示にしてみる。あとで考える。

・枠で囲む

以上の修正を付け加え、ほぼ使えるCSS完成

サムネイルの上にタイトルを置くと結構いい感じです。写真上の文字を見やすくする工夫も入れました。

※cssは最後に添付しております。

f:id:tommyoctopas:20170911142212j:plain

 

こんな感じでございます。サムネイルが、かなり大きくなり、写真系のブログのトップページに向いているでしょうか

サムネイルは、位置50%50%で、cover表示にしています。

記事タイトルは高さの尺を抑える為、フォントを14pxにしますが、1行目だけ15pxにして若干大きくしています。

※一部のテーマでchomeブラウザでは大きくならない現象がありました。chomeブラウザでは、h1に対してfafter,before等の擬似クラスが既に使用されている場合、first-lineは作動しないようです。ほとんどのテーマでh1への擬似クラスが実装されていると思われますので、chomeでは、かなりの確率でfirst-lineが作動しないかもです。

 

 テスト用のサブブログにCSSを実装してあります。実際のものをご覧下さい。

nukonuko.hatenablog.com

 

カード型2カラム記事一覧CSS

ほぼほぼ使えるversion 1.0 です。

他のテーマでどこまで使用に耐えうるか、色々なテーマで試してみました。

おおむね、おおむねw、なんとか表示できています。各テーマに入っている日付とタイトルの装飾CSSがネックでしたが、これを回避しつつ、一定の安定度を確保できたと思います。デコレーション系のキラキラテーマへの対応も一応しました。可能な限りキラキラ装飾を引き継いでます。あとカテゴリーをどこに置くべきかを考えてみます。ていうか、もういらんかもw

 

※幅狭いスマフォは自動的に1カラムに切り替えてます。2カラム固定にしたい場合は、/*スマフォ2カラム解除*/のところを削除して下さい。

 

 

/* FlexCardPotsList Ver1.00.20170912 */

/*------ 親玉の記事一覧を2カラムに変更 ------*/
.archive-entries {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
justify-content: space-around;
margin-top: 10px;
margin-bottom: 10px;
}
.archive-entries .archive-entry {
width: 47%; /* 2カラム47% 32カラム32% */
}

/*------ 記事単体をカード型に変更 -----*/
.archive-entries .archive-entry {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

/* 記事本体のスペック*/
height: 260px;
position: relative;
margin: 0 0 15px 0 !important; /* カードの上下 */
padding: 0 !important; /*カード内の内接を密着させたい */
border-bottom: 0;
overflow: hidden;
border: solid 1px #aaa !important;

box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background: white;
}


/*----- 以下記事内の部品を微調整 -----*/
.archive-entries .archive-entry-header {
padding: 0 0 3px 0; !important;
position: absolute;
top: 0px;
z-index: 1;
width: 100%;
background: rgba(0,0,0,0.4);
}

.archive-entries .date {
padding: 0 0 4px 0 !important; /* 各テーマのpadding値ででのた打ち回る対策*/
margin: 0 !important; /* 各テーマでのた打ち回るセンターに*/
border-bottom: 0px !important; /* 下線は外したい */
height: auto !important; /* ps指定で大きい値あり */
font-size: 14px !important; /* 各テーマで巨大サイズいるwww */
line-height: 15px !important; /* 各テーマで巨大サイズいるwww */
text-align: center !important; /* 各テーマでのた打ち回るセンターに*/
float: none !important; /* floatテーマがてごわい*/
background: url('') !important; /* なんか画像貼ってるテーマあり*/
width: 100%;
position: absolute;
top: 204px;

}

.archive-entries .date a {
color: white !important;
text-shadow: 2px 2px 1px #000,
-1px 1px 1px #bbb,
-1px -1px 1px #bbb,
1px -1px 1px #bbb;
}


.archive-entries .entry-title {
padding: 2px 4px 0 4px !important; /* 不要 */
margin: 0 !important; /* 不要 */
border-top: 0px !important; /* 下線は外したい */
border-bottom: 0px !important; /* 下線は外したい */
font-size: 15px !important; /*フォントサイズ強制、でかいテーマがおる*/
line-height: 1.2em !important; /* どでかい高さのテーマがおるwww */
font-weight: normal;
text-align: left !important; /* 各テーマでのた打ち回るセンターに*/
background: url('') !important; /* なんか画像貼ってるテーマあり*/
}
.archive-entries .entry-title:first-line {
font-size: 15px;
line-height: 16px;
}

.archive-entries .entry-title a {
color: white !important;
text-shadow: 2px 2px 1px #000,
-1px 1px 1px #bbb,
-1px -1px 1px #bbb,
1px -1px 1px #bbb;
}

.archive-entries .entry-thumb {
position: absolute;
top: 0px;
margin: 0 !important; /* 密着させる */
padding: 0 !important; /* 密着させる */
background-size: cover;
background-position: 50% 50%;
width: 100% !important; /*サムネ強制*/
height: 200px !important; /*サムネ強制*/
}

.archive-entries .categories {
display: none;
}

.archive-entries .archive-entry-body {
margin: 0;
z-index: 1;
}
.archive-entries .entry-description {
padding: 4px 2px 0 10px !important; /* 余白がてごわい */
margin: 0px !important; /* 余白がてごわい */
color: #333;
font-size: 14px !important; /* 各テーマでばらつきが! */
line-height: 1.3em !important; /* 各テーマでばらつきが! */
overflow: hidden;
position: absolute;
top: 218px;
}
.archive-entries .social-buttons {
margin: 0 !important; /* 各テーマでばらつきが! */
position: absolute;
top: 172px;
}

/*----- スマフォ、カラム解除 -----*/
@media screen and (max-width: 500px) {
.archive-entries .archive-entry {
width: 100%;
}
}

 

※テーマ「Naiked」用パッチ、記事タイトルのフォントサイズ強制、このCSSはフォントの問題がある時のみ追加してみて下さい。

.archive-entries .entry-title-link {
font-size: 14px !important; /* Naiked用パッチ */
}

 

テーマにもよりますけど、3カラムも可能です。

/* 2カラム47% 32カラム32% */の部分を、32%へ変更します。

※サイドフレームが無いテーマの場合が、実用的と思われます。カラム数のレスポンシブ対応を現在検討中です。

f:id:tommyoctopas:20170911142433j:plain

 

さらに進化中、カード型1から無限カラムレスポンシブバージョン

最終バージョンでは、幅の広いテーマの場合、さらに4カラム5カラムと幅が許す限り無限にカラム数をレスポンシブに切り替えるバージョンを準備中です。

以下が、テストサイトです。ウィンドサイズを色々変えて見て下さい。カラム数が無限にレスポンシブします。近日アップしますのでしばらくお待ち下さい。

photograph.kobe.fun

 

それではまたね(^^)/