今回は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です。
お知恵を拝借できませんでしょうか。
何卒、宜しくお願いいたします。
通りすがり様
無事に解決できたようで良かったです。「powerd by seesaa」の部分に関しては削除する事はできませんが、旧システムであれば「デザイン」⇒「コンテンツ」でこの「powerd by seesaa」をサイドバーへ移動できたと思います。なので、邪魔になるならサイドバーの一番下へ移動しておくと良いかもしれません。
完全に解決しました。
余白部分も修正したかったので助かりました。
お返事も早く、本当にありがとうございました。
またお世話になります。
また、powerd by seesaaはどうやっても消せないのでしょうか。
消せる場合は、adsenseを張っているのですが、このpowerd by seesaaは表示しなくてはならないのでしょうか？
通りすがり様
返信ありがとうございます。なるほど、コンテンツの配置！が原因だったんですね！
今、画像がリンクになっていますが、通りすがり様の言われるようにリンク部分（クリックできる範囲）がちょっとズレているので、これも修正していきましょう。
修正はスタイルシートですので、「デザイン」⇒「デザイン設定」⇒「適応中のデザイン名」をクリックしてスタイルシートのページになります。
一番下に次のコードを追加して下さい。
#banner h1 { padding-top: 0; padding-bottom: 0; }これで保存をします。ブログを表示させて「Ctrl」と「F5」を一緒に押してリロードしてから確認して下さい。
また、これは余談なんですが、ヘッダー画像のすぐ下にコンテンツが来ているようですので、もしヘッダー画像と下のコンテンツにもう少しスペースが欲しいという場合には同じくスタイルシートの一番下に次のコードも追加してみてください。
#banner { margin-bottom: 50px; }この50pxの数値がヘッダー画像とその下のコンテンツとの余白になりますので、これも調整して追加してみるといいかもしれません。この部分は必要なければ追加しなくてもOKです。
度重なるアドバイスありがとうございます。
解決しました。
原因は、コンテンツ配置でヘッダー部分にブログタイトルを設置していなかったからのようです。
リンクは晴れたようですが、画像下部部分はリンクになりますが上側はリンクになっていないようです。
これは290pxの数値をいじれば良いのでしょうか？
通りすがり様
返信ありがとうございます。今再度確認したのですが、「div id=”banner」の中身がない状態です。一度、管理画面から「デザイン」⇒「HTML」と進み、「デフォルトHTML」と「自分で名前をつけたHTML」があると思いますので、現在適応されている（●のチェックが入っている）HTMLを再度確認し、「div id=”banner」に中身が入っているか確認をしてみて貰えますか？
中身を入れたら忘れないように「保存」をして確認してみてください。これでも表示されない場合にはお手数ですがもう一度コメント頂けると助かります。
丁寧な回答本当に助かります。
は25行目からありました。
それでもタイトルは表示されません。
他にこちらが提供できる情報はありませんか？
お手数おかけしますがよろしくお願いします。
通りすがり様
返信ありがとうございます。ブログを拝見させて頂き、幾つか修正が必要な部分がありそうなので１つ１つ書いてみますね。幾つか修正部分がありますので、失敗しても元に戻せるように事前にスタイルシート（CSS）とHTMLのコードをコピーしてメモ帳などに貼り付けてバックアップしておいて下さい。
まず、ヘッダーに画像を設置されていますが、本来表示されるはずのブログのタイトルや説明文が見えません。これはHTMLでタイトル部分を出力するコードを削除しているためと思われます。先ほどのコメントで書いたように元々あるブログタイトル（クリックするとトップページへ飛ぶリンク）部分の範囲を広げるので、一度HTMLで削除したコードを元に戻す必要がありそうです。
旧システムであればSeesaaブログの管理画面から「デザイン」⇒「HTML」と進みまず。先ほどはスタイルシートでしたが、今回はHTMLの方なので、お間違えないように。
適応しているHTMLを選択するとHTMLコードが表示されますので、その中から「div id=”banner”」という部分を探して下さい（おそらく31行名付近です）。おそらくこの部分の「中身」が削除されていると思いますので、このようになっていると思います。
このように「div id=”banner”」の中身が削除されていないでしょうか？もし削除されているのであればこのように書きなおして下さい。
これができたら一度保存し、ブログを確認します。これでブログのタイトルが表示されるのではないかと思います。
次に今度はスタイルシートへ移動してブログのタイトルを見えなくする作業と画像をリンクにする処置をしていきます。
管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザイン名」をクリックするとスタイルシート（CSS）のページになりますので、一番下へ移動して次のコードを追加してみてください（先ほどコメントで回答したコードは一度削除してもOKです）。
#banner { padding: 0; height: 290px; } #banner h1 a { height: 290px; display:block; text-indent: 100%; white-space: nowrap; overflow: hidden; }これで保存してブログを表示。それで「Ctrl」と「F5」を一緒に押してリロードしてから確認してみてください。それでブログの表示が崩れたり上手く反映されない場合には再度コメント頂けると助かります。
お返事ありがとうございます。
ブログは
になります。
ヘッダー画像は、こちらのブログの旧システムでヘッダーをを画像に変更するを適用しています。
テーマは「 シンプルベージュ(両サイドバー)」を使っています。
CSSの初期値との差分は、
@@ -623,3 +623,19 @@
clear:both;
}
/* twitter quote */
+#footer {text-align: center;}
+#banner {
+height: 290px;
+background-image:url(/image/E38398E38383E38380E383BCE794BBE5838F3.png);
+background-repeat:no-repeat;
+margin-bottom:0px;}
+}
+#banner {
+ padding: 0;
+ height: 290px;
+}
+
+#banner h1 a {
+ height: 290px;
+ display:block;
+}
となっています。画像の高さは290です。
よろしくお願いします。
通りすがり様
コメントありがとうございます。旧システムの場合は選択しているデザインによって若干違う部分も出てくると思いますが、1度次の方法で試してみてください。
旧システムの場合は「デザイン」⇒「デザイン設定」⇒「適応中のデザイン名」を選択するとスタイルシート（CSS）の画面になります。そこのコードがたくさん書いてあると思いますが、一番下までスクロールして、次のコードを追加して保存して下さい。
#banner { padding: 0; height: 250px; } #banner h1 a { height: 250px; display:block; }ここの「250px」というのが2箇所ありますが、これが画像の高さです。好きな数値に変更してもOKですが、両方同じ数値にして下さい。
それとこの場合の飛び先のURLはトップページになります。というのも、元々何もカスタマイズしていない場合はブログのタイトル部分をクリックするとトップページに飛びますよね？このリンクの範囲を広げただけなので、飛び先はトップページになります。
もし上記の方法で上手く行かないという場合にはお手数ですが、ブログのURLを教えて頂けると助かります。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。
タイトルと説明文はコンテンツ設定で削除しました。
旧システムなのですが、ヘッダー画像にリンクを埋め込む（画像をクリックするとこのブログのトップに飛ばす）方法は、この記事と同じで、デザイン設定のCSSの最後に同じHTMLを加えればいいのでしょうか？
また飛ばす先のリンク（URL）はどこに書けば良いのでしょうか？
よろしくお願いします。