宇宙時代より

宇宙時代より

素敵なコンテンツ作成を目指して頑張る大学生のブログ

「つばさノート」さんのトップページカード型CSSをカスタマイズして3列にする

f:id:skyfish25:20171105180701j:plain

久しぶりにブログについての記事。最近こどみす(id:codomisu)さんのテーマ、CodoMisu Flatを導入しました。

codomisu-flat.hatenablog.com

そこで、ちょっと心機一転するかと思い立って、トップページをカード型にしました。デフォルトでも素晴らしいデザイン(2列)ですし、バランスも良いので特に不満はないのですが、目に飛び込んでる記事数をもっと増やしたいと唐突に思い、3列にする決心をしました。

 

とりあえず、こんな感じになりました。

f:id:skyfish25:20171105183720j:plain

CSSはつばさノートさんの一部を弄るのみ

僕は1時間ほどGoogleで検索しながら悪戦苦闘していましたが、実際は5分程度で終わると思います。

トップページカード型にしてねえよって人に関してはこちらのつばさ(id:tsubasa123)さんの記事を参照。

 

www.tsubasa-note.blog

www.tsubasa-note.blog

 

ちなみに下記につばさノートさんの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;
}

http://www.tsubasa-note.blog/entry/hatena-card-design

 

このCSSの6行目

 

.page-index .archive-entry {
flex: 0 0 48%;

 

 

を弄ればオッケーです(多分)(出来なかったらごめんなさい)

僕は

 

flex: 0 0 32%;

 

にしていますが、テーマによって差異があるみたいなので、適時変えて見て下さい。

少なくとも、Codomisu flatを使っている方は僕の設定で大丈夫だと思います。 お好みで30%〜35%に調整して見て下さい。

 

本文は非表示にしよう

流石に三列ともなると、情報量が膨大です。タイトルと画像でかなりお腹いっぱいになりますし、文字がしつこい感じにどうしてもなります。

Minimal-Green(id:syofuso)さんのCSSに本文の表示を消す奴があるので、先ほどのつばさノートさんのCSSの一番下に貼り付けておくのがオススメです。

 

design.syofuso.com

 

問題点

f:id:skyfish25:20171105184051j:plain

現状把握している問題点を書いておきます。初心者のカスタマイズですので、ここら辺はご勘弁。上手いことやってくれ。検討を祈る。

 

狭え

2カラムの方の場合、カード型3列はノートPCやipadで表示するとかなり窮屈な雰囲気になりますので、もし三列にしたい方は少なくとも、タブレットサイズからは1カラムにすることをおすすめします。

こちらの記事参照。

 

theme-plain.hatenablog.com

 

画面いっぱいに表示ができぬ

 

こればっかりは自分の素人加減を恨むしかないのですが、タブレット等だと、ちょっと隙間が空いてなんか微妙な感じになります。

正直「なんだかな」感は否めないので、改善次第、追記しようと思います。

ノートPCやPC版ならばっちりな感じだと思われます。

 

まとめ:CSSは奥が深い

f:id:skyfish25:20171105184318p:plain

僕はいろんなサイトの「コピペで一発」系CSSをつぎはぎしてブログを作っていますが、色々自分で改変したりはしています。その度にめちゃくちゃ時間取られるんですよね。そんなことより記事書けやって感じではあるのですが。

 

だれかの役に立てばいいな。と思ったのですが、もし立たなかったら悲しいや。