アメーバヘッダー(アメーババー)をカスタマイズする方法 - アメブロカスタマイズと読者を増やすブログ運営 初心者からプロまで

アメーバヘッダー(アメーババー)をカスタマイズする方法

アメーバヘッダー(アメーババー)をカスタマイズする方法

アメーバヘッダー(アメーババー)

アメブロのページ最上部のアメーバヘッダーをカスタマイズする方法をいくつかまとめてご紹介します。

アメーバヘッダーを半透明化する

アメーバヘッダー(アメーババー)を半透明化

通常時は不透明度30%の半透明で、マウスカーソルがアメーバヘッダーの上に乗った時のみ不透明度100%の表示になるようにする方法です。

ユーザーCSSに以下を追加すればOKです。

/* アメーバヘッダーを半透明化 */
#ambHeader{opacity: 0.3;} /* 通常時 不透明度30% */
#ambHeader:hover{opacity: 1.0;} /* オンマウス時 不透明度100% */

アメーバヘッダーを固定せずスクロールするようにする

通常はウィンドウの上側に固定表示されるアメーバヘッダーをページのスクロールに合わせて上下に移動するようにする方法です。

ユーザーCSSに以下を追加すればOKです。

/* アメーバヘッダーを半透明化 */
html.fixed body {padding-top: 0 !important;} /* アメーバヘッダーがあった部分の余白を0に */
html.fixed #ambHeader{position: static;} /* アメーバヘッダーの固定表示をやめる */

アメーバヘッダーをウィンドウ下側に移動する(固定表示)

アメーバヘッダー(アメーババー)を下側へ移動

通常はウィンドウの上側に固定表示されるアメーバヘッダーをウィンドウの下側に固定表示するように変更する方法です。

ユーザーCSSに以下を追加すればOKです。

/* アメーバヘッダーを下側に固定 */
html.fixed body {
  padding-top: 0 !important; /* アメーバヘッダーがあった部分の余白を0に */
  padding-bottom: 30px !important; /* 下側にアメーバヘッダー用の余白を確保 */
}
html.fixed #ambHeader{
  top: auto; /* 上からの距離を自動に */
  bottom: 0; /* 下からの距離を0に */
  border-bottom: none; /* アメーバヘッダー下側の枠線を消す */
  border-top: 1px solid #E0E0E0; /* アメーバヘッダー上側に枠線を付ける */
}
.footerNav {
  bottom:35px; /* フッターナビの位置を上げる */
}

アメーバヘッダーを『アメーバフッターの上』にくっつける

アメーバヘッダーをアメーバフッターの上に移動

通常はウィンドウの上側に固定表示されるアメーバヘッダーをページ最下部にあるアメーバフッターの上側に移動する方法です。アメーバフッターと同様ページのスクロールに合わせて上下に移動します。

ユーザーCSSに以下を追加すればOKです。

/* アメーバヘッダーをアメーバフッターの上に移動 */
html.fixed body {
  padding-top: 0 !important; /* アメーバヘッダーがあった部分の余白を0に */
}
.skinBody {
  position: relative; /* 座標を.skinBody基準に */
}
html.fixed #ambHeader{
  position: absolute; /* 絶対位置配置 */
  top: auto; /* 上からの距離を自動に */
  bottom: 0; /* 下からの距離を0に */
  border-bottom: none; /* アメーバヘッダー下側の枠線を消す */
  border-top: 1px solid #E0E0E0; /* アメーバヘッダー上側に枠線を付ける */
}
.footerNav {
  bottom:95px; /* フッターナビの位置を上げる */
}

アメーバヘッダーを『アメーバフッターの下』にくっつける

アメーバヘッダーをアメーバフッターの上に移動

通常はウィンドウの上側に固定表示されるアメーバヘッダーをページ最下部にあるアメーバフッターの下側に移動する方法です。アメーバフッターと同様ページのスクロールに合わせて上下に移動します。

ユーザーCSSに以下を追加すればOKです。

/* アメーバヘッダーをアメーバフッターの下に移動 */
html.fixed body {
  padding-top: 0 !important; /* アメーバヘッダーがあった部分の余白を0に */
  padding-bottom: 30px !important; /* 下側にアメーバヘッダー用の余白を確保 */
}
.skinBody {
  position: relative;
}
html.fixed #ambHeader{
  position: absolute;
  top: auto; /* 上からの距離を自動に */
  bottom: -85px; /* 下からの距離を0に */
  border-bottom: none; /* アメーバヘッダー下側の枠線を消す */
  border-top: 1px solid #E0E0E0; /* アメーバヘッダー上側に枠線を付ける */
}
.footerNav {
  bottom:90px; /* フッターナビの位置を上げる */
}

アメーバヘッダー内の不要な項目を非表示にする

アメーバヘッダー内の項目(左)

アメーバヘッダー内の項目(右)

アメーバヘッダー内の項目(リンク等)を必要に応じて非表示にする方法です。

ユーザーCSSに以下から必要に応じて非表示にしたい項目の設定を追加すればOKです。

/* アメーバヘッダー内の不要な項目を非表示にする */
#ambHeader #ambHeaderLeft .-ameblo-cmnhf-logo{ display:none; } /* Amebaロゴ */
#ambHeader #ambHeaderLeft .-ameblo-cmnhf-mypage{ display:none; } /* 「マイページ」 */
#ambHeader #ambHeaderLeft .-ameblo-cmnhf-pigg{ display:none; } /* 「ピグ」 */
#ambHeader #ambHeaderLeft .-ameblo-cmnhf-blog{ display:none; } /* 「アメブロ」 */
#ambHeader #ambHeaderLeft #ambInfo{ display:none; } /* 告知枠 */
#ambHeader #ambHeaderRight #barPickup{ display:none; } /* ピックアップ */
#ambHeader #ambHeaderRight .official-ranking{ display:none; } /* 「芸能人ブログ」 */
#ambHeader #ambHeaderRight #barForm{ display:none; } /* 検索フォーム */
#ambHeader #ambHeaderRight .-ameblo-cmnhf-register{ display:none; } /* 新規登録ボタン */

最新の更新 RSS