Seesaaブログのカバー画像(従来のデザインシステム)をオリジナルのものにしよう

、新デザインシステム限定機能としてカバー画像設定機能をリリースいたしましたが、従来のデザインシステムをご利用の場合には、スタイルシートの編集により、お好みの画像をブログのヘッダー画像に組み込むことができます。

この編集を行うことで、あなたが撮った風景や観光地、食べ物、ペットの写真をカバー画像として表示させることができ、よりオリジナリティ溢れるブログになること間違い無しですね。

Googleなど検索エンジンで検索すると、いろいろな方がカバー画像を組み込む方法について記事を書いていますが、このブログでもカバー画像の組み込み方法についてご紹介します。

今回の目次

カバー画像を用意する

※今回は、従来のデザインシステムのデザイン一覧画面にある「SimpleDホワイト(右サイドバー)」(下の画像)を使います。
デザインテンプレートによって、下記説明内容の値が異なる場合がありますので、あらかじめご留意ください。
sample-top0.png

  1. ヘッダー部分の値を確認する。

    ヘッダー部分の初期値がどのように設定されているかを確認して、その値を元にカバー画像を作成します。
    スタイルシート編集画面で #container あるいは #banner とページ内検索( Ctrl+F など)をすると、以下「■編集前(初期値 - 全体)」のような値が表示されます。

    ■編集前(初期値 - 全体)

    /* Layout */
    /*-------------------------------------*/
    #container {
      width: 960px;
      position: relative;
      height: auto !important;
      height: 100%;
      min-height: 100%;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    
    /* Layout - blogTitle */
    #banner {
      padding: 80px 0;
      text-align: center;
    }
    #banner h1 {
      margin: 0;
      font-size: 32px;
      line-height: 1.4;
      font-weight: bold;
    }
    #banner h1 a {
      color: #333;
      text-decoration: none;
    }
    #banner .description {
    }
    

    上のソースコードの #container にある width: 960px; がブログ全体のサイズの横幅となり、こちらが今回のカバー画像の横幅になります。
    ※デザインテンプレートによっては、 #bannerheader (カバー画像の高さ)が設定されている場合もありますが、「SimpleDホワイト(右サイドバー)」は上記の通り、その値がありません。そのため、カバー画像の高さについては、任意の値を設定することになります。

  2. 写真を加工する。

    カバー画像のサイズを確認したら、お好みの画像をそのサイズに合わせて加工します。
    今回は以下の写真を使って加工して、カバー画像として組み込みます。
    カバー画像加工前

    上の画像を【横:960px / 高さ:490px】のサイズで以下のように加工しました。
    カバー画像加工後
    ※クリックすると別ウィンドウで原寸大の画像が表示されます。

  3. 加工した画像をファイルマネージャにアップロードする。

    カバー画像として加工した画像をブログのファイルマネージャにアップロードすれば、カバー画像の準備は完了です。


カバー画像をブログに設定する

ヘッダー部分に画像を表示させる

上の手順で加工した画像をブログのヘッダー部分に表示させるようにします。
こちらは、以下「■編集前(初期値 - #banner )」の値を編集します

■編集前(初期値 - #banner )
#banner {
  padding: 80px 0;
  text-align: center;
}

こちらを以下「■編集後( #banner )」のように編集します。

■編集後( #banner )
#banner {
  padding: 0;
  text-align: center;
  height: 490px;
  background-image: url(※ファイルマネージャにアップロードした画像URL);
  background-repeat: no-repeat;
}

ブログタイトルと説明文を非表示にする

上記の設定で下の画像のようにブログのヘッダー部分に画像が組み込まれましたが、ブログタイトルとブログ説明文が表示されています(赤枠部分)。
カバー画像設定後(タイトル説明文表示)

そのため、次に以下「■編集前(初期値 - #banner h1 / .description )」の値を編集します。

■編集前(初期値 - #banner h1 / .description )
#banner h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.4;
  font-weight: bold;
}

#banner .description {
}

こちらを「■編集後( #banner h1 / .description )」のように編集します。

■編集後( #banner h1 / .description )
#banner h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.4;
  font-weight: bold;
  text-indent:-9999px;
}

#banner .description {
  display: none;
}

これで下の画像のようにブログタイトルと説明文が表示されなくなりました。
カバー画像設定後(タイトル説明文非表示)

カバー画像をクリックした時にブログのトップページに移動させるようにする

ブログタイトルを非表示にしたことで、ワンクリックでブログのトップページに戻る手段がなくなってしまったので、最後にカバー画像をクリックした時にブログのトップページに移動させるようにする設定をします。

こちらの編集は「■編集前(初期値 - #banner h1 a )」で行います。

■編集前(初期値 - #banner h1 a )
#banner h1 a {
  color: #333;
  text-decoration: none;
}

こちらを「■編集後( #banner h1 a )」のように編集します。

■編集後( #banner h1 a )
#banner h1 a {
  color: #333;
  text-decoration: none;
  display:block;
  width: 960px;
  height: 490px;
}

下の画像のようにブログの見た目は変わりませんが、カバー画像がクリックできるようになり、クリックするとブログのトップページに戻るようになります。
カバー画像設定後(タイトル説明文非表示)


まとめ

これまでのCSSの編集を全て行うと、スタイルシート編集画面のソースコードは以下「■編集後(全体)」のようになります。

■編集後(全体)

/* Layout */
/*-------------------------------------*/
#container {
  width: 960px;
  position: relative;
  height: auto !important;
  height: 100%;
  min-height: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Layout - blogTitle */
#banner {
  padding: 0;
  text-align: center;
  height: 490px;
  background-image: url(※ファイルマネージャにアップロードした画像URL);
  background-repeat: no-repeat;
}
#banner h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.4;
  font-weight: bold;
  text-indent:-9999px;
}
#banner h1 a {
  color: #333;
  text-decoration: none;
  display:block;
  width: 960px;
  height: 490px;
}
#banner .description {
  display: none;
}

これで従来のデザインシステムのブログに、あなた好みのヘッダー画像を設置することができますね。
ぜひお試しください。

※本記事でご紹介した内容はあくまで一例となります。
また、スタイルシート(CSS)のソースコードに関して、編集箇所や内容および編集結果を含め、サポートは一切行っておりません。
お問い合わせいただいてもご案内できませんので、あらかじめご了承ください。