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

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

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

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

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

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

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

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

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

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

/************************************************
  新CSS：サイドバーのプロフィール欄をシンプルに
************************************************/
/* プロフィールの「プロフィール｜ピグの部屋」を消す */
.skin-profileNav {
  display: none;
}
/* プロフィールの詳細(性別、血液型、お住いの地域、自己紹介など)を消す */
.skin-profileStatus {
  display: none;
}
/* プロフィールの「続きを見る＞」を消す */
.skin-profileMore {
  display: none;
}
/* プロフィールの「全体ブログランキング」を消す */
#profile [data-uranus-component="profileGenre"] {
  display: none;
}
/* プロフィールの「よく使う公式ハッシュタグ」を消す */
#profile .hashtag-profile {
  display: none;
}

もし残したい項目があれば、コード中のコメント（注釈）を参考に設定を削除して下さい。

「詳細」の部分はまとめて消していますが、もし一部だけを消したい場合は、追加で次のようなコードも使ってみて下さい。

/* プロフィールの詳細の全体は消さない */
.skin-profileStatus {
  display: block;
}
/* プロフィールの詳細の一部の項目だけ消す */
.skin-profileStatus dt:nth-of-type(2),
.skin-profileStatus dd:nth-of-type(2) {
  display: none;
}

このコードは例として「2項目目を消す」設定で、2箇所書いてあるnth-of-type(2)が「2項目目」を対象とした設定であることを示しています。

例えば、さらに「3項目目も消したい」場合は、nth-of-type(3)の設定も追加すれば良いということになります。

なお、「全体ブログランキング」を消すために、アメブロ独自の「data-uranus-component」という属性を使っていますが、過去にこのような属性の名前が変更されたことがあり、同様のことが行われると、この設定は無効になってしまいますので、予めご承知おき下さい。

まとめ

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

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

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

まとめ

関連記事