アメブロのプロフィール欄をとことんシンプルにする方法

アメブロのプロフィール欄をとことんシンプルにする方法

アメブロカスタマイズのわざめーばです。

こんにちは。

アメブロのプロフィール欄を、今僕がやっている、プロフィール画像+ニックネーム+読者登録ボタンという、とことんシンプルな表示にする方法をご紹介します。

ピグなうは全く(もしくはめったに)やらないし、アメンバー限定記事もほとんど書かないという僕のようなタイプのアメブロがーさんにぴったりだと思います。

プロフィール欄が幅の広い(太い)方のサイドバーにある場合は次の画像のような表示に変わり、

アメブロのプロフィール欄をとことんシンプルにする方法1

プロフィール欄が幅の狭い(細い)方のサイドバーにある場合は次の画像のような表示に変わります。

アメブロのプロフィール欄をとことんシンプルにする方法2

もし、アメブロのプロフィール欄をこのようなシンプルな表示にしたい場合は、ユーザーCSSに以下の設定を追加します。

/* プロフィール欄をとことんシンプルにする */
.skinSubA .profileMenu {
  position: relative;
}
.nowQuote {
  display: none;
}
.profileUserPages {
  display: none;
}
.profileDetailArea {
  display: none;
}
.skinSubA .profileBtnArea li {
  position: absolute;
  display: block;
  top: 100px;
  left: 135px;
  text-align: center;
}
.skinSubArea .profileBtnArea li+li {
  display: none;
}

ちなみに、両サイドバー共通で使えるようになっていますので、もしプロフィール欄を移動させることがあっても大丈夫だと思います。

また、以下の画像のようにメッセージを送るボタンは残したいという場合、

アメブロのプロフィール欄をとことんシンプルにする方法3

ユーザーCSSに以下の設定を追加します。

/* プロフィール欄をとことんシンプルにする */
/* メッセージボタンは残す */
.skinSubA .profileMenu {
  position: relative;
}
.nowQuote {
  display: none;
}
.profileUserPages {
  display: none;
}
.profileDetailArea {
  display: none;
}
.skinSubA .profileBtnArea li {
  position: absolute;
  display: block;
  top: 83px;
  left: 135px;
  text-align: center;
}
.skinSubA .profileBtnArea li+li+li {
  top: 113px;
}
.skinSubArea .profileBtnArea li+li {
  display: none;
}
.skinSubArea .profileBtnArea li+li+li {
  display: block;
}
.skinSubArea .profileBtnArea li+li+li+li {
  display: none;
}

以上、アメブロのプロフィール欄をシンプルな表示にする方法をご紹介しました。

よかったら参考にしてください。

関連記事

CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ