フジブロっ!

HTML、CSSを独学で楽しく学ぶガテン系のブログ

はてなブログ【UnderShirt】スマホ2列表示時に6記事見せるカスタマイズ

どうも!フジグチです!

当ブログも更新の頻度は遅めですが、少しずつ記事が増えてまいりました。(まだまだこれで8記事目ですが)

トップページの記事数を10記事としているので、スマホで記事一覧を見るとそれなりにスクロールしないと下の記事に辿り着かないんですよね。

最新の記事だけでなく興味を持って頂いた色々な記事をみてもらいたいので、スマホ表示時でも記事一覧を2カラム(2列)表示にすることにしました。

色々言っても、本音はちょっと憧れててやってみたかっただけなんですが(笑)

そこで当ブログで行ったスマホの2列表示のカスタマイズをご紹介します。

UnderShirtスマホ表示時の記事一覧のカスタマイズ

スマホ表示時に2列にするCSS

2列表示にするやり方はありがたいことに、テーマ作者の【ろくぜうどん@rokuzeudon】さんが紹介してくれています。

blog.rokuzeudon.com

今回はこのコードを使わせていただいて、さらに当ブログにあったカスタマイズをしていきたいと思います。
最後に当ブログのカスタマイズCSSをまとめてあります。

2列に表示する

その2列に表示するコードを当ブログに入れるとこうなります。
※記事説明文はあらかじめCSSで消してあります。

スマホ2列表示時の参考図1

余白をなくす

ちょっと縦長ですが余白をなくすコードも作ってくれているので、そちらも入れさせてもらうとこうなります。

スマホ2列表示時の参考図2

日付、カテゴリのカスタマイズ

さらに以前当ブログで紹介した

www.fuji-blo.com

この記事の【日付の位置を変える】【カテゴリをタブ風に変える】カスタマイズを適用するとこうなります。

スマホ2列表示時の参考図3

なかなかいい感じになりました!

しかし、枠線を入れていることによって字の余白が均等ではないことが気になり、せっかくなら1ビューで6記事が見れるくらいにしたいので、削れそうな余白をさらに削っていきたいと思います。

スマホ2列表示時参考図4

「画面端に近くなりすぎる」とか「余白の美」ということは素人という名目を借りて無視して、自称ミニマリストとして削れそうなものは削っていきます!

コードをいじるのを失敗するとデザインが崩れ面倒なことになるので手順は割愛しますが、とりあえず完成した記事一覧がこちら▼

スマホ2列表示時の参考図4

文字サイズや文字間の調整、記事間の余白、画像サイズの調整を行いタイトルの長さ等はありますが、何とか6記事表示に成功し(端末にもよりますが)なかなか気に入ったトップページになりました。

やってみることでテーマ作者様たちの凄さが分かり勉強にもなりました。私もテーマを1から作れるようになってみたいですね。

1ビューで6記事見せるCSS

CSSを貼り付ける場所

【PC】
スパナマーク ⇒ デザインCSS ⇒ 枠内に貼り付け

【スマホ】
記事 ⇒ 記事上に<style>~</style>で囲んで入れる

/*コメントアウト*/しているところ意外はいじらないほうがいいです。

カテゴリタグの左右振り分けのCSSは記述していません。

/*------------------------------
UnderShirtスマホで記事を2列表示
--------------------------------*/
@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】記事一覧のカスタマイズの記事も参考にカテゴリや日付の位置を自分のデザインにあうように調整してみてください。
2列表示にするとカテゴリの文字数が多いと、相対的に大きく見えてしまうので文字間letter-spacingや内余白paddingなども調整したほうがいいかもしれませんね。

最後までお読み頂きありがとうございました。

トップへ戻る