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

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

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

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

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

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

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

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

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

スペース内は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個しかないようなので、
とりあえずプロフィール用途で。。。複数あるといいのになぁw