リスト

  1. ヘッダー縮小 ver1
  2. ヘッダー縮小 ver1 boostrapフレーム版
  3. ヘッダー縮小 ver2
  4. ヘッダー縮小 ver2 boostrapフレーム版
  5. メディア記事エリア用(boostrap想定)
  6. TOP広告ジャックタイプ
    ※メインコンテンツ2カラムにしないと内部のコンテンツボリュームバランスが難しくなる。
  7. ニュースカテゴリ左サイド型(boostrap想定)
  8. ニュースカテゴリ左サイド型(boostrap想定)もっと見る クリックした先のページ

コンポーネント(boostrap仕様)

注:部分的に切り出したHTMLソースなのでブラウザで確認はできません。

グローバル

  1. 従来の検索型(ヘッダー縮小 ver1)
  2. 検索部分がドロップダウン型のヘッダー(ヘッダー縮小 ver2)2022.5.9構成変更版
  3. フッター

かんたんナビリスト

  1. ナビリストのジャンル&リンクブロック

コンテンツ内

  1. TOPの総合ブロック
  2. TOPの人気の記事ブロック
  3. TOPの各カテゴリ記事部分の1×3×3ブロック
  4. TOPの総合ブロック(広告ジャック組み込みタイプ)
  5. TOPの各カテゴリ記事部分の1×3×3ブロック(広告ジャック組み込みタイプ)
  6. メディア記事エリアの下に配置されている広告群

左にメニューがあるタイプ

  1. 左カラムコンテンツリンクブロック
  2. 3サムネ+ニュースリスト
  3. あなたにおすすめ / トピックス一覧の枠部分

コンテンツ内(広告ジャック用コンポーネント)

  1. TOPの総合ブロック(広告ジャック組み込みタイプ)
  2. TOPの人気の記事ブロック(広告ジャック組み込みタイプ)
  3. TOPの各カテゴリ記事部分の1×3×3ブロック(広告ジャック組み込みタイプ)

メディア記事固有

  1. 関連キーワードのブロック

サイドバー

  1. メディア記事エリア用のランキング
  2. TOPのランキングタブ切り替え型
  3. TOPのランキングブロックのみ

メモ

  • ブレイクポイントの切り替え 「xl」 で設定中PCレイアウト表示のみ

文字省略

テキスト長い場合…で省略する場合、
何かしらのブロック系要素のタグに「line-clamp--n」を追加する。

          class="line-clamp--1" >> 一行文字…
          class="line-clamp--2" >> 2行文字分で省略…
          class="line-clamp--3" >> 3行文字分で省略…