So-net無料ブログ作成
カスタマイズ ヘッダー リンク ブログトップ

ヘッダーをリンクにする方法 [カスタマイズ ヘッダー リンク]

ブログの表紙とも言える、「ブログヘッダー」をトップページへのリンクへしてしまおう、
というのが今回のカスタマイズのご紹介です。

通常、ブログのヘッダー内にはブログタイトルと、ブログ紹介文が設置してありますよね。


articletitle13.png


ここのタイトル文字と紹介文の文字を見えなくして、表紙の画像だけにします。
そしてさらにヘッダーの画像全体がクリックできるようになり、リンク先はブログのトップページになります。


articletitle14.png

【ヘッダー画像をリンクにする方法】
まず、アメブロのCSS編集ページに行きます。CSS編集は、「CSS編集用デザイン」というスキンに変更しなければいけません。これに設定してない方は、まず「CSS編集用デザイン」に変更しましょう。
≫(「CSS編集用デザイン」への変更の仕方はコチラ

CSS編集のページに移動したら、下記のコードをCSSの一番下に設置しましょう。


#header{margin:0 auto;
width: 980px;/* ヘッダー画像の幅 */
background: url(ヘッダー画像のURLコード);
background-repeat: no-repeat;
}div#header h1 {
margin:0;
padding:0;
width:980px; /* ヘッダー画像の幅 */
height:400px; /* ヘッダー画像の高さ */
}div#header h1 a {
display:block;
width:980px;/* ヘッダー画像の幅 */
height:400px;/* ヘッダー画像の高さ */
text-indent: -9999px;
overflow: hidden;
}


上記のコードをCSS内に記述したら、保存してください。
保存し終わったら、ブログのトップページを開き、ちゃんとカスタマイズされているかチェックしてみましょう。もし変わってないようでしたらF5ボタン(ページ更新)を押してみて下さい。

以上がヘッダー画像をリンクにする方法です。

表紙のデザインの中にブログタイトルや、紹介文などを入れればヘッダーの見栄えがとても良くなります。トップページへ戻る時にわざわざブログのタイトルをクリックしなくても、表紙のどこかをクリックすればトップページの戻るようになります。

これが今回のカスタマイズ内容なのですが、好みによるところもございます。

「ブログのヘッダーをクリックするとトップページへ戻る」

ということが分からない方は、

「どこをクリックすればトップページへ戻れるのだろうか・・・?」

と迷ってしまう場合もあります。
そういった場合も考えて、メニューバーなどを付けてトップページへのボタンを設置してあげると非常に分かりやすいブログになりますね。
なので、このカスタマイズをされる方は合わせてメニューバーの設置も検討した方が良いでしょう。
メニューバーの設置方法はコチラ!


ヘッダーとメニューバーがセットになったカスタマイズはコチラ!!!


ヘッダーにリンクを付ける アメブロ [カスタマイズ ヘッダー リンク]

ブログの表紙とも言える、「ブログヘッダー」をトップページへのリンクへしてしまおう、
というのが今回のカスタマイズのご紹介です。

通常、ブログのヘッダー内にはブログタイトルと、ブログ紹介文が設置してありますよね。


articletitle13.png


ここのタイトル文字と紹介文の文字を見えなくして、表紙の画像だけにします。
そしてさらにヘッダーの画像全体がクリックできるようになり、リンク先はブログのトップページになります。


articletitle14.png

【ヘッダー画像をリンクにする方法】
まず、アメブロのCSS編集ページに行きます。CSS編集は、「CSS編集用デザイン」というスキンに変更しなければいけません。これに設定してない方は、まず「CSS編集用デザイン」に変更しましょう。
≫(「CSS編集用デザイン」への変更の仕方はコチラ

CSS編集のページに移動したら、下記のコードをCSSの一番下に設置しましょう。


#header{margin:0 auto;
width: 980px;/* ヘッダー画像の幅 */
background: url(ヘッダー画像のURLコード);
background-repeat: no-repeat;
}div#header h1 {
margin:0;
padding:0;
width:980px; /* ヘッダー画像の幅 */
height:400px; /* ヘッダー画像の高さ */
}div#header h1 a {
display:block;
width:980px;/* ヘッダー画像の幅 */
height:400px;/* ヘッダー画像の高さ */
text-indent: -9999px;
overflow: hidden;
}


上記のコードをCSS内に記述したら、保存してください。
保存し終わったら、ブログのトップページを開き、ちゃんとカスタマイズされているかチェックしてみましょう。もし変わってないようでしたらF5ボタン(ページ更新)を押してみて下さい。

以上がヘッダー画像をリンクにする方法です。

表紙のデザインの中にブログタイトルや、紹介文などを入れればヘッダーの見栄えがとても良くなります。トップページへ戻る時にわざわざブログのタイトルをクリックしなくても、表紙のどこかをクリックすればトップページの戻るようになります。

これが今回のカスタマイズ内容なのですが、好みによるところもございます。

「ブログのヘッダーをクリックするとトップページへ戻る」

ということが分からない方は、

「どこをクリックすればトップページへ戻れるのだろうか・・・?」

と迷ってしまう場合もあります。
そういった場合も考えて、メニューバーなどを付けてトップページへのボタンを設置してあげると非常に分かりやすいブログになりますね。
なので、このカスタマイズをされる方は合わせてメニューバーの設置も検討した方が良いでしょう。
メニューバーの設置方法はコチラ!


ヘッダーとメニューバーがセットになったカスタマイズはコチラ!!!


カスタマイズ ヘッダー リンク ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。