サイドバーのテーマをツリー状にするには

アメブロのサイドバーにあるテーマ一覧(カテゴリ)をツリー状にしたい場合の方法です。

このような感じにしたい場合です。


アメブロでは、テーマの親子関係を作る事ができません。

ですので、テーマを作るときに先頭に文字として ┣ や ┗ などを付けて、ツリー状に見せます。
※┣ ┗ などは『けいせん』で文字変換すると出てきます。

管理画面のマイページ上にある [クイックリンク] ⇒ [テーマ編集] で編集します




綺麗にツリー状になるよう、並べ変えながらやってみてくださいね。

『読者になる』 ボタンを上に移動

アメブロの新しいカスタム可能デザイン 【CSS編集用デザイン】では、

サイドバーの読者欄にある 『読者になる』ボタン が読者欄の下になりました。
これは凄く残念な事です。

上側にあった方が気が付いてもらいやすいです。
このボタンの移動の仕方です



こちらをコピーして、フリープラグインに貼り付けてみてください

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".readerRequestArea").insertBefore(".readerHeader");
}
);
</script>

CSSにこちらを貼り付けると見やすくなります

.readerRequestArea {
margin-top:5px!important;
margin-bottom:10px;
}

その他のカスタマイズはこちらの目次からどうぞ

『読者になる』 ボタンを変える

【CSS編集用デザイン】で、『読者になる』ボタンを変えるやり方です。



『読者になる』ボタンは、サイドバーの

  • プロフィール
  • このブログの読者

にあります。

●プロフィール の読者になるボタン

ul.profileBtnArea .readerBtn{
background:url(画像URL) no-repeat;
text-indent:-9999px; 
}
.skinImgBtnS{
display:block;
height:28px; /*高さ*/
width:128px; /*幅*/
margin:3px auto;
}

画像URLを変更し、高さ、幅を調整してCSS編集で追加します。
(ボタン画像は作っておいて、アップロードしておきます。)

●このブログの読者 の読者になるボタン

.readerMenu .readerBtn{
background:url(画像URL) no-repeat;
display:block;
height:40px; /*高さ*/
width:250px; /*幅*/
text-indent:-9999px;
margin:3px auto;
}

画像URLを変更し、高さ、幅を調整してCSS編集で追加します。
(ボタン画像は作っておいて、アップロードしておきます。)

※『このブログの読者』 をワイドサイドバーに設置するのか、ワイドではないサイドバーに設置するかで幅が異なりますので注意してください

『更新情報が届きます』を目立たせる

アメブロのサイドバーにある 『このブログの読者』項目。

読者になるボタンの下には、「読者になると、このブログの更新情報が届きます」という文字があります。

アメブロに不慣れな方は、読者登録すると更新情報が届くという事を知らない場合もありますので、目立たせて読者登録を促します。

こんな風に。


【CSS編集用デザイン】の、「CSSの編集」で

CSSに以下を追加します。

.readerRequestDescription{
color:#FF0000;/*文字色*/
font-size:12px;/*文字サイズ*/
}

やってみてくださいね。

サイドバーの縁をなくし、中を広くする

2011年9月以降のアメブロの新しいデザインでは、幅が広くなったように見えて実は変わっていない、もしくは狭くなったものがあります。

当然カスタマイズで使う『CSS編集用デザイン』もそうです。

例えば、サイドバーの中身の幅。

縁が付いた分、中が狭くなってしまいました。

この縁をなくし、中の幅を広げるやり方です。

[スキンCSSの編集]で

/*サイドバー項目内部*/
.skinMenuBody {
margin: 0px;/*マージン0で縁をなくす*/
padding: 5px;/*余白*/
background: #FFFFFF;/*背景色*/
}
/*プロフィール画像*/
.userProfileImageArea{
margin:0 auto;/*センタリング*/
}
/*プロフィール画像下ボタン*/
.skinSubB .profileBtnArea .skinImgBtnS {
margin-left:16px;/*左マージン*/
}

を追加します。

サイドバーの幅が狭く、文字の折り返しが気になる方はやってみてください

その他、自分でできるカスタマイズはこちらから

フリースペースの文字を読みやすく目立たせる

アメブロのサイドバーに設置できる「フリースペース」は重要です。

自由に文字を書き込むことが出来るだけでなく、リンクを設定したり、画像を貼り付ける事もできます。

左上に配置し、案内板として、商品一覧やアクセスなど重要な記事へのリンクをはっておくと有効です。

フリースペースの文字も大きく、リンクが目立つようにしておきましょう。

新しいカスタム可能デザイン【CSS編集用デザイン】のCSSに

.freespaceArea{
font-size:15px;
line-height:1.5;
}
.freespaceArea a{
font-weight:bold;
color:#0000FF;
}

を入れると見やすく、よりクリックされやすくなります。

CSS編集用デザインが良くわからないという方はこちらも参考にしてください