TCD RUMBLEの魅力7選｜見出しCSSも公開します

Neo隊長
2026.09.21
最終更新日: 2026.10.11
36 views

結論から言うと

RUMBLEの魅力は、見せ方を自分で決められる自由度にあります。

トップページだけでなく、記事ページ、サイドバー、SEO設定まで、テーマの中で完結するのがポイント。しかもカスタムCSSで見出しのデザインまで変えられるので、Neo隊長のブログでは、そのCSSもこの記事で公開します。

魅力7選の一覧

トップページコンテンツビルダー
ヘッダースライダー
閲覧数ランキング
レイアウト変更
サイドバーA/Bの活用
カスタムCSSで見出しを装飾
SEO設定がテーマに内蔵

トップページを自由に組める

コンテンツビルダーは、TCDのテーマにあらかじめ用意されているものです。プラグインを足したり、自分で組んだりする必要はありません。

トップページのブロックを好きな順番に並べられるうえ、カテゴリー別にランダム表示もできるので、訪れるたびに違ったトップページを見せられます。埋もれがちな過去記事に、もう一度スポットライトが当たるのが嬉しいところです。

ヘッダースライダー

公式では、トップのヘッダースライダーが「文句なしのファーストビュー」と紹介されています。

このブログでは、TCDテーマオプション → トップページの「ヘッダーコンテンツのタイプ」で記事スライダーを選び、4分割にしています。CAMERAカテゴリーの記事を、ランダムな並びで4つ表示するので、開くたびに違う記事が目に入ります。

設定は選ぶだけです。

閲覧数ランキング

閲覧数ベースのランキングを、自動で表示できます。人気記事を手作業で並べ替える必要がありません。

置き方は簡単です。外観 → ウィジェット → サイドバーB（ページ共通）に、「ランキング一覧（tcd バージョン）」を追加して、記事ランキングを表示させています。

サイドバーBはページ共通なので、トップページだけでなく、どのページを開いてもランキングが見えます。

レイアウトを選べる

PC向けに6タイプ、モバイル向けに2タイプが用意されています。

PC用もスマホ用も、TCDテーマオプションとウィジェットで、簡単に調整・変更できます。コードを触らなくても、画面を見ながらポチポチ選ぶだけです。

サイドバーで記事を魅せる

サイドバーはAとBの2種類あり、特集記事や注目記事を配置できます。

やり方は、外観 → ウィジェットで、「デザインされた記事一覧（tcd バージョン）」を置き、「注目記事」「特集記事」「おすすめ記事」といったタイトルを付けるだけ。表示する記事は、投稿の編集画面（またはクイック編集）で、「おすすめ記事1」「おすすめ記事2」「ピックアップ記事」にチェックを入れることで選びます。

しかもサイドバーは、ページの種類ごとに中身を変えられます。このブログでは、基本ウィジェット（サイドバーA）、記事詳細ページ（サイドバーA）、サイドバーB（ページ共通）、トップページ（スマホ用）を使い分けています。たとえば記事ページのサイドバーには、目次も出しています。

つまり、トップページ以外のページでも、読者に見てほしい記事を出せるということ。検索から記事に直接来た人を、次の記事に案内できるのは大きいです。

カスタムCSSで見出しを装飾

テーマオプションの「カスタムCSS（<head>タグ内に挿入されます）」に書くと、H2やH3のデザインを自由に変えられます。記事の見栄えが一気に上がるので、Neo隊長も重宝しています。

CSSと聞くと難しそうですが、コピペで使えます。このブログの見出しは、こう設定しています。

H2は「上下二重線」、H3は「下線のみ」です。

/* --- H2：上下二重線 --- */
:is(.single, .page) .p-entry__body h2 {
    position: relative;
    margin: 3em 0 1em;
    padding: 0.5em 0.4em;
    background: none;
    border: none;
    line-height: 1.4;
}

:is(.single, .page) .p-entry__body h2::before,
:is(.single, .page) .p-entry__body h2::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 5px;
    content: '';
    box-sizing: border-box;
}

:is(.single, .page) .p-entry__body h2::before {
    top: 0;
    border-top: 2px solid #333333;
    border-bottom: 1px solid #000000;
}

:is(.single, .page) .p-entry__body h2::after {
    bottom: 0;
    border-top: 1px solid #000000;
    border-bottom: 2px solid #333333;
}

/* --- H3：下線のみ --- */
:is(.single, .page) .p-entry__body h3 {
    margin: 1.5em 0 1em;
    padding: 1.5em 0 0.5em 0.4em;
    background: none;
    border-bottom: 2px solid #333333;
    line-height: 1.4;
}

色を変えたい時は、#333333 の部分を好きな色に変えるだけです。線の太さは 2px や 1px を変えれば調整できます。

なお、.p-entry__body はRUMBLEが本文に付けているクラス名です。他のテーマでは、そのままでは効かないので気をつけてください。