スポンサーサイト

0

    一定期間更新がないため広告を表示しています

    • 2012.12.19 Wednesday
    • -
    • -
    • -
    • -
    • by スポンサードリンク

    ブログカスタマイズ ヘッダーをリンクにする方法

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

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





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




      【ヘッダー画像をリンクにする方法】
      まず、アメブロの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ボタン(ページ更新)を押してみて下さい。

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

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

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

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

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

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

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


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






      ブログカスタマイズのTOPへ戻る

      スポンサーサイト

      0
        • 2012.12.19 Wednesday
        • -
        • 17:31
        • -
        • -
        • -
        • by スポンサードリンク

        コメント
        コメントする








           

        無料問合せ
        ▼ご質問・問合せはコチラからどうぞ▼

        MENU

        twitter & facebook




        Yuu Matsuda | バナーを作成


        クレジットカードのお支払いも可能です。
        ソリューション画像

        リンク集

        PR

        selected entries

        categories

        archives

        recommend

        links

        profile

        search this site.

        others

        mobile

        qrcode

        powered

        無料ブログ作成サービス JUGEM