スマホ表示で記事一覧スタイルを変えるカスタマイズ【Luxeritas】

2018/05/06

スマホ専用の記事一覧カスタマイズ

スマートフォンなどの小さな画面で表示するときのみ、記事一覧のグリッドレイアウトをタイル型からカード型へスタイルを変化させるカスタマイズを紹介します。

※2018/05/13 更新（検索結果の表示崩れ対応しました）
ほぼすべてのソースコードに変更を加えましたので、恐れ入りますが以前に導入された方は書き換えをよろしくお願いします。

現在最新バージョンのLuxeritas 2.5.5.2では、グリッドレイアウトはタイル型とカード型の2パターンから選べますが、画面サイズによって使い分けすることが出来ない仕様になっています。

Luxeritasを始め、STORK や SANGO など他のワードプレステーマでも言えることだと思うのですが、スマホ表示だけスタイルを変えるってなかなか標準の機能で付いていないんですよね（あったらすみません）。

個人的には、PCで見た時はタイル型がアイキャッチ画像も大きくて好みなのですが、スマホではタイル型だと大きすぎて過去の記事を探しずらい上にスクロールも大変なので、スマホ表示の時のみカード型にスタイルが変えられたらいいなーとずっと思っていました。

そんな機能のバージョンアップは今後も無さそうなので、コメント欄でご要望もいただいていたことですし、重い腰を上げて作ってみました。そして、今回もPHPなどのややこしいものは触らずに、子テーマのCSSに追記するだけのお手軽設定です。

スマホ表示カスタマイズのビフォーアフター

まずはカスタマイズをする前の【ビフォー】と、完成後の【アフター】から見てみましょう。画面サイズはiPhone6/7/8（4.7インチ）の無印を想定しています。

【ビフォー】

スマホ表示カスタマイズ前

【アフター】

スマホ表示カスタマイズ後

ビフォーではアイキャッチ画像が大きく一画面に1.5記事分ほどしか入りませんでしたが、アフターではカード型にスタイルを変化させることで高さがコンパクトになり、4.5記事分程が入るようになりました。

つまり、ビフォーから比べてアフターは約3倍の情報量を表示できるようになったということです。

これで下に行くのにスクロールする量を大幅に減らせますし、読みたい記事を素早く探し出しやすくなりました。

ちなみに、PC表示ではどちらも同じ見た目になります。

ルクセリタスのPC表示（タイル型）

今回のカスタマイズについては、以前紹介した Luxeritasの記事一覧をSANGO風にカスタマイズ の記事一覧デザインをベースにスタートしていますので、こちらの記事で紹介したソースコードも合わせて追記する必要があります。

スマホ表示部分のみのカスタマイズでは成り立たない部分が多いためです。

その時のソースコードはこの下の記事中にも貼り付けてありますので、必要な方はそちらをコピペしてください。

カスタマイザー設定

Luxeritasの管理画面から行うカスタマイザーの設定も Luxeritasの記事一覧をSANGO風にカスタマイズ 内で紹介している通りなので、ここでは簡単に変更が必要な項目だけ挙げておきます。

メタ情報の表示位置

  • 更新日時表示にチェック
  • カテゴリー名表示にチェック

タグ表示は任意なので必要があればチェック入れてもOKです。

注意『一覧タイプのページ　記事タイトル下のメタ情報』の投稿日時表示のチェックだけは外してください。

コンテンツ領域とサイドバー

  • 角の丸み：2

グリッドレイアウト

  • リスト型トップページ：タイル型
  • カテゴリー：タイル型
  • アーカイブ：タイル型
  • タイルの並び順：サムネイル/メタ情報/タイトル
  • 記事一覧の抜粋の文字数と色濃度：0 タイル型
  • ”記事を読む”（タイル型）：空白

Luxeritas設定

  • CSS：Font Awesome オリジナルの CSSにチェック

Luxeritasの子テーマに追記するCSS

子テーマCSSが置いてある場所や追記ヵ所はこちらの記事で解説しています。

記事一覧のベースデザインCSS

まずはPCで見た時の記事一覧デザインを調整していきます。Luxeritasの記事一覧をSANGO風にカスタマイズ に紹介したソースコードをすでに導入されている方は飛ばしてOKです。が

今回スマホ表示に対応するために若干コードを調整し直しているため（一部余白を無くしただけですが）、こちらに書き直した方がよりスマホ画面に最適化されます。

※2018/05/13 更新（検索結果の表示崩れ対応しました）

/*記事一覧タイトル*/
#list div[id^="tile-"] h2 {
    color: #555;
    font-weight: bolder;
    padding-top: 3px;
    padding-right: 13px;
    padding-bottom: 25px;
    padding-left: 13px;
    margin: 0px;
    font-size: 18px;
}
@media only screen and (max-width:575px){
#list div[id^="tile-"] h2 {
    font-size: 17px;
}}
#list  div[id^="tile-"] .entry-title a {
    display: block;
}
/*記事一覧の日付*/
#list div[id^="tile-"] .meta, .post .meta {
    border-top: 0px;
    padding-top: 13px;
    padding-right: 13px;
    padding-bottom: 0px;
    padding-left: 13px;
    color: #b5b5b5;
    font-weight: bolder;
}
/*記事一覧のカテゴリー*/
#list div[id^="tile-"] span.tags a {
    color: #b5b5b5;
    font-weight: bold;
    text-decoration: none;
}
#list span div[id^="tile-"] .tags a:hover {
    color: #dc143c;
}
#list div[id^="tile-"] span.category {
    text-align: center;
    position: absolute;
    top: 13px;
    left: 13px;
    height: 22px;
    border-radius: 14px;
    background: #1bb4d3;
    font-size: 11px;
    padding: 0 10px;
    line-height: 22px;
    vertical-align: middle;
    transition: .3s;
    color: #fff;
}
#list div[id^="tile-"] span.category a{
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}
#list div[id^="tile-"] .fa-folder:before {
    content: none;
}
#list div[id^="tile-"] span.category:hover {
    background-color:silver;
}
/*記事一覧アイキャッチサイズ*/
#list div[id^="tile-"] .term img {
    margin-bottom: 0px;
    border-radius: 2px 2px 0px 0px;
    padding: 0px;
}
#list div[id^="tile-"] .term img {
    max-width: 575px;
    width: 100%;
}
/*記事一覧ボックス形状*/
div[id^="tile-"] 
.toc:not(#bottom-area):not(.posts-list-middle-widget):not(#bottom-area):not(.posts-list-under-widget) {
    padding: 0px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .13);
    border: none;
    transition: .3s;
}
#list div[id^="tile-"] .toc:not(#bottom-area):not(.posts-list-middle-widget):not(#bottom-area):not(.posts-list-under-widget):hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    transform: translateY(-5px);
}
/*記事一覧の日付余白*/
#list div[id^=tile-] .meta {
    margin-bottom: 5px;
}
/*カレンダーアイコン*/
#list div[id^="tile-"] .fa-calendar:before {
    content: "\f017";
    font-size: 115%;
}

プロパティが『color』となっているところは色の指定です。文字の色や背景の色などをご自身のサイトカラーに合わせて変更してください。

スマホ表示のCSS

ここからが今回新たに紹介するモバイル表示用のカスタマイズコードです。

画面サイズが575px以下になると、本カスタマイズのスタイルに切り替わる設定です。

※2018/05/13 更新（検索結果の表示崩れ対応しました）

/* 一覧スマホ用 */
@media screen and (max-width:575px){
#list div[id^=tile-] section {
    display: table;
}}
@media screen and (max-width:575px){
#list div[id^=tile-] figure.term {
    display: table-cell;
    vertical-align: top;
}}
@media screen and (max-width: 575px){
#list div[id^=tile-] h2, div[id^=card-] h2 {
    font-size: 15px;
    display: table-cell;
    vertical-align: middle;
    padding-left: 2%;
}}
@media screen and (max-width: 575px){
#list div[id^=tile-] span.category {
    top: 15px;
    left: 10px;
    height: 16px;
    border-radius: 0px;
    font-size: 10px;
    padding: 0 5px;
    line-height: 16px;
}}
@media screen and (max-width: 575px){
#list div[id^=tile-] .term img {
    width: 170px;
    height: 130px;
    object-fit: cover;
    margin: 0;
    padding: 15px 0 15px 10px
}}
@media screen and (max-width: 575px){
#list div[id^=tile-] .meta {
    margin: 0;
    padding: 0;
    font-size: 14px;
}}
@media screen and (max-width: 575px){
#list div[id^=tile-] .toc {
    margin: 0 0 15px;
}}
@media screen and (max-width: 575px){
#list div[id^=tile-] span.date {
    position: absolute;
    bottom: 3px;
    right: 8px;
}}
@media screen and (max-width: 575px){
#list div[id^=tile-] .meta i:first-child {
    position: absolute;
    bottom: 6px;
    right: 86px;
}}
@media screen and (max-width: 575px){
#list div[id^=tile-] i.fa.fa-tags, #list span.tags, #list i.fa.fa-folder {
    display: none;
}} 

サイト内検索結果の表示調整

5/13の追記分はここからです。

コメント欄からのご指摘により、サイト内結果の表示が崩れているのを確認しました。

検索結果もボックスカスタマイズは可能なのですが、この検索結果表示だけはもともとの素の表示がマーカーなどが入って見やすいので、若干の余白調整だけでほぼオリジナルを踏襲しています。

/* 検索結果 */
@media screen and (max-width: 575px){
#list .term img {
    margin-bottom: 5px;
}}
@media screen and (max-width: 575px){
.toc.grid.clearfix {
    padding: 15px 7px 0 7px;
}}
@media screen and (max-width: 575px){
.toc.grid.clearfix:first-child {
    padding: 15px 7px;
}}
@media screen and (max-width: 575px){
.meta, .post .meta {
    margin-bottom: 15px;
}}
@media screen and (max-width: 575px){
#section .grid #list-title {
    margin: 0;
    font-size: 20px;
}}
【ビフォー】※表示崩れは直しています
検索結果カスタマイズ前

【アフター】
検索結果カスタマイズ後

これで完了です。

スマホ表示が上手くいっているかの確認は、PCからでもブラウザの端をドラッグしてサイズを小さくすると確認できますので試してみてください。

こんなかんじ。

レスポンシブ表示の方法

まとめ

カスタマイズ後のスマホ表示画像です。

スマホ表示カスタマイズ後

さて、なかなかコンパクトに、美しく仕上がったのではないかと思いますがいかがでしょうか。

またこのソースコードを元にして自分なりの調整を加えるのもいいかもしれませんね。

一応こだわりを書いておきます。

アイキャッチ画像

アイキャッチ画像を正方形にすると画像の両サイドが見切れてしまいますので、PC表示と同様に横長としました。アイキャッチ画像で記事の情報をまとめて表現している人も多いかと考え、あまり小さくなりすぎないようにしました。

カテゴリー表示

PC表示に比べて一回り小さくして丸みをとり、画像の左上角に合わせました。スマホ表示ではアイキャッチ画像がぐっと小さくなるので、相対的にカテゴリー表示が大きく見え元の位置だとかなり邪魔に感じたためです。

メタ情報（日付、タグ）

日付位置を右下に固定し、タグ表示をスマホ表示の時のみ消しました。タグを消した理由は、単純にこのコンパクトな枠内に収まらなかったためです。

フォントサイズ

フォントサイズは全体的に少し小さくしました。まだタイトルの上下に余白があるのでiPhone6/7/8（4.7インチ）サイズだともう少しフォントを大きくすることもできますが、そうするとiPhone5（4インチ）などはもう一回り画面が小さくなるので形が崩れてしまいます。一応4インチ（横幅320px）までを想定してフォントサイズを決めました。

今やPCよりもモバイルでのアクセスが圧倒的に多い時代です。

比較的PCからのアクセスが多いはずのカスタマイズネタがメインの当サイトですらそんな状態ですから、モバイル表示にも重点を置いてレイアウトを考えていかないと、これからはダメですね。

ということで、今後もスマホに優しいカスタマイズを目指していきますので、何かリクエスト等ありましたらコメント欄にお寄せいただければ幸いです。

2018/05/06