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

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

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

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

おすすめのASP

⇒もしもアフィリエイトの登録や使い方

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

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

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

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

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

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

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

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

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

ブログのタイトルの位置調整

現在ブログのタイトルは中央になっていると思うので、これを位置調整してみましょう。位置調整は「padding」と「text-align」を使う。

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

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

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

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

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

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

ブログタイトルを見えなくする場合

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

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

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

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

ただ、１つこれをおすすめしない理由としてはこれが「隠しテキスト」と思われないか？という点ですね。以前はスパムサイトでブログタイトルなどにキーワードを大量に詰め込んでそれを見えなくするような手法が存在したため、Googleも隠しテキストにも対策をしているはず。

今回はキーワードの詰め込みではないので、多分大丈夫とは思いますが、確証はないので念のためおすすめはしないと書いておきます。

ブログの説明文の位置調整もしくは非表示

さて、残った説明文をどうするか？これもブログタイトルと同じように位置調整もしくは非表示という方法の2通り。

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

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

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

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

.description {
    display: none;
}

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

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

【無料】キーワード選定に特化した無料教材＆動画「キーワード無双」

【期間限定無料】一億円ブロガーの電子書籍「自由な人生を手に入れる教科書」

ブログの更新はこちらから