アメブロのタイトルと説明文を消してヘッダー画像をトップページへのリンクにする

アメブロカスタマイズで自分らしい空間を作る技 【新】アメブロのタイトルと説明文を消してヘッダー画像をトップページへのリンクにする

今回は、『CSS編集用デザイン』を適用したアメブロのヘッダー部に文字入りのヘッダー画像を設定した時の定番、『タイトルと説明文を消してヘッダー画像をトップページへのリンクにする』手順をご紹介します。

なお、ヘッダー画像を設定する方法がわからない場合は、【新】アメブロのヘッダー画像を設定するをご覧の上、先にヘッダー画像の設定を済ませておいてください。

手順

■まず、マイページの左上にある『クイックリンク』をクリックします。

■メニューが表示されたら、『スキンCSSの編集』をクリックしてください。

■『CSSの編集』ページが開きますので、『現在使用中のデザインCSS』の文字入力欄を一番下までスクロールします。

■次に、以下の『CSS貼り付けコード』を『現在使用中のデザインCSS』の一番最後に追加する要領で貼り付けてください。


/* タイトル・説明文消し&ヘッダーリンク設定用CSS貼り付けコード */
.skinHeaderArea2{
  padding:0;
}
.skinBlogHeadingGroupArea{
  padding:0;
}
.skinDescriptionArea{
  display:none;
}
.skinTitleArea{
  padding:0;
  text-indent:-9999px;
}
.skinTitle{
  display:block;
  height:240px;
}

■貼り付け後、CSS貼り付けコードの中の、『240』の部分を実際のヘッダー画像の高さに設定します。

■ここまでできたら、『保存』ボタンをクリックして設定を保存しましょう。

■一番下になっていた『現在使用中のデザインCSS』のスクロールバーが、一番上まで上がり、CSSの先頭が見える状態になれば保存完了です。

■ただし、その時、リクエストは既に処理中であるか無効ですという赤文字のメッセージが表示された場合は、保存に失敗したということですので、もう一度保存を試みてください。

■保存後、ブログの表示を確認して終了です。

保存できたはずなのに、表示に変化がないような場合は、F5キー(Windowsの場合)を押すなどして、新しい情報を読み込むようにしてください。

タイトルと説明文を消してヘッダー画像をトップページへのリンクにする手順は以上です。

よかったらチャレンジしてみてくださいね。

アメブロカスタマイズで自分らしい空間を作る技