クラスの付け替えだけで、色や記事の位置をかんたんにカスタム

更新
2013年03月23日(土)

HTML編集で body にクラスを付与するとかんたんにカスタムできます。当サイト作者が作成した次のテンプレートについてです。

概要

  1. HTMLやCSSにあまり慣れていなくてもかんたんなカスタムができます。

  2. body タグのクラスを付け替えるだけです。

メリット

  1. テンプレート作者が事前に用意している複数の装飾の中から、好みに応じて選べます。

  2. クラスの付け替えだけなので、テンプレート利用者さんによる微調整が不要です。

  3. 最初の第一歩目として、自分でカスタムしたことを実感できます。

テンプレートのHTMLを編集

  1. 121201body-class-2.png

    ブログ管理画面のテンプレートの設定にあるHTML編集で、次のコードを探します。下図で反転している部分です。下図はvalid-seo-3c ver1.2.0のキャプチャーです。他のテンプレートやバージョンが異なれば相違があります。その点ご了承願います。

    body class
    121201body-class-1.png
  2. 上記コードの右にあるダブルコーテーションのペア内にクラスを追加したり、不要なクラスを削除します。たとえば、valid-seo-3c ver1.2.0なら、 pink を追加すると下図のとおりです。反転している部分が追加したクラスです。

    121201body-class-3.png
  3. クラスを追加した場合、クラスごとに半角スペースで区切ります。半角スペースで区切らないと意図したカスタムになりません。

    121201body-class-4.png
  4.  更新 ボタンをクリックして、カスタム後のテンプレートを保存します。

  5. 具体的なclassなどの詳細は、次の記事で確認できます。

このページに関して

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

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

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

以上です。

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