アメブロのブログタイトルと説明文を消す方法とヘッダー画像にリンクする方法の説明

アメブロにオリジナルのヘッダー画像が表示できるようになると、今度はブログのタイトルと説明文が邪魔に感じることがあるかと思います。

また、タイトルと説明文を消すことが出来たとしてもタイトルがなくなったことにより、ブログのトップページに戻るリンクまで消えてしまい不都合に感じる事もあるかもしれません。

そこで、ここではその両方に対処する方法について説明しています。

アメブロにヘッダー画像を表示する方法については、『アメブロにオリジナルヘッダー画像を表示する方法』で別途説明していますので、このページはそれと合わせて設定が必要となるカスタマイズです。

それでは、アメブロのタイトルと説明を消してヘッダー画像にリンクする方法について説明させて頂きます。

とりあえず、下記のCSSをCSS編集の一番下に貼り付けることで、上記現象を解消することが出来ます。

CSSの編集のやり方については、『CSSテンプレートでアメブロをカスタマイズする方法』で説明しています。

上記CSSについて簡単に説明させて頂くと、『skinTitleArea』に『text-indent:-9999px;』のスタイルを指定することにより、通常見えている領域から見えない領域までタイトルを飛ばすという感じになります。

また、『skinTitle』に『height:300px;』のスタイルを指定することにより、こちらも通常見えている領域から見えない領域まで説明文を飛ばすという感じになっています。（こちらについては、ブログにヘッダー画像を表示した際に指定した、ヘッダー画像の高さと同じに指定する必要があります。）

このCSSを指定することにより当サイトのアメブロは、タイトルと説明文を見えなくして、ヘッダー画像の領域にトップページへのリンクを貼ることが実現できています。

興味のある方は、ぜひ実践してみて下さい。