「つばさノート」さんのトップページカード型CSSをカスタマイズして3列にする
久しぶりにブログについての記事。最近こどみす（id:codomisu)さんのテーマ、CodoMisu Flatを導入しました。
そこで、ちょっと心機一転するかと思い立って、トップページをカード型にしました。デフォルトでも素晴らしいデザイン（2列）ですし、バランスも良いので特に不満はないのですが、目に飛び込んでる記事数をもっと増やしたいと唐突に思い、3列にする決心をしました。
とりあえず、こんな感じになりました。
CSSはつばさノートさんの一部を弄るのみ
僕は1時間ほどGoogleで検索しながら悪戦苦闘していましたが、実際は5分程度で終わると思います。
トップページカード型にしてねえよって人に関してはこちらのつばさ(id:tsubasa123)さんの記事を参照。
ちなみに下記につばさノートさんのCSSを引用させていただいていますが、これだけでは意味がない（Java Scriptを記述しないと意味がない）ので、記事を見ながらやって下さい。
.page-index .archive-entries {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.page-index .archive-entry {
flex: 0 0 48%;
position: relative;
display: flex;
flex-direction: column;
}
.page-index .archive-entry-header {
order: 2;
}
.page-index .date {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.page-index .categories {
order: 4;
position: absolute;
top: 0;
right: 0;
z-index: 10;
}
.page-index .entry-thumb-link {
order: 1;
height: 200px;
}
.page-index .entry-thumb {
width: 100%;
height: 200px;
background-position: center center;
background-size: cover;
background-repeat: none;
position: absolute;
}
.page-index .archive-entry-body {
order: 3
}
.page-index .entry-title {
padding: 0.5em 0 0 0;
}
このCSSの6行目
.page-index .archive-entry {
flex: 0 0 48%;
を弄ればオッケーです（多分）（出来なかったらごめんなさい）
僕は
flex: 0 0 32%;
にしていますが、テーマによって差異があるみたいなので、適時変えて見て下さい。
少なくとも、Codomisu flatを使っている方は僕の設定で大丈夫だと思います。 お好みで30%〜35%に調整して見て下さい。
本文は非表示にしよう
流石に三列ともなると、情報量が膨大です。タイトルと画像でかなりお腹いっぱいになりますし、文字がしつこい感じにどうしてもなります。
Minimal-Green（id:syofuso）さんのCSSに本文の表示を消す奴があるので、先ほどのつばさノートさんのCSSの一番下に貼り付けておくのがオススメです。
問題点
現状把握している問題点を書いておきます。初心者のカスタマイズですので、ここら辺はご勘弁。上手いことやってくれ。検討を祈る。
狭え
2カラムの方の場合、カード型3列はノートPCやipadで表示するとかなり窮屈な雰囲気になりますので、もし三列にしたい方は少なくとも、タブレットサイズからは1カラムにすることをおすすめします。
こちらの記事参照。
画面いっぱいに表示ができぬ
こればっかりは自分の素人加減を恨むしかないのですが、タブレット等だと、ちょっと隙間が空いてなんか微妙な感じになります。
正直「なんだかな」感は否めないので、改善次第、追記しようと思います。
ノートPCやPC版ならばっちりな感じだと思われます。
まとめ：CSSは奥が深い
僕はいろんなサイトの「コピペで一発」系CSSをつぎはぎしてブログを作っていますが、色々自分で改変したりはしています。その度にめちゃくちゃ時間取られるんですよね。そんなことより記事書けやって感じではあるのですが。
だれかの役に立てばいいな。と思ったのですが、もし立たなかったら悲しいや。
