どうも！フジグチです！
当ブログも更新の頻度は遅めですが、少しずつ記事が増えてまいりました。（まだまだこれで８記事目ですが）
トップページの記事数を１０記事としているので、スマホで記事一覧を見るとそれなりにスクロールしないと下の記事に辿り着かないんですよね。
最新の記事だけでなく興味を持って頂いた色々な記事をみてもらいたいので、スマホ表示時でも記事一覧を２カラム（２列）表示にすることにしました。
色々言っても、本音はちょっと憧れててやってみたかっただけなんですが（笑）
そこで当ブログで行ったスマホの２列表示のカスタマイズをご紹介します。
スマホ表示時に２列にするCSS
２列表示にするやり方はありがたいことに、テーマ作者の【ろくぜうどん@rokuzeudon】さんが紹介してくれています。
はてなブログテーマ「 UnderShirt 」をスマホでも２列表示にするカスタマイズ
今回はこのコードを使わせていただいて、さらに当ブログにあったカスタマイズをしていきたいと思います。
最後に当ブログのカスタマイズCSSをまとめてあります。
２列に表示する
その２列に表示するコードを当ブログに入れるとこうなります。
※記事説明文はあらかじめCSSで消してあります。
余白をなくす
ちょっと縦長ですが余白をなくすコードも作ってくれているので、そちらも入れさせてもらうとこうなります。
日付、カテゴリのカスタマイズ
さらに以前当ブログで紹介した
この記事の【日付の位置を変える】【カテゴリをタブ風に変える】カスタマイズを適用するとこうなります。
なかなかいい感じになりました！
しかし、枠線を入れていることによって字の余白が均等ではないことが気になり、せっかくなら１ビューで６記事が見れるくらいにしたいので、削れそうな余白をさらに削っていきたいと思います。
「画面端に近くなりすぎる」とか「余白の美」ということは素人という名目を借りて無視して、自称ミニマリストとして削れそうなものは削っていきます！
コードをいじるのを失敗するとデザインが崩れ面倒なことになるので手順は割愛しますが、とりあえず完成した記事一覧がこちら▼
文字サイズや文字間の調整、記事間の余白、画像サイズの調整を行いタイトルの長さ等はありますが、何とか６記事表示に成功し（端末にもよりますが）なかなか気に入ったトップページになりました。
やってみることでテーマ作者様たちの凄さが分かり勉強にもなりました。私もテーマを１から作れるようになってみたいですね。
１ビューで６記事見せるCSS
【PC】
スパナマーク ⇒ デザインCSS ⇒ 枠内に貼り付け
【スマホ】
記事 ⇒ 記事上に<style>～</style>で囲んで入れる
/*コメントアウト*/しているところ意外はいじらないほうがいいです。
カテゴリタグの左右振り分けのCSSは記述していません。
/*------------------------------
UnderShirtスマホで記事を２列表示
--------------------------------*/
@media (max-width: 767px){
.archive-entry {
width: calc( 50% - 3px);
}
.archive-entry:nth-child(2n) {
margin-left: 6px;
}
.page-archive .entry-thumb {
height: 28vw;
border-bottom: solid 1px #65644e;/*アイキャッチ下枠線*/
}
.page-archive .entry-thumb-link {
width: calc( 100% + 10px);
margin: -10px 0 5px -5px;
}
.page-archive .archive-entry {
position: relative;
border: #65644e solid 1px;/*記事の外枠線*/
border-radius: 0 2px 3px 3px;/*記事の外枠の丸み*/
padding: 10px 5px 10px 5px;
}
.page-archive #main-inner {
padding: 20px 6px;
}
.archive-entry-header .entry-title {
font-size: .9rem;
}
.archive-entry-header .date {
position: absolute;
bottom: -2px;/*日付の位置下から*/
right: 3px;/*日付の位置右から*/
margin: 0;
font-size: .7em;/*日付文字サイズ*/
}
.page-archive .archive-entry .archive-entry-body {
display: none;/*記事説明文、スター、ブックマークまとめて消す*/
}
/*タブ風なカテゴリタグ*/
.page-archive .archive-entry {
margin-bottom: 25px; /*記事間の余白調整*/
}
.page-archive .archive-entry .categories {
position: absolute;
bottom: 100%;
left: -1px;
}
.page-archive .archive-entry .categories a {
margin: 0;
background: #fcfc71;/*背景色*/
color: #888;/*文字色*/
font-weight: bold;/*文字太さ*/
border: #65644e solid 1px;/*枠線*/
border-bottom: none;/*記事との境目の枠線を消す*/
border-radius: 4px 4px 0 0;/*外枠角丸*/
padding: 2px 4px 0 3px;/*カテゴリタグ内余白*/
letter-spacing: -1px;/*文字間の調整 文字数によっては調整してください*/
vertical-align: bottom;/*文字下寄せ*/
}
}カテゴリを一つだけ表示
カテゴリを複数設定している場合はデザインが崩れます。そういった場合は一つにするか、以下のコードを入れてスマホ表示時のみカテゴリの表示を一つだけにしてください。
@media (max-width: 767px){
.page-archive .categories a:nth-child(n+2) {
display: none;/*最初のカテゴリのみ表示*/
}
}カテゴリを左右に振り分けて配置
カテゴリを記事毎に左右に振り分けて表示するCSSをご紹介します。
あまり需要がなさそうですが、こういうことも出来るんだな～と楽しむ程度で使うとしばらく楽しめそうです（笑）
.page-archive .archive-entry:nth-child(odd) .categories {
position: absolute;
bottom: 100%;
left: -1px;
}
.page-archive .archive-entry:nth-child(even) .categories {
position: absolute;
bottom: 100%;
right: -1px;
}このコードを@media (max-width: 767px){～～～}の中に入れれば表示されます。
外に入れるとPC表示時でも適用されます。（先にいれた.page-archive .archive-entry .categories～｝のコードは消してください）
最後に
上述しましたが【UnderShirt】記事一覧のカスタマイズの記事も参考にカテゴリや日付の位置を自分のデザインにあうように調整してみてください。
２列表示にするとカテゴリの文字数が多いと、相対的に大きく見えてしまうので文字間letter-spacingや内余白paddingなども調整したほうがいいかもしれませんね。
最後までお読み頂きありがとうございました。
