「ブログトップ」「記事一覧」「画像一覧」ボタンを非表示にする

内藤です

少し前から、記事エリアの上下にこのようなボタンがつくようになりました



これが「いらない!」という方も多いようなので(笑)
外し方です。

「ブログトップ」がいらない場合

CSSに以下を追加します

.blogTopBtn{
    display:none!important;
}

「記事一覧」がいらない場合

CSSに以下を追加します

.articleListBtn{
    display:none!important;
}

「画像一覧」がいらない場合

CSSに以下を追加します

.imageListBtn{
display:none!important;
}

(追記)3つのCSSで !importantを追加しています

これで3つのボタンを消すことが出来ます。
また、3つ全て非表示にした場合、スペースが空いてしまいますので、

.globalLinkArea {
padding: 0px 0;
}

も追加しておいてください

ブログ幅980で左右サイドバー幅を統一する

内藤です。

2011年8月からのアメブロデザインでは、ブログ幅が980pxになりました。

サイドバーの片方がワイドになっています。
以前、サイドバーの幅を左右同じにして(ワイドを狭くして)、ブログの幅を860pxにする方法を紹介しました

⇒ 左右サイドバー幅を統一しブログ幅を狭くする

今回は、ブログ幅980pxの状態で、左右のサイドバー幅を合わせ、記事エリアを広げるやり方の紹介です。

[アメーバのサービス一覧(クイックリンク)] ⇒ [デザイン変更] ⇒ CSSの編集
*【CSS編集用デザイン】を選んでいる必要があります

以下をCSSの最後に追加します

/*------- 3カラム・右ワイドメニュー --------*/
.columnC .layoutContentsA{
float:right;
width:785px;
}
.columnC .skinMainArea{
float:left;
width:590px;
}
.columnC .skinSubA{
float:right;
width:180px;
}
.columnC .layoutContentsB{
float:left;
width:180px;
}
/*------- 3カラム・左ワイドメニュー --------*/
.columnD .layoutContentsA{
float:left;
width:785px;
}
.columnD .skinMainArea{
float:right;
width:590px;
}
.columnD .skinSubA{
float:left;
width:180px;
}
.columnD .layoutContentsB{
float:right;
}
.columnD .skinSubB{
width:180px;
}
/*------- 3カラム・右メニュー --------*/
.columnE .layoutContentsA{
overflow:visible;
}
.columnE .skinMainArea{
float:left;
width:590px;
}
.columnE .skinSubA{
float:right;
width:180px;
}
.columnE .skinSubB{
float:left;
margin-left:15px;
width:180px;
}
.skinSubA .blogSearchInput{
padding:8px 10px 8px 10px;
width:158px;
}
/* ページ送り調整 */
.pagingArea{
padding:0px 0;/*余白*/
width:580px;/*幅*/
}
.pagingPrev{
right:330px;
}
.pagingNext{
left:330px;
}

アメブロのフッターにナビ(メニューバー)を付ける

アメブロにフッターナビを付けるを付けるやり方を紹介します。
(CSS編集用デザイン)

フリープラグインとCSSを使います

■フリープラグインに

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

<script type="text/javascript">
$(function(){
var footermenu = '<div id="footermenu"><ul><li><a href="#pageTop"> ▲ ページ上部</a></li><li>|</li><li><a href="リンクURL">メニュー1</a></li><li>|</li><li><a href="リンクURL" >メニュー2</a></li><li>|</li><li><a href="リンクURL">メニュー3</a></li></ul><br><div class="copy">Copyright &copy; <a href="ブログURL">コピーライト名</a> All Rights Reserved.</div></div>';
$('.skinContentsFrame').append(footermenu);
}
);
</script>

を追加します。

・JQueryの記述が既に入っている場合は必要ありません

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

・リンクURL、メニュー1などを書き換えます (右からの順番になります)
・ブログURL、コピーライト名を書き換えます。(フッターのコピーライト部分になります)

■CSSに次のコードを追加します


/*メニューリスト*/
#footermenu{
margin:0 auto;
background:#FFFFFF;
}
#footermenu ul{
width: 980px;/*ブログ幅*/
margin: 0 auto;
}

#footermenu ul li {
list-style:none;
float:right;
margin-left:10px;
padding:20px 0;
}
#footermenu ul li a{
color:#333333;/*文字色*/
}
.copy {
clear:both;
background: #014177;/*コピーライト部分の背景色*/
color: #FFFFFF;
margin: 0 auto;
text-align: center;
padding: 20px 0;
}
.copy a{
color: #FFFFFF;/*コピー文字色*/
}

コピーライトの部分を画面全体ではなく、ブログ幅と同じにしたい場合は

.copy{ の後に  width:980px;/*ブログ幅*/  を追加するようにします。

カラーコードなどは変更して使ってみてください

カラーコードはこちら

左右サイドバー幅を統一しブログ幅を狭く(860px)する

内藤です。

2011年8月からの新デザイン。
サイドバーの1つがワイドになって、全体の幅も980pxになっています。

これを左右のサイドバーを同じ大きさにして、全体の幅を860pxにする方法です

※ワイドメニューの広告が切れてしまいますので、必ずアメゴールドで、広告を非表示にしてから行ってください。広告を非表示にしないまま行うとID削除の可能性もあります

以下をCSSに追加します。

/*------ 全体幅 ------*/
.skinHeaderArea{
width:860px;
margin:0 auto;
overflow:hidden;
}
.skinContentsArea{
width:860px;
margin:0 auto;
padding-bottom:30px;
overflow:hidden;
zoom:1;
}
/*------- 2カラム・メニュー左 --------*/
.columnA .skinMainArea{
float:right;width:665px;
}
.columnA .skinSubA{
float:left;
width:180px;
}
.columnA .layoutContentsB{
display:none;
}
/*------- 2カラム・メニュー右 --------*/
.columnB .skinMainArea{
float:left;width:665px;
}
.columnB .skinSubA{
float:right;
width:180px;
}
.columnB .layoutContentsB{
display:none;
}
/*------- 3カラム・右ワイドメニュー --------*/
.columnC .layoutContentsA{
float:right;
width:665px;
}
.columnC .skinMainArea{
float:left;
width:470px;
}
.columnC .skinSubA{
float:right;
width:180px;
}
.columnC .layoutContentsB{
float:left;
width:180px;
}
/*------- 3カラム・左ワイドメニュー --------*/
.columnD .layoutContentsA{
float:left;
width:665px;
}
.columnD .skinMainArea{
float:right;
width:470px;
}
.columnD .skinSubA{
float:left;
width:180px;
}
.columnD .layoutContentsB{
float:right;
}
.columnD .skinSubB{
width:180px;
}
/*------- 3カラム・右メニュー --------*/
.columnE .layoutContentsA{
overflow:visible;
}
.columnE .skinMainArea{
float:left;
width:470px;
}
.columnE .skinSubA{
float:right;
width:180px;
}
.columnE .skinSubB{
float:left;
margin-left:15px;
width:180px;
}
.skinSubA .blogSearchInput{
padding:8px 10px 8px 10px;
width:158px;
}
body{
min-width:1000px;
}

※ワイドメニューの広告が切れてしまいますので、必ずアメゴールドで、広告を非表示にしてから行ってください。広告を非表示にしないまま行うとID削除の可能性もあります

ヘッダーも合わせて860pxにする必要がありますのでご注意くださいね。

『NEW!』と『更新!』 を変える

新しい記事を投稿した際に記事下の日付の横に表示される 『NEW!』


サイドバーのお気に入りブログで更新があったブログ横の 『更新!』


この色を変えたい場合のやり方です。

[スキンCSSの編集] で最後に追加してみてください

/*記事日付の『New』*/
.contentNew{
color:#FF0000;/*文字色*/
}
/*お気に入りブログの『更新』*/
.update{
color:#FF0000;/*文字色*/
}

カラーコードはこちら

その他のアメブロカスタマイズはこちら

横スクロールバーを消す

アメブロで、2011年8月から登場した新しいデザインは、ブログ幅が980pxになりました。

画面の小さい(解像度の低い)パソコンでは、横スクロールバーが出てしまうものもあります。

出張用などモバイルノートを使われている方もいらっしゃると思います。
横幅が1024pxのパソコン画面の方は、↓ のように横スクロールバーが出てしまいます。


この横スクロールバーは、嫌がられます。面倒なので。

でもこの横スクロールバーがでてしまうのは、ブログ幅が980pxになったからというわけではありません。

実は、新しいデザインではページ全体の幅が1100px以下の場合、横スクロールバーがでてしまう設定になっています。

なぜ1100pxかというと、はっきりとはわかりませんが、ブログ幅980pxと右下にあるフッターナビがいっぱいいっぱいに並んだ幅が1100pxなんだと思います。


(フッターナビ)

幅が1024pxのパソコンだと無条件に横スクロールバーが出てしまいますね。

アクセス解析を見ると 幅が1024pxの解像度のパソコンをお使いの方はまだまだいます。
1024pxの場合でも横スクロールバーが出ないようにするには、次のコードをCSSに追加します
※CSSを編集できるのは【CSS編集用デザイン】のみとなっています。

body{
min-width:1000px;
}

これで1024pxの幅のパソコンでも横スクロールバーが出なくなりました。
(ウィンドウを最大化している場合)

ついでにもう1つ。
画面が小さい場合、フッターナビがブログと重なります。


これが嫌だという場合

@media screen and (max-width: 1100px) {
.footerNav{
display:none!important;
}}

を追加すると、幅1100px以下の場合のみ非表示にすることができます。

参考にしてみてくださいね。

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

アメブロの背景に色や画像を入れる

アメブロの背景に色を入れる

新カスタム可能デザインの「CSS編集用デザイン」で背景に色をいれるやり方です
(旧カスタム可能デザインのベーシックではありません)

CSS編集デザインのCSSの編集で

.skinBody{
background-color:#CCCCCC; /*背景色*/
}

を追加します

#CCCCCC; の部分のカラーコードを変えて色を変えます。

カラーコードはこちらから

ただ、このままですと



このようになります。

記事やサイドバーの部分は白くするためには

.skinHeaderArea,.skinContentsArea{
background-color:#ffffff; /*背景色*/
}

も追加してみてください

背景に画像を入れる場合

色ではなく、画像を入れる場合は

.skinBody{
background:url(画像URL) no-repeat;
}

をCSSに追加します

※ページ背景にしたい画像のURLを括弧内に入れます。

ユーザー環境によって、パソコンの画面の大きさは異なります。

background:url(画像URL) no-repeat;

このno-repeatを削除すると、それぞれの画面に応じて背景画像が画面の大きさ分繰り返して表示されます。

背景画像を繰り返して表示させない場合は、 no-repeat
背景画像を縦に繰り返したい場合は repeat-y
背景画像を横に繰り返したい場合は repeat-x

にします

アメブロ (旧)背景に色を付けたり、画像を入れたい

内藤です。

ブログの背景に色を付けたり、画像を入れたいという方は結構いると思います。

デザイン(スキン)でベーシックを選ばれている場合

CSSの前半に

/*5)ページ背景に画像を入れる*/
body{
background-image:url();
}

というところがあります。

この url()の括弧の中に、画像URLを入れればOKです。

背景画像を縦に繰り返したい場合は 最後の } の前に

background-repeat:repeat-y; を追加します

/*5)ページ背景に画像を入れる*/
body{
background-image:url();
background-repeat:repeat-y;
}

のような感じです。

背景画像を横方向に繰り返したい場合は
background-repeat:repeat-x; を

繰り返したくない場合には
background-repeat:no-repeat;

とします。

画像ではなく色を付けたい場合は

/*5)ページ背景に画像を入れる*/
body{
background-color:#F2F2F2;
}

のように変更します。

#F2F2F2というのが色を表すカラーコードになっています

カラーコードはこちらでお好みのものを選んでみてくださいね