［アメーバブログ］サイドバーのプロフィール欄をシンプルに

アメーバブログ、
デフォルトのプロフィールはこんな感じ。。

いろいろ付いてて…
カスタマイズしたい苦笑）

ですが、
それぞれを非表示にできるコードがmyメモに残されており。

今となっては不明ですが、
こんな感じのコーディングをメモしてます。

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;
}

けれどちょっと発想を変え、
プロフィールを作ってしまうのはどうだろう?と思い至り。

そんなこんなな方策です。

アメブロのサイドバーは、
フリースペースを作って上げることができ。

スペース内はHTMLも使えるとのこと。

これをプロフィールがわりに…
アイコンを貼ったり、文言を入れて作り、、

サイドバーに貼っ付ければOKでは？という案です。

アメブロのフリースペースへは、
左メニューにある設定・管理より、

フリースペース設定をクリックして入ります。

例えばこんなふうに作ってみた。

HTML

<img src="https://〇〇〇.png" alt="プロフィールアイコン" width="60" height="60" />
<div style="font-size: 12px; padding-bottom: -50px;">
作成者：*****
お試しお試し
お試しお試しお試しお試し
お試しお試しお試し</div>

<img src="https://〇〇〇.png"

“ ”の中は、
プロフィールアイコンのURLを入れるイメージです。

アイコンサイズも決められるので、
好きな大きさで表示できる。

<div style=" ">～～～</div>

div要素にはスタイルシートを。
文字サイズや、そしてもちろんプロフィール文など入れてみてください。

入力したあとは、
作ったフリースペースを好きな箇所へマウスドラッグで移動し、表示させればOK。

こんな感じで
自由に表示できるかと思います^^

このフリースペースを代わりに表示し、

デフォルトの“プロフィール”は
使用しない機能のほうへ移すのをお忘れなく。

フリースペースは1個しかないようなので、とりあえずプロフィール用途で。。。
複数あるといいのになぁ~笑