今回はSeesaaブログのヘッダー画像をリンクにする方法とブログタイトルや説明文の移動もしくは削除について解説していきます。Seesaaブログのヘッダー画像の設置については前回の記事で紹介してあります。
⇒Seesaaブログのヘッダーに画像を設置する方法【新システム】
通常はブログのタイトルをクリックするとトップページにリンクするのですが、ヘッダー画像を設置するだけではリンクにはなりません。今回はこのヘッダー画像の画像部分をクリックできるようにしてトップページへのリンクとしたいという要望が多かったのでやってみましょう。
※利用しているデザインによって違う部分があるかもなので、反映されない場合には利用中のデザイン名をコメントで教えて貰えると助かります。
ヘッダー画像をリンクにする
先にヘッダー画像をリンクにしていきますが、これをすると現在表示されている「ブログのタイトル」や「説明文」の位置がちょっとズレてしまいます。そのため、ブログのタイトルや説明文は後から位置調整もしくは非表示（削除）するようなスタイルでやってみます。
Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」をクリックして、「スタイルシート編集」のタブを選択。
スタイルシートの一番下までスクロールして次のコードを追加。
.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;
}スコットケラムメソッドという手法。これで保存してブログを表示させて「Ctrl」と「F5」を一緒に押してリロードして確認。ブログのタイトルが見えなくなっていればOKです。
それと説明文を非表示にする場合にはスタイルシートに次のコードを追加。
.description {
display: none;
}これでタイトルと説明文は非表示になります。
ブログのタイトルや説明文の位置調整をする場合
こちらはタイトルや説明文を削除（非表示）にせずに位置だけ調整する場合のやり方です。
現在ブログのタイトルは中央になっていると思うので、これを位置調整してみます。
位置調整は「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;」。
画像の下に移動してしまった説明文の位置を上に戻す場合にはスタイルシートに次のコードを追加。
.description {
margin-top: -200px;
}これも先ほどのブログのタイトルと同じように「text-align:left;」左寄せとか「padding」での位置調整が可能なので、ブログタイトルと一緒に調整してみて下さい。
以上でヘッダー画像をリンクにする方法とブロブタイトルや説明文の位置調整は完了です。
ブログを収益化するならWordPress利用がおすすめ
無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。
また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。
WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。
コメント
しげぞうさん、返信ありがとうございます。
解決しました。
ブック様
コメントありがとうございます。HTMLではなくてスタイルシート（CSS）編集しているんですよね？間違ってHTMLに追加してたりしないでしょうか？
一度状況を見てみたいのでもし良かったらブログのURL教えて下さい。コメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。
しげぞうさん、ヘッダー画像にリンクを貼りたいのですが
ここで説明してあるようにやったのですが、上手く貼れてないみたいで
ヘッダー画像をクリックしてもトップに飛びません。
なので今、記事を見るを開いたらもとに戻れない状態なのです。
スタイルシートをいじってるからなのか
入れる位置が悪いのでしょうか？
スタイルシートは
.l-header{
height: 250px; /* ヘッダー画像の高さ */
background-image:url(“http://jpg”); /* 背景画像 */
background-repeat:no-repeat; /* 背景画像繰り返し */
}
と
.poweredby{
display:none;
}
だけ付け足していじりました。
ここで新たに書き足すコードは最初1番下に入れてﾀﾞﾒで
今度はパワードバイの上に入れましたが
それもﾀﾞﾒでした。
ヘッダー画像の数値も250でピッタリ合ってるはずなのですが・・・
意味不明です。
助けてください（＞＿＜）
カワラ様
コメントありがとうございます。Seesaaブログのコンテンツの「人気記事」だと思うのですが、これはjavascriptで人気の記事を探して並び替えるような仕組みじゃないかな？と思います。これにサムネイル画像をつける事が可能だとは思うのですが。。。今やってみたのですが上手く行きません、すみません。
人気記事を固定して、やる方が私的にはやりやすいのですが、これだと画像がどうしても多くなってしまうので、サイトの読み込みに時間がかかってしまうんですよね。何かいい方法があればまたコメントで返信するか、人気記事作成を解説している記事に追記しますね。参考にならずすみません。
しげぞう様お世話になっております。
CSSとHTMLの本を購入しました、これから少しずつ勉強してくつもりです。
お忙しいところ申し訳ないのですがまたお願いがありお邪魔致しました。
seesaaブログ新システムのシンプルAホワイト右サイドバーを使用しているのですが、
コンテンツの過去記事にサムネイル画像が表示されているように人気記事にもサムネイル画像を付けたいのですがどうすればいいでしょう？
しげぞう様
早急なご対応、誠にありがとうございます。
おかげさまで、無事にリンクが設定できました。
本当にありがとうございます。
今後ともいろいろご教授いただけますよう
お願いいたします。
dir様
返信ありがとうございます。ブログのヘッダーも確認できました！使用テンプレートは新システムのTKGでよかったですよね。
それでですね、とりあえずヘッダー画像がリンクになるようにちょっと調整していきますが、1回で上手くいくかはやってみないと分かりません。一応下記の施策で大丈夫とは思いますが、もし上手く行かない場合には再度コメント下さい。
それと、編集する前に今のスタイルシートを全部コピーしてメモ帳などに残しておいて下さい。もし上手く行かなかった時に元に戻せるようにしておく必要がありますし、その方が安心です。
まず、スタイルシート（CSS）の編集なんですが、次の記述を探して下さい。
.header h1 { font-size: 48px; font-weight: bold; line-height: 1.1; background: rgba(198, 93, 0, 0.75); width: 300px; padding: 5px; display: none }スタイルシートに上記の記述があると思うのですが、ここの最後の「display:none」の1行を削除して下さい。
これで一度保存をしてブログを確認すると、ヘッダー画像にブログタイトルが表示されると思いますがひとまずこれでOKです。ブログタイトルを一度表示させておき、それを別の方法で非表示にする必要があります。
それで、ブログタイトルが表示された事を確認できたら再度スタイルシートの一番下に次のコードを追加。
.header h1 { text-indent: 100%; white-space: nowrap; overflow: hidden; width: 1000px; height: 320px; background: none; } .header h1 a { width: 1000px; height: 320px; border: none; } .header__inner { padding-left:0; }これをコピペして追加できたら保存して下さい。それでブログを表示させて「Ctrl」と「F5」を一緒に押してリロードして確認して下さい。
上手く行けばこれでヘッダー画像がリンクになっていると思います。ちょっと別のデバイス（タブレットなど）で確認してないので、スマホやタブレットで問題ないか確かめておいた方が良いかもしれません。問題があれば条件分岐を入れないといけませんので、その場合はまた教えて下さい。
しげぞう様
お返事ありがとうございます。
お手数をおかけいたします。
top画像はCSSの編集で修正しました。
URLですが間違えていたようで
申し訳ありませんでした。
URLは以下のとおりです。
何卒、宜しくお願いいたします。
dir様
コメントありがとうございます。Seesaaブログの場合は選択したデザインによって若干違う部分があるのですが、dir様の利用されているTGKの場合も若干違う部分がありそうです。実際にこのデザインを利用してみたのですが、ヘッダー画像（カバー画像）の設定項目も出てきませんね。
ヘッダー画像の変更はどのように変更されたのでしょうか？設定でできました？それともCSSの編集でされたのでしょうか？
一応ブログを見たら対処できるかと思ったのですが、教えて頂いたサイトのURLで表示できませんでした。なので、お手数ですが、サイドブログが表示される事を確認して、もう一度URLを教えてもらえると助かります。
実際にブログをみて調整を考えてみようと思いますので、どうぞよろしくお願い致します。
しげぞう様
各ページ拝見させていただき参考にさせていただいております。
ヘッダー画像の変更、ブログタイトルと説明文の非表示化はできたのですが
ヘッダー画像にトップページに遷移させるリンクが設定できません。
サイトURL
使用テンプレートは新システムのTKGです。
お知恵を拝借できませんでしょうか。
何卒、宜しくお願いいたします。