エアテーマ

トピックリストに「表示回数」列を追加する方法

私は開発者でもプログラマーでもありません。Google Chrome の要素の検査機能を使って CSS コードを数時間いじってみました。表示回数の列を正しく表示させることができ、各列のサイズも好みに合わせて調整しました。以下の CSS コードで幅を自由に調整してください。コードにはコメントも追加したので、どのコードがどの列に対応しているか簡単にわかります。各列には 2 つのエリア(ヘッダーと行)があります。これらの幅は一致させる必要があります。

これが皆さんのお役に立てば幸いです:@daming @bksubhuti @eddy2

手順

1. 新しいコンポーネントを作成する。

2. この CSS をコピーする

上記 @jordan.vidrine が提供したコードの代わりに、以下の更新された CSS を使用してください。

オプション A) デスクトップのみに表示回数の列を追加する(推奨)

  • CSS コードを デスクトップ タブに追加します。

オプション B) デスクトップとモバイルの両方に表示回数の列を追加する。

  • CSS コードを 共通 タブに追加します。

オプション C) モバイルのみに表示回数の列を追加する。

  • CSS コードを モバイル タブに追加します。

注意:オプション B または C を選択した場合…

モバイルでは、3 つの列(返信、表示回数、アクティビティ)がスペースを取りすぎて窮屈になります。モバイルでこれが必要な場合は、以下の CSS コードの非表示にしたい列のヘッダーと行の両方に display: none を追加することで、3 つの列のうち 1 つを削除することをお勧めします。

/* [トピック] */

    /* トピックヘッダー */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.main-link {
        width: 66%;
    }
    
    /* トピック行 */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.default {
        width: 66%;
    }

/* [返信] */

    /* 返信ヘッダー */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.posts {
        width: 7%;
        order: 2;
    }
    
    /* 返信行 */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
        width: 7%;
        order: 2;
    }

/* [表示回数] */

    /* 表示回数ヘッダー */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.views {
        display: block;
        width: 7%;
        order: 3;
    }
    
    /* 表示回数行 */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.views {
        width: 7%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* [アクティビティ] */

    /* アクティビティヘッダー */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.activity {
        display: block;
        width: 7%;
        order: 4;
    }
    
    /* アクティビティ行 */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age {
        width: 7%;
        order: 4;
    }

@jordan.vidrine 私が書いた CSS に修正があれば教えてください。私は自分のやっていることを完全に理解しているわけではありませんが、機能します(笑)。

「いいね!」 6