	ブログをはじめるログイン

ブログタイトルを非表示にしてヘッダー画像にブログトップへ戻るリンクを貼る

【目的】
ブログタイトルが含まれたヘッダー画像を使いたいのでタイトル文字が邪魔。
さらに、ヘッダー画像をクリックしてブログトップに戻りたい。

【解説】
ブログタイトル込みのかっこいいヘッダー画像などをよく見かけますね。
さらに、そのヘッダー画像にリンクが貼られていて、
いつでもブログトップに戻れるという読者に優しい作りになっていると
読者側でも安心してあっちこっちブログ内を見てくれます。

【変更方法】
「スタイルシート編集」で行います。
デザイン→テンプレート管理→テンプレート選択 & CSS編集の[編集]

一般的にヘッダー画像と呼ばれていますが、ソネットブログでは一番上の１行を
header と読んでいるので本来はバナー画像と呼ぶべきかもしれません。

という話しは置いておいて、#banner h1{ を探します。

ここには、ブログタイトルの表示位置、フォントの種類そしてフォントのサイズが
記述されていますが、今回は影響がないのでそのまま放置します。

最後の行に

　　text-indent:-9999px;

を追加します。

　　#banner h1{
　　margin:0;
　　padding: 10px 20px 8px 20px;
　　font-family: Helvetica,Arial,sans-serif;
　　font-size: 32px;
　　text-indent:-9999px;
　　}

これで、画面のずーっとずーっと左側に移動しました。
計算すると、だいたい3.5ｍくらい離れたでしょうか（笑）

ブログ説明文も同じように飛ばすことができます。

ブログ説明文は #lead{ 内を変更します。
ヘッダー画像のところで追加した1行をコピペします。

　　#lead{
　　font-size:14px;
　　margin:0;
　　padding:0 20px;
　　text-indent:-9999px;
　　color:#ffffff;
　　line-height:1.3;
　　}

記述場所はどこでもいいのですが、
bannerと体裁を同じにしたかったので、この位置に挿入してみました。

これで、ブログ説明文も遠くへ飛んでいきました。
非表示にする方法は他にもありますが、この方法がお手軽です。

次に、ヘッダー画像にリンクを貼りましょう。
#banner h1 a{ を見つけて下さい。

そこに、

　display:block;
　width:900px;
　height:400px;

を追加します。
※width と height は自分のブログのヘッダー画像サイズにします。

　　#banner h1 a{
　　display:block;
　　width:900px;
　　height:400px;
　　color:#ffffff;
　}

こんな感じになりました。

これは h1 をヘッダー画像と同じ範囲でクリックできるようにするためです。
要は見えないブログタイトルをクリックできるようにしているワケですね。

正確には「ヘッダー画像にリンクは貼っていない！」ということです（笑）

最後に保存を忘れないでください。

タグ：ブログトップスタイルシート編集 CSS

2013-06-08 13:49 nice!(12) コメント(5) トラックバック(0)

nice! 12

お世話になっております！

こちらの記事でヘッダー画像変更＆画像をリンクにすることができました！

ありがとうございます(^O^)

しかし一つ質問なのですが、上記の方法で行うとリンクが
少し下へずれてしまうのですがなぜでしょうか？
by hige_tube (2013-09-11 07:09)

放置ブログにもかかわらず、コメントいただきありがとうございます。

リンクが下へずれるという意味がよくわかりませんが、
ブラウザによる解釈の違いでずれたりします。

この辺は割り切ってしまうのがよろしいかと＾＾；
by 萬屋猫右衛門 (2013-09-30 01:05)

hige-tubeさんから指摘があった「リンクが下へずれる」という現象ですが、読解力がなくていい加減な返事をしてしまいましたね＾＾；

あの後、気になって他のソネットブログを見てみました。
hige-tubeさんの指摘は、たぶん、ヘッダー画像の位置を指していると思われます。

ヘッダー画像にリンクを貼るとなぜか上部に隙間が出来ます。
（ホントはなぜかではないんですけどね）

自分はいい加減な性格なので全然気にならなかったのですが、
やっぱり気持ち悪いと感じる人はいますよね。

そこで、手っ取り早く、簡単に、たったの１行追加するだけで解決する方法をお教え致しますね。
※手順は上記記事を参照して下さい。

スタイルシート編集の準備が出来ましたら、
#banner {　を探してください。

見つかったら、そのブロックに
margin-top:-10px;
の１行を追加してください。

これで、ヘッダー画像が上へ10px分移動して隙間がなくなります。

大したことしてませんので、この対処療法はどのブラウザでも有効です。
by 萬屋猫右衛門 (2013-10-13 16:54)