ホームページテンプレート無料配布

デザインテンプレート、及び、ホームページテンプレート枠のヘッダー内、ロゴ部分とトップレベルキーワード部分の配置などを変更します。

デザインテンプレート、及び、ホームページテンプレート枠のヘッダー内、ロゴ部分とトップレベルキーワード部分は絶対配置です。上下左右に細かな設定が可能です。

デザインテンプレート

CSSファイルの以下の部分です。

style.css

/*
=========================================================================
                                           各要素のフォントサイズ指定 [2]
=========================================================================
body { font-size: 85%; } 部分が全体のフォントサイス（ベース）となります。
各要素はbody { font-size: 85%; } を基準とした場合のサイズです。
-----------------------------------------------------------------------*/

body { font-size: 85%; }

/*--------------------------------
 ヘッダー部分
----------------------------------*/

/* ロゴ */
.logo { font-size: 160%; } --- 文字の大きさ

/* トップレベルキーワード */
h1 { font-size: 100%; } --- 文字の大きさ

/*
=========================================================================
                                       ヘッダーブロック内の各要素指定 [4]
=========================================================================
[4-1]トップレベルキーワードの指定
[4-2]ロゴ部分の指定
[4-3]ロゴ部分のリンク色指定
[4-4]ロゴ部分のマウスオーバー時の指定
[4-5]概要部分の指定
[4-6]グローバルナビゲーションの指定
[4-7]会社概要などのリンク部分の指定
------------------------------------------------------------------------*/

/*
[4-1]トップレベルキーワードの指定
------------------------------------------------------------------------*/
h1 {
  font-weight: normal;
  margin: 0;
  padding: 0;
  color: #666; --- 文字の色
  position: absolute;
  top: 20px; --- 上下の配置
  left: 0; --- 左右の配置
}

/*
[4-2]ロゴ部分の指定
------------------------------------------------------------------------*/
.logo {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 35px; --- 上下の配置
  left: 0; --- 左右の配置
}

/*
[4-3]ロゴ部分のリンク色指定
------------------------------------------------------------------------*/
#header .logo a {
  text-decoration: none;
  color: #000000; --- リンクカラー
  background-color: transparent;
}

/*
[4-4]ロゴ部分のマウスオーバー時の指定
------------------------------------------------------------------------*/
#header .logo a:hover {
  text-decoration: none;
  color: #9f0; --- リンクカラー
  background-color: transparent;
}

ホームページテンプレート枠

CSSファイルの以下の部分です。

wm-base-layout.css

/*
=========================================================================
                                       ヘッダーブロック内の各要素指定 [4]
=========================================================================
[4-1]トップレベルキーワードの指定
[4-2]ロゴ部分のフォントサイズと配置
[4-3]ロゴ部分のリンク色
[4-4]ロゴ部分のロールオーバー時指定
[4-5]概要部分の指定
----------------------------------
[4-6]グローバルナビゲーションの指定
------------------------------------------------------------------------*/

/*
[4-1]トップレベルキーワードの指定
------------------------------------------------------------------------*/
h1 {
  font-size: 100%; --- 文字の大きさ
  font-weight: normal;
  position: absolute;
  top: 5px; --- 上下の配置
  right: 20px; --- 左右の配置
}

/*
[4-2]ロゴ部分のフォントサイズと配置
------------------------------------------------------------------------*/
.logo {
  font-size: 160%; --- 文字の大きさ
  position: absolute;
  top: 25px; --- 上下の配置
  left: 20px; --- 左右の配置
}

/*
[4-3]ロゴ部分のリンク色
------------------------------------------------------------------------*/
#header .logo a {
  text-decoration: none;
  color: #000; --- リンクカラー
  background-color: transparent;
}

/*
[4-4]ロゴ部分のロールオーバー時指定
------------------------------------------------------------------------*/
#header .logo a:hover {
  text-decoration: none;
  color: #f00; --- リンクカラー
  background-color: transparent;
}

関連する投稿

• ヘッダーの高さ (0)
• ヘッダー画像部分 (0)

• カテゴリ » カスタマイズ方法
• 前の記事 « ヘッダーの高さ
• 後の記事 » 全体の幅を広げる

キーワードで検索

カスタマイズheader カスタマイズwrapper デザイン1カラム デザイン2カラム デザイン3カラム リキッドレイアウト 1カラム 1カラムレイアウト枠 2カラムレイアウト枠 2カラムleft 2カラムright 3カラム 3カラムレイアウト枠 max-width