タイトルと説明を消す（非表示）設定

アメーバブログのデザイン「【カスタム可能】ベーシック」に、自動車販売をイメージしたカスタマイズを行ってみたいと思います。

上の画像は、カスタマイズ完了後の画像です。

ステップ１「【カスタム可能】ベーシックの適用」

1. アメーバブログへログイン
2. ブログを書く
3. デザインの変更
4. カスタム可能
5. カスタム可能ベーシック
6. 3カラム・左右メニュー「適用する」
7. 「デザインをカスタマイズする」へ進む

画像付きの解説はカスタム可能デザインを適用に掲載しています。続いてヘッダーイメージを掲載します。

ステップ２「ヘッダー画像（イメージ）の追加」

1. デザインのカスタマイズ
2. ヘッダの「画像の追加」を選択
3. 画像の追加でファイルを選択してアップロード
4. 「この画像を使う」
5. 画面下へスクロールして「保存」を選択

今回は 横 800 px 縦 300 px のヘッダー画像を作成してアップロードしました。

この時点では、上の画像のようにヘッダーイメージの上に「タイトル」と「説明」が重なってしまいます。

タイトルと説明を表示していても不自然でない場合は良いですが、今回はあまり綺麗ではありませんのでタイトルと説明を非表示にしたいと思います。

ステップ３「タイトルと説明を消す（非表示）」

タイトルと説明を消す方法には、ヘッダー画像のリンク（ブログトップページへ戻るリンク）が「ないパターン」と「あるパターン」の二通りがあります。

パターン１「ヘッダー画像のリンクなし」

こちらはヘッダー画像のリンク（ブログトップページへのリンク）が無いパターンです。

デザイン変更タブの「CSSの編集」を開きます。

CSS の上部「かんたんCSS編集はこちら」の ２ と ３ に「display:none;」を追加します。

/*２）ブログタイトルの文字色を変更する*/
#header h1 a{
color:#333333; /*-- 濃いグレー --*/
display:none;
}
/*３）ブログ説明の文字サイズを変更する*/
#header h2{
font-size: 1.0em; /*-- 12px相当の文字サイズ --*/
display:none;
}

「表示を確認する」か「保存」してブログを確認すると、タイトルと説明が消された（非表示になった）ことが確認できます。

この時、ヘッダー画像を選択してもブログトップページには戻りません。ユーザーの利便性を考えると、リンクがあった方が良いかと思います。

パターン２「ヘッダー画像のリンクあり」

こちらはヘッダー画像をクリックすると、ブログのトップページへ戻る設定です。

パターン２も CSS の上部「かんたんCSS編集はこちら」の ２ と ３ に変更を加えます。

３ はパターン１と同じく「display:none;」の追加です。２ のコードがパターン１とは以下のように異なります。

/*２）ブログタイトルの文字色を変更する*/
#header h1 a{
display:block;
text-indent:-9999px;
width: 800px;
height: 300px;
}
/*３）ブログ説明の文字サイズを変更する*/
#header h2{
font-size: 1.0em; /*-- 12px相当の文字サイズ --*/
display:none;
}

width: 800px;
height: 300px;
の数値は、アップロードしたヘッダー画像のサイズを入力してください。

補足：text-indent:-9999px; （テキストを画面の外へ飛ばす設定）は、SEO（検索エンジン最適化）としては好ましくない設定と言えます。（ユーザーと検索エンジンの見る画面が異なる為です。ブログの内容に合った適切なタイトルを設定してください。）

詳細：Google ウェブマスター向け公式ブログ: 隠しテキストは Google のウェブマスター向けガイドライン違反です

「表示を確認する」か「保存」してブログを確認すると、タイトルと説明がブラウザ上で非表示になったことが確認できます。

また、ヘッダー画像を選択するとブログトップページへリンクされていることが確認できます。

ユーザーの利便性を考えると、ヘッダー画像のブログトップページへのリンクはあったほうが良いかと思います。