Seesaaブログのヘッダー画像をリンクにする方法【新システム】

今回はSeesaaブログのヘッダー画像をリンクにする方法とブログタイトルや説明文の移動もしくは削除について解説していきます。Seesaaブログのヘッダー画像の設置については前回の記事で紹介してあります。

通常はブログのタイトルをクリックするとトップページにリンクするのですが、ヘッダー画像を設置するだけではリンクにはなりません。今回はこのヘッダー画像の画像部分をクリックできるようにしてトップページへのリンクとしたいという要望が多かったのでやってみましょう。

※利用しているデザインによって違う部分があるかもなので、反映されない場合には利用中のデザイン名をコメントで教えて貰えると助かります。

1 ヘッダー画像をリンクにする
2 ブログタイトルや説明文を消す（非表示）にする場合
3 ブログのタイトルや説明文の位置調整をする場合

ヘッダー画像をリンクにする

先にヘッダー画像をリンクにしていきますが、これをすると現在表示されている「ブログのタイトル」や「説明文」の位置がちょっとズレてしまいます。そのため、ブログのタイトルや説明文は後から位置調整もしくは非表示（削除）するようなスタイルでやってみます。

Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」をクリックして、「スタイルシート編集」のタブを選択。

スタイルシートの一番下までスクロールして次のコードを追加。

.header {
    padding: 0;
    height: 250px;
}

.header h1 a {
    height: 250px;
    display:block;
}

.header {

padding: 0;

height: 250px;

}

.header h1 a {

height: 250px;

display:block;

}

これで一応ヘッダー画像部分がリンクになります。画像の高さは250pxにしてますがこれはお好みで変更OKです。「height」という部分が2箇所あるので、どちらも同じ数値にしておいて下さい。

ただ、これを追加するとブログのタイトルが上へ行き、逆に説明文が画像の下に行ってしまいます。

という訳なので、ブログのタイトルと説明文の位置調整もしくは削除（非表示）をやっていきます。幾つかパターンがあるので2通り紹介します。まずはブログタイトルの位置調整もしくは見えなくする方法から。

ブログタイトルや説明文を消す（非表示）にする場合

ブログのタイトルを削除（非表示）にしたいという場合もあると思いますが、ブログのタイトルって非常に重要なので単純に削除する訳にはいかないので、通常は画面の外（見えない位置）に移動する場合が多いです。要は非表示です。

ブログタイトルを見えなくするようにする場合にはスタイルシートの一番下に次のコードを入れます。

.header h1 a {
 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;
 }

.header h1 a {

text-indent: 100%;

white-space: nowrap;

overflow: hidden;

}

スコットケラムメソッドという手法。これで保存してブログを表示させて「Ctrl」と「F5」を一緒に押してリロードして確認。ブログのタイトルが見えなくなっていればOKです。

それと説明文を非表示にする場合にはスタイルシートに次のコードを追加。

.description {
    display: none;
}

.description {

display: none;

}

これでタイトルと説明文は非表示になります。

ブログのタイトルや説明文の位置調整をする場合

こちらはタイトルや説明文を削除（非表示）にせずに位置だけ調整する場合のやり方です。

現在ブログのタイトルは中央になっていると思うので、これを位置調整してみます。

位置調整は「padding」と「text-align」を使います。

例えばブログのタイトルを左上にしたいという場合はスタイルシートの一番下に次のコードを入れる。

.header h1 a {
    text-align: left;
    padding: 20px 0 0 20px;
}

.header h1 a {

text-align: left;

padding: 20px 0 0 20px;

}

これを説明しておくと「text-align」でleft(左)寄せにします。これだけならブログタイトルが中央から左に寄ります。そこから少し上と左に余白を取るなら「padding」で調整する感じですね。

「padding」は４つの数値で細かい余白の位置調整ができます。数値は時計まわりに「上、右、下、左」の順番。

つまりこのサンプルの場合だとpaddingで、上に20pxと左に20pxの余白ができたという訳です。

この要領でブログタイトルの位置を調整していく事ができます。ちなみに右に寄せるなら「text-align:right;」。

画像の下に移動してしまった説明文の位置を上に戻す場合にはスタイルシートに次のコードを追加。

.description {
    margin-top: -200px;
}

.description {

margin-top: -200px;

}

これも先ほどのブログのタイトルと同じように「text-align:left;」左寄せとか「padding」での位置調整が可能なので、ブログタイトルと一緒に調整してみて下さい。

以上でヘッダー画像をリンクにする方法とブロブタイトルや説明文の位置調整は完了です。