【THE SONIC】スマホの記事一覧をシンプル・スタイリッシュな横長にするCSSカスタマイズ

2021-02-14 1分

バビ

ごきげんよう。バビです。

デフォルトの「モバイルのカードデザイン」を横長にするのでもいいんですが、もっとこう、シュッとしたデザインにしたかったのでカスタマイズしました。

完成サンプル

完成サンプルはこんな感じです。

ちょっとやりたかったのが、文字数オーバーを「…」にすること。

タイトル短くしろって話なんですけどね。

実際のページはこちら↓から確認できます。（スマホで見てね）

参考

記事一覧ページ

バビ論

モバイルのカードデザインを横長にする

まずはTHE SONICデフォルトのモバイルのカードデザインを横長に設定しましょう。

ダッシュボード→外観→カスタマイズ→記事設定→デザイン一括設定　を開きます。

「モバイルのカードデザイン」の「横長にする」にチェックを入れて公開してください。

CSS

あとは以下のCSSをコピペして貼り付けるだけです。

/*--------------------------------------
  スマホ記事一覧デザイン変更
--------------------------------------*/
@media (max-width: 767px){
.main-kiji-longcard a.linkarea {
margin: 0;
padding:8px 0px;
border-bottom: 1px solid #aaa;
}
.main-kiji-longcard .kiji-img, .main-kiji-longcard .kiji-img img {
width: 135px;
}
.kiji-img-img {
margin: 0px 5px;
}
.main-kiji-longcard .kiji-text {
font-size: 13px;
vertical-align: top;
line-height: 1.5em;
height: 6em;
overflow: hidden;
max-height: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
}

外観→テーマの編集→（子テーマの）「style.css」に貼り付けます。

バビ

以上です。