アメブロのサイドバーを左右同じ幅にするカスタマイズ

アメブロのサイドバーを左右同じ幅にするやり方です。

アメブロは、3カラムの場合、サイドバー2つある内、1つがワイド、1つが狭い幅と異なるものでした。
今回の方法は、ブログ幅を元々の980pxのまま、記事エリアも元のままで、左右のサイドバー幅を統一するやり方です。

ブログ幅980pxで記事幅を広げ、サイドバーを狭い幅で統一する方法はこちら
ブログ幅を860pxにして、サイドバーを狭い幅で統一する方法はこちら

アメブロの元々の幅  一方がワイドで、一方が狭いサイドバー


これを、記事エリア、ブログ幅をそのままで、サイドバー幅を統一します
↓↓

CSSに以下を追加します。

/*------- 3 カラム・右ワイドメニュー --------*/

.columnC .layoutContentsA{
float:right;
width:725px;
}

.columnC .skinMainArea{
float:left;
width:470px;
}
.columnC .skinSubA{
float:right;
width:240px;
}

.columnC .layoutContentsB{
float:left;
width:240px;
}

/*------- 3 カラム・左ワイドメニュー --------*/

.columnD .layoutContentsA{
float:left;
width:725px;
}
.columnD .skinMainArea{
float:right;
width:470px;
}
.columnD .skinSubA{
float:left;
width:240px;
}

.columnD .layoutContentsB{
float:right;
}
.columnD .skinSubB{
width:240px;
}
/*------- 3 カラム・右メニュー --------*/

.columnE .layoutContentsA{
overflow:visible;
}
.columnE .skinMainArea{
float:left;
width:470px;
}
.columnE .skinSubA{
float:right;
width:240px;
}

.columnE .skinSubB{
float:left;
margin-left:15px;
width:240px;
}


3カラムの全パターンに対応しています

サイドバーのリストに下線を入れて見やすくする



内藤です

旧デザインの『ベーシック』では、サイドバーの各リストが詰まっていて見にくいです


これを各リスト下に点線を入れ、見やすくしてみます。


【デザインの変更】 ⇒ 【CSSの編集】で

/*サイドバー各項目リスト下線*/
#recent_entries .menu_frame ul li,
#theme_list .menu_frame ul li,
#archives .menu_frame ul li,
#reader .menu_frame ul li,
#favorite .menu_frame ul li,
#bookmark .menu_frame ul li{
border-bottom:1px dashed #CCCCCC;/*下線*/
margin-bottom:5px; /*下マージン*/
}

を最後に追加します。 *ベーシックの場合です

これで見やすくなりますね

「読者になると、このブログの更新情報が届きます」の文字を変える

内藤です

アメブロのサイトバーにある「このブログの読者」

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

この言葉を変えるやり方です。

管理画面の 右上にある三本線から  [アメーバのサービス一覧]⇒ [プラグインの追加] からフリープラグインを編集します。



フリープラグインに

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
$("div.readerRequestArea").append('<div class="readerinfo">更新情報が届くよ~</div>');
}
);
</script>

を追加します。

*最初の1行で、Googleのサーバーからjqueryを読み込ませています。

*<div class=”readerinfo”> のclass名は、後で文字色を変えたり装飾したい場合のために任意で付けておきます。



これで、保存しフリープラグインをサイドバーに配置します。

[サイドバー] ⇒ [配置設定]



この状態では、元々の『読者になると、このブログの更新情報が届きます。』も表示されていますので、


『読者になると、このブログの更新情報が届きます。』を非表示にします。

[アメーバのサービス一覧] ⇒ [デザインの変更] ⇒ 『CSSの編集』 で (CSS編集用デザインを選択している必要があります)

CSSの最後に

.readerRequestDescription{
display:none;
}

を追加すればOKです。



こんな感じで、好きな文字だけにできました。

あとは、CSSで

.readerinfo{
color:#3399FF;
}

と追加すると文字色を変えることもできます

サイドバーの読者数を目立たせてみる

内藤です。

サイドバーにある 「このブログの読者」 に表示される読者数を目立たせるカスタマイズです。

読者さんが少ないうちは逆にやらない方が良いかもしれませんが^^;
ある程度増えてきたら目立たせると、さらに増えやすくなります。

通常 ↓ このように文字は小さ目です

これを、↓ このように大きく目立つようにします。

管理画面で [クイックリンク] ⇒ [ブログデザイン] デザインの変更 から 『CSSの編集』で次のコードを最後に追加します (【CSS編集用デザイン】を選択している必要があります)


/* 読者数を目立たせる */
.readerHeader em{
font-size:24px;
color:#000000;
}

※旧デザインの【ベーシック】の場合は

通常 ↓ このような状態が



↓ このようにできます



【ベーシック】の場合は『CSSの編集』 で最後に次を追加します


/* 読者数を目立たせる(旧デザイン) */
#readerList p.contents{
font-size:24px;
}

#readerList p.list{
display:block;
}

良かったら、やってみてくださいね

その他の、カスタマイズの目次はこちら


コピー貼り付けで簡単カスタマイズ
無料のヘッダーオプションサービスも追加しました^^

テーマに小見出しをつけて見やすくする

内藤です

僕が今やっているように、サイドバーのテーマに小見出しを付けて見やすくする方法です。
※CSS編集用デザインになります



『集客に活用!』 とか 『サービスについて』 などの文字は本来ないものです。

こういった小見出しを付ける事で見やすくなります。

1.まずは、[テーマ編集]から、テーマの順番を整えます



『順番』に数字を入れて並び替えができます。
並び変えができたら保存します。

2.上に小見出しを付けたいテーマのテーマNoを確認します。

例えば僕の例ならば、 「ブログを活かす仕組み」 の上に 「集客に活用!」という小見出しを付けたかったので、「ブログに活かす仕組み」のテーマNoを確認します。

「ブログに活かす仕組み」というテーマのURLが http://ameblo.jp/ameblochange/theme-10026732877.html となっています。

この場合、テーマNoはthemeNumber10026732877となります。

3.フリープラグインで小見出しを挿入

フリープラグインに以下を追加します

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("li.themeNumber10026732877").before('<li class="categorytitle">集客に活用!</li>');
}
);
</script>

$(function(){ の後が

$("li.テーマNo").before('<li class="categorytitle">小見出し文字</li>');

という形です

※↓こちらは既にフリープラグインにある場合は不要です

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>

複数小見出しを付けたい場合は

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("li.themeNumber10026732877").before('<li class="categorytitle">小見出しの文字</li>');
$("li.themeNumber10026732876").before('<li class="categorytitle">小見出しの文字</li>');
}
);
</script>

のような感じにします。

テーマNoの部分と、小見出しの文字は環境に合わせて変更します。

さらに、CSSに

.themeMenu li{
margin-left:4px;
}
.themeMenu li.categorytitle{
border-bottom:2px solid #000000;/*下線*/
margin-left:0px;
padding-top:10px;
}

を追加し装飾します。

これでテーマが見やすくなります

やってみてくださいね

サイドバーの見出し背景を画像にしてみる



内藤です

サイドバーの見出し背景を画像にしてみるやり方です。
(『CSS編集用デザイン』の場合)
※サイドバーの見出しとは「このブログの読者」や「テーマ」などの部分です。

1.背景画像となる画像を用意します

画像編集ソフトやボタンメーカーで作っておくとよいでしょう。

グラデーションなんかも簡単にできます
(『create』ボタンとダウンロードをお忘れなく)

ワイド側のサイドバーは横幅300px、もう一方のサイドバーは180pxになります。

例えばボタンメーカーでこんな画像を作っておきます。

ワイド側用  300px×30px


もう一方のサイドバー用 180px×30px

2.アメブロにアップロード

画像をアメブロの画像フォルダにアップロードします。
記事を書く要領から、『画像ボタン』で行うのが楽です。
(オリジナルサイズで表示するようにしましょう)

HMTL表示、もしくはタグ編集エディタで画像のURLが分かります

<img src=" から  " の間にあるアドレスが、画像URLになります。

3.CSS編集

画像URLが分かったら、次のCSSコードを [クイックリンク] ⇒ [デザインの変更] からCSSの編集で、最後に追加します

.skinSubA .skinMenuHeader{
background:url(&lt;font color=&quot;#FF0000&quot;&gt;ワイド側画像URL&lt;/font&gt;) no-repeat;
padding:5px 10px;/*余白*/
height:30px;/*高さ*/
}

.skinSubB .skinMenuHeader{
background:url(&lt;font color=&quot;#FF0000&quot;&gt;もう一方側の画像URL&lt;/font&gt;) no-repeat ;
padding:5px 10px;/*余白*/
height:30px;/*高さ*/
}

ワイド側画像URL、もう一方の画像URLの部分にそれぞれの画像URLを代入します

これでこのようにサイドバーの見出し背景を変えることができます

やってみてくださいね。

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

フリースペースの中にも、枠を入れる


内藤です。

サイドバーに設置できる「フリースペース」
画像やリンクをはれますので、告知にも使える超大事なパーツです。



このフリースペースの中でも、枠を付けて表示させたい場合があると思います。

例えばこちらの方のような感じで

枠がないよりも、区切られている方が見やすくなりますよね。

記事の中で枠を使う場合のやり方は、こちらで説明していましたが、フリースペースでも同様に使う事ができます。

■フリースペース内で枠で囲みたい部分を

<div style="border:2px dotted #CCCCCC; padding:10px;"> と </div>

で囲みます。

こんな感じです ↓


すると、サイドバーのフリースペースで枠に囲まれて表示されます。

また、枠の中に色を付けたい場合は

<div style="border:2px dotted #CCCCCC; padding:10px; background-color:#F2F2F2;">

のようにbackground-color:#F2F2F2;を付け加えることで可能になります。



カラーコードはこちらを参照してください

※ 最後の </div>  が抜けてしまうと、ブログの表示が崩れてしまいます。忘れないようにご注意くださいね。

その他のカスタマイズはこちら

フリースペースを、他の項目のように表示させる

内藤です。

便利に使う事のできる、「フリースペース」
サイドバーにあるパーツで、文字や画像を自由に配置できます。

告知板として使う事もできますので、非常に重要なパーツです。

このフリースペースをこんな風に使いたくないでしょうか?

“お知らせ” というサイドバーのパーツはありませんが、フリースペース内でこんな風に他のサイドバー項目と同じような感じで表示させることができます。

本来フリースペースはこんな感じになってしまいます。

やり方は、フリースペースで以下のように書きます

&lt;div class=&quot;skinMenu&quot;&gt;&lt;div class=&quot;skinMenuHeader&quot;&gt;&lt;span class=&quot;skinMenuTitle&quot;&gt;お知らせ&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;skinMenuBody&quot;&gt;セミナーの開催

日時:○月○日
料金:10000円

&lt;a href=&quot;http://ameblo.jp/***&quot;&gt;お申込みはこちらから&lt;/a&gt;
&lt;/div&gt;&lt;/div&gt;

※「CSS編集用デザイン」になります。

“お知らせ” が入っている部分が、見出し部分になります。

そして、
<div class="skinMenuBody"> と </div> の間の部分が中の部分になります。

コピーして使ってみてくださいね。

構造的にはこんな感じです。

※フリースペースの上に隙間ができるので

スキンCSSの編集で以下を最後に付け足してみてくださいね

.freespaceArea{
margin-top:0;
}

カスタマイズの手順やその他のカスタマイズはこちらを参考にしてみてください

アメブロ (旧) サイドバー見出し背景色を変える

内藤です

旧カスタム可能デザインの【ベーシック】で、サイドバーの見出し背景色を変えるやり方です。



スキンCSSの編集で、次を一番下に追加します

/*サイドバー見出し背景*/
h4.menu_title{
background-color:#FF0000; /*背景色*/
}

カラーコードはこちらを参考にしてください

アメブロ (旧) サイドバーのリスト等の行間を見やすく広げる

内藤です。

旧デザインの【ベーシック】のサイドバーは、初期状態では行間が詰まっていて見にくいです。

それを広げて見やすくしてみます



スキンCSSの編集で、次のCSSを一番最後に追加します

/*  サイドバーのリストの行間  */
.menu_frame ul li{
margin-bottom:5px; /*下マージン*/
}

それぞれのリストの下にマージンを持たせることで見やすくします。
マージンの数字は環境にあわせて変えてください