アメブロのブログ説明文を改行

アメブロでヘッダー画像の中に表示されるブログタイトルの下にある説明文は

通常
「ブログを書く」→「アメブロの設定」→「アメブロの基本設定」→「ブログの表示設定」→「説明」
にて記入します。


しかしこの編集欄にて改行した場合、表示される時に反映されません。
その為説明文が長くなった時などは、ヘッダー画像中のかぶって欲しくない画像に文字が乗っかってしまい、見栄えが悪くなることがあります。


そこでCSSに少し追記して説明文の改行が出来るようにしてみました。
ネット上を検索して試したところなんとなく出来たので、以下覚え書きです。


■CSSに追記した内容

/* ■説明文を改行■ */
#header h2{
white-space:pre;
}

■追記する場所
ようするにヘッダー内の説明文を制御している箇所を探せばいい訳ですからエディタあたりにCSSをコピペして「#header h2」という記述を検索。


見つかった要素の下に上記の内容をコピペ。
多分、使っているスキンによって「#header h2」辺りの記述は違っていると思います。

うちのブログではこんな感じに

#header h2{
color:#FFFFFF;
width: 500px;
font-size:0.90em;
text-align:left;
margin-top:-20px;
margin-left:20px;
padding-left:20px;
}

/* ■説明文を改行■ */
#header h2{
white-space:pre;
}

これで「保存」を押せば完了。
あとは説明文を編集する「ブログの表示設定」に戻り、文章中で改行すればそれが反映されます。おそらく３行ぐらいはいけるはず。


もっと自由にするのであれば、説明文やタイトルをCSSにより画面外に吹っ飛ばし、直接文字をヘッダー画像に埋め込む方法もあります。
（芸能人ブログとかそんな感じですね）

しかし、今のブログタイトルも説明文もヘッダー画像も自分の方向性と共に変更していきたいので、そのたびに画像に文字を埋め込んでいたり付け替えたりしていたらかなり面倒です。

ということで、当面はこのお手軽な状態のままお茶を濁していきたいと思います。

・アメブロカスタマイズ目次