記事タイトル下のテーマを右寄せにする



記事タイトルの下にあるテーマを、右寄せにしたい場合のカスタマイズです

CSSの編集でCSSに

/*記事タイトル下テーマ*/
.entry .theme{
text-align:right; /*テキスト寄せ*/
display:block; /*表示設定*/
}

を追加します。 *デザインが『ベーシック』の場合になります

また、テーマの下にある点線を無くしたい場合は

} の前に border-bottom: none; を追加します。

記事内のリンクを目立たせる


内藤です。
僕のアメブロは、記事中のリンク文字を目立つように工夫をしています。
リンクを青文字の太字にしている以外にです。

何かわかりますでしょうか。

それは、記事以外のリンクを青にしていないという事です。
通常サイドバーにあるリストもリンクです。

そこを目立たない色にする事で、記事内のリンクが余計に目立ちます。

そんな工夫もしています^^

やり方は、『CSS編集用デザイン』では、CSSの編集で

/*-- リンク --*/
a{
text-decoration:none;
color:#777777;
}

/*リンク:訪問済み*/
a:visited{
text-decoration:none;
color:#777777;
}

/*リンク:マウスオーバー時*/
a:hover{
text-decoration:none;
color:#777777;
}

を最後に追加し、全体的なリンクを目立たない色に変えます。

その上で、記事内のリンクのCSSを追加します

/*  記事、メッセージボードのリンク文字  */
.articleText a,.skinMessageBoard a{
font-size:14px; /*文字サイズ*/
font-weight:bold; /*文字の太さ*/
color:#0000FF; /*文字色*/
text-decoration:none; /*文字装飾*/
}

旧デザインの『ベーシック』では

/*-- リンク --*/
a{
text-decoration:none;
color:#777777;
}

/*リンク:訪問済み*/
a:visited{
text-decoration:none;
color:#777777;
}

/*リンク:マウスオーバー時*/
a:hover{
text-decoration:none;
color:#777777;
}

/*  記事、メッセージボードのリンク文字  */
div.subContents a{
font-size:15px; /*文字サイズ*/
font-weight:bold; /*文字の太さ*/
color:#0000ff; /*文字色*/
text-decoration:underline; /*文字装飾*/
}

で可能です。

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

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

内藤です

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

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

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

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



フリープラグインに

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

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

「カスタマイズしたのに反映されない!」と思ったら確認しておきたい3つのポイント

内藤です。

「カスタマイズしたのに反映されない!」

よくいただく質問です。

カスタマイズしたのに反映されていない場合には、考えられる原因がいくつかありますのでチェックしてみましょう。

1.キャッシュ(古いデータ)を読み込んでいる

ブラウザ(インターネット閲覧ソフト)が、古いデータを表示している可能性があります。
その為本来は反映されているのに、古いデータをみて、反映されていないと勘違いしてしまいます。
最も多いパターンです。

編集後は、必ず画面上にあるアドレスバーの横にある更新ボタンを押しましょう。

IE


GoogleChrome


FireFox


もしくは、キーボードのF5ボタンでも更新されます。

2.CSSが保存されていない

アメブロでは、CSSの編集をして保存しようとしたときにエラーがよくでます


こんな赤い注意書きがでたら焦らずに、もう一度保存ボタンを押しましょう。

3.CSSの書き間違い

CSSの書き間違いでよく見られるのが

・ } ← 閉じかっこ忘れ

例えば

/*リンク*/
a{
text-decoration:none; /*文字装飾*/
color:#0066CC; /*文字色*/
}
/*リンク:訪問済み*/
a:visited{
text-decoration:none; /*文字装飾*/
color:#0066CC; /*文字色*/
}

が正しいのですが、間の }が抜けてしまっているパターン

/*リンク*/
a{
text-decoration:none; /*文字装飾*/
color:#0066CC; /*文字色*/

/*リンク:訪問済み*/
a:visited{
text-decoration:none; /*文字装飾*/
color:#0066CC; /*文字色*/
}

2つめの リンク:訪問済み のCSSが読み込まれなくなります

・コメントアウトミス

/* リンク:訪問済み */

 のようなCSSの補足をするようなコメントアウト(説明書き)は

/* と */ で囲む必要があります.

これが

 リンク:訪問済み */

のように不完全だったりすると、CSSが正しく読み込まれません。

・classの . (ドット)抜け

などのように、class名がある場合CSSでは先頭に .(ドット)を付けます

.articleText{
font-size: 14px; /*文字サイズ*/
line-height:1.6; /*行間*/
}

これがドット抜けすると正しく反映されません。

articleText{
font-size: 14px; /*文字サイズ*/
line-height:1.6; /*行間*/
}

反映されないと思ったら、1つ1つ確認してみましょう。

ブログ幅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;/*ブログ幅*/  を追加するようにします。

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

カラーコードはこちら

CSSの編集はメモ帳で

内藤です

「アメブロでCSSを編集する際には、アメブロ上で直接行うのではなく、メモ帳などにコピーしてパソコン上で編集しましょう。」と僕は勧めています。

どうしてかと言うと、
「アメブロ上で編集作業をしていて、いざ保存しようとしたらエラーで保存できなかった」
という事が多々あるからです。

それに、メモ帳などにコピーしておくとバックアップにもなります。

以外に『メモ帳ってどこにありますか?』というご質問が多いので、場所の確認です。

windowsのスタートボタン ⇒ すべてのプログラム ⇒ アクセサリ ⇒ メモ帳

でたどりつけます。



はじめてCSSの編集作業をする場合には

1.アメブロのCSSをコピー

カスタム可能の『CSS編集用デザイン』を選び、『CSSの編集』からCSS編集ページへ

既存のCSSを全て選択し、コピー

2.メモ帳へ貼り付け



編集はこのメモ帳上で行います。
編集後は、メモ帳のものをコピーし、アメブロのCSS編集ページで上書きするようにします。

*IE(インターネットエクスプローラー)で、CSSをコピーし、メモ帳に貼り付けた場合、文字が全て一列になってしまう場合があります。

IE以外のブラウザ(GoogleChrmeやFireFox)で行うか、もしくは、メモ帳以外のテキストエディタを使ってみてください。

ちなみに僕は、Meryを使っています。

記事エリア上にある ページ送りを非表示にする

内藤です。

通常アメブロ(2011年8月以降のデザイン)では、記事エリアの上に『前ページ』『次ページ』のページ送りと、『記事一覧』が表示されます。

これは、記事エリア下にも表示されています。

このうち上側だけを非表示にしたい場合は、フリープラグインに次のコードを入れます。

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

<script type="text/javascript">
$(function(){
$("div.userLinkArea+ div.pagingArea").css("display","none");
}
);
</script>

jQueryの読み込みに関する

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

が既にある場合は不要です。

これで、記事エリア上部だけのページ送りが表示されなくなります。

『ブログ画像一覧を見る』 を非表示にする

内藤です。

先日からアメブロの記事エリアの上下にあるページ送りのところに

『ブログ画像一覧を見る』 

が追加されました。



これは僕的には不要なので表示させないようにしました。

やり方ですが、 旧デザインの『ベーシック』、新デザインの『CSS編集用デザイン』ともに

p.imagelistLink{
display:none;
}

をCSSに追加してみてください

これで、『ブログ画像一覧を見る』が表示されなくなります。

また、旧デザイン(ベーシック)で、『このブログの読者になる』を画像化していた場合
こんな状態になっているかも知れません。



おそらくこのようなCSSを追加されていると思います。

.readerMainLink p a{
display:block;
margin:auto;
padding:0;
text-indent:-9999px;
width:350px;/*ボタン幅*/
height:60px;/*ボタン高さ*/
background-image:url(画像URL);
background-repeat:no-repeat;
background-position:center top;
background-color:transparent;
}

これの  .readerMainLink p a  を  .readerMainLink .readerLink a に変えてみてください

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

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

内藤です。

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

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

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

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

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


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

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

通常 ↓ このような状態が



↓ このようにできます



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


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

#readerList p.list{
display:block;
}

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

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


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