bodyや記事内タグにclass付加でCSSやJavaScriptかんたん切替まとめ

テンプレートに設定済みのスタイル切替用classや、JavaScriptによる便利機能の切替まとめです。当サイト作者が作成した次のテンプレートについてです。

概要

  1. bodyclass を付けたり削除したりでスタイルを切り替えられます。次のページを先にご覧いただく方がいいです。

  2. 記事内の h2ol などにクラスを付けると、テンプレートに設定済みのJavaScriptによる機能を切り替えられます。

メリット

  1. 自分でCSSやJavaScriptをカスタムしなくても、ある程度のカスタムが可能です。

bodyclass 付加

ベースカラー

  1. 次のクラスの内どれか1つを加えると、ベースカラーを切り替えられます。カッコ内は対応するテンプレート名です。

    • gray (customtemplateシリーズ、eyecatcherシリーズ)
    • red pink orange khaki yellow green blue purple (valid-seoシリーズ)
  2. 上記クラスが全くなければ、デフォルトのカラーです。。

角丸、角欠け

  1. グローバルナビゲーションなどの角を調整できます。

    • maru - 角が丸くなります。
    • kake - 角が欠けた感じになります。

グローバルナビゲーション内ボタン横幅

  1. グローバルナビゲーション内の横幅を「等間隔」か「中身に自動調整」かを指定できます。

    • nav-auto - ナビ内の文字に合わせてナビ内の横幅が自動調整されます。
  2. nav-auto を入れなければ、デフォルトの等間隔になります。

記事の位置

  1. 記事の位置を左右で切り替えられます。3カラム版では中央も選択できます。

    • left - 記事位置を左にします。
    • right - 記事位置を右にします。2カラム版は上記leftを削除するだけで右になります。
  2. 上記2つを入れなければ、2カラム版では右、3カラム版では中央です。

ユーザビリティ関連

  1. ディテールを調整できます。

    • target-blank - 記事内の別タブで開くリンクに矢印を表示します。
    • entry-hover - 記事ページ以外で記事部分にカーソルを乗せると枠線を太くします。
    • img-outline - 記事内の画像に、画像だとわかりやすいようにアウトラインを表示します。
    • img-round - ページ内の画像ほぼ全てを角丸にします(IE8以下除く)。印象がやわらかくなります。

コメント

  1. コメント欄の装飾を切り替えられます。

  2. 上記2つを入れなければ、シンプルなコメントになります。

サイドバー横幅(2カラム版除く)

  1. 両方のサイドバー横幅を変更できます。次のクラスのいずれかを入れるとその数値px(概数)の横幅になります。

    • side200 side250 side300 - 他の部分との微調整の関係で、その数値どおりの横幅ではなく、実際は2~3px広くなります。
  2. 上記3つを入れなければデフォルトの横幅(273px)になります。

便利機能ボタン

  1. 便利機能ボタン(画面左下にある上下矢印など)の場所を指定できます。

    • y-left - 表示領域内の左端に常に表示されます。フレームアウトしません。
    • y-right - 表示領域内の右端に常に表示されます。フレームアウトしません。
  2. 上記2つを入れなければ、デフォルト位置です。ブラウザサイズが小さいとフレームアウトして見えません。

記事内セクションごとにナンバリング

  1. 長文作成時に便利なナンバリングを自動でできます。

HTML編集なしで非表示

  1. 不要な部分をとりあえず非表示にできます。

記事内で class 付加(valid-seoシリーズ除く)

以下は valid-seo-2c と valid-seo-3c 非対象です。外部JavaScriptファイルによる機能を割愛したテンプレートなので。

画像アウトライン非表示やtboxで再表示なし

  1. img もしくはその祖先要素に次のクラスを追加します。

    • no-outline - 画像にアウトラインを表示する設定(bodyimg-outline)をしていても、アウトラインが表示されません。
    • no-aimg - tboxの画像一覧で再表示されません。
  2. 参考:特定の画像だけ枠線を表示させず、画像一覧で再表示させない方法

パラグラフ装飾やピクトグラム表示

  1. コピペでOK!長文内の各パラグラフや文章を目立たせるタグ一覧で詳述しています。

本文や画像などの回り込み設定

  1. 記事内の本文や画像などの回り込み設定(CSSのfloatを手軽に使う)で詳述しています。

任意の記事で目次自動生成しない

  1. 任意の記事だけ、目次自動生成しない/コメントタイトル目次化しない方法で詳述しています。

簡易ツールチップ

  1. 記事内で簡易ツールチップを表示する方法(CSSのみでJavaScript不要)で詳述しています。

動く顔文字やパラパラ漫画

  1. 動く顔文字や画像スライドで、パラパラ漫画風アニメーションで詳述しています。

広告ローテーション

  1. 広告を一定時間ごとにローテーションさせ、広告に注意を引かせる設定で詳述しています。

その他参考ページ

JavaScript初期設定をカスタム

  1. JavaScriptによる便利機能をデフォルトからカスタムする方法で詳述しています。

コメント受付フォームを非表示

  1. 既存コメントを残したまま、新規コメント受付フォームを非表示にするで詳述しています。

このページに関して

  1. 予告なく変更する場合があります。

  2. このページに限りませんが、記載内容の正確性は保証いたしかねます。

  3. 今後のテンプレート改訂時には上記説明と相違があるかもしれません。ご了承願います。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)