アメブロ旧CSS：サイドバーのプロフィール欄をシンプルにするカスタマイズ方法

アメブロの旧CSS編集用デザインで、サイドバーのプロフィール欄から「プロフィール画像」「名前」「フォローボタン」以外の項目を消す（非表示にする）ことで、プロフィール欄をシンプルにするカスタマイズ方法をご紹介します。

新CSS編集用デザイン向けはこちら

アメブロの新CSS編集用デザインで、サイドバーのプロフィール欄から「プロフィール画像」「名前」「フォローボタン」以外の項目を消してシンプルなプロフィール欄にするカスタマイズ方法について解説します。

1 サイドバーのプロフィール欄をシンプルにする
2 まとめ
3 関連記事

サイドバーのプロフィール欄をシンプルにする

カスタマイズは、CSSの編集で行いますので、やり方がわからない場合は先に確認しておいて下さい。

CSSを編集する手順：カスタマイズで必須の基本操作です！

CSS編集用デザインをベースにアメブロをカスタマイズするためにCSSを編集するときの手順について解説します。アメブロのカスタマイズ時には必須で頻繁に行う作業ですのでマスターしておくことをお勧めします。

プロフィール欄を「プロフィール画像」「名前」「フォローボタン」以外は全て消して（非表示にして）とことんシンプルにするには、以下のコードをCSSの末尾に追加します。

/************************************************
  旧CSS：サイドバーのプロフィール欄をシンプルに
************************************************/
/* ユーザー名の下のメニュー(プロフィール|ピグの部屋)を消す */
.profileUserPages {
  display: none;
}
/* 詳細(性別・血液型・自己紹介など)を消す */ 
.profileDetailArea {
  display: none;
}
/* ランキングを消す */ 
.profileRanking {
  display: none;
}
/* よく使う公式ハッシュタグを消す */
.hashtag-profile {
  display: none;
}
/* ボタン類を消す */
.profileBtnArea li {
  display: none;
}
/* フォローボタンだけ表示 */
.profileBtnArea li:first-of-type {
  display: block;
}

なお、幅び広い側のサイドバー側にプロフィールを表示している場合、これだけでは(下の画像のように)フォローボタンの位置が良くありません。

ですので、合わせて以下のコードも追加し、フォローボタンの位置を改善することをお勧めします。

/* フォローボタンの位置を調整 */
.skinSubA .profileMenu {
  position: relative;
}
.skinSubA .profileBtnArea li:first-of-type {
  position: absolute;
  top: 113px;
  left: 135px;
  text-align: center;
}

まとめ

以上、アメブロの旧CSS編集用デザインで、サイドバーのプロフィール欄から「プロフィール画像」「名前」「フォローボタン」以外の項目を消す（非表示にする）カスタマイズ方法をご紹介しました。

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

サイドバーのプロフィール欄をシンプルにする方法

サイドバーのプロフィール欄をシンプルにする

まとめ

関連記事