ジャンル

ジャンル一覧

ランキング

もっと活用

注目タグ

App Store
Google play

質問・疑問

コミュニティランキング

トピック詳細

ヘッダー画像からトップへ飛ぶようにしたいのですが。。。

ブログタイトルを画像に変えて、画像にはタイトルが入っているので
タイトルを消すところまではできたのですが、どうやらヘッダー画像
にブログのトップに飛ぶリンクも消してしまったようでそこを直したいです。
どうしたらヘッダー画像からブログトップに飛べるリンクを貼ることができるでしょうか。
過去トピックで似たような記事はあったのですが、どうも分からず
こちらに質問させて頂きました。
よろしくお願いします。

ちなみにブログはこちらです。http://arenniki.blog110.fc2.com/

2012年07月25日 19:03  by ユー

コメント一覧 7件中、1～7件表示

  • /* Layout
    ----------------------------------------------------------- - */

    #container {
    width: 900px;
    text-align: center;
    background-color: #f7ffdf;
    margin: 0 auto 20px auto;
    }

    #header a{
    display:block;
    }

    #main {
    float: left;
    width: 640px !important;
    width /* for IE5.5 */: 700px;
    padding: 10px 20px;
    overflow: hidden;
    }

    シメノが試したときには
    上の太字部分のみを（テンプレートの）スタイルシートに残して


    <div id="header">
    <a href="<%url>" accesskey="0&qu ot; title="<%blog_name>"><h1><im g src="画像ＵＲＬ" width=100% height=475px style=paddin g-top:15px alt="<%blog_name>"></h1> </a>
    <p></p>
    </div><!-- /header -->

    テンプレートのＨＴＭＬを上のように編集しました。


    この改変で意図するように動作したので
    他にはもう試していませんが、真実推奨される手法かどうかは判りません。

    前のコメントでも述べましたが
    検索対象をクロールするロボットは
    <h1><h2>といったタグを読み取って評価すると聞くので
    なるべく検索上位に表示されたい場合には削除しない方がいいのではないかと思います。

    2012年07月31日 20:14 by 標野ゆき

  • 直接リンクを貼るのは無理なのですね～。。。


    ＞テンプレートのスタイルシートからヘッダー部に背景を表示する指示を取り払って

    というのは

    #header {
    width: 100%;
    overflow: hidden;
    height: 350px;
    padding-top: 15px;
    text-align: left;
    background: url(http://blog-imgs-51.fc2.com/a/r/e/arenniki /jIsVhjoyqClrPRp.jpg
    ) #ffffff no-repeat left bottom;
    display:block;
    }
    #header h1 { visibility: hidden; }

    のうちのどこを取り払えば良いのでしょうか？

    あと、

    ＞HTML上でイメージタグを使って表示

    とはつまりどういう事でしょうか？

    何度も質問ばかりで申し訳ありません。よろしくお願い致します。m(__)m

    2012年07月31日 19:03 by ユー

  • スタイルシートを使って表示する背景画像に直接リンクを張るのは
    たぶんムリなのではないかと思います。

    どうしても画像にリンクを張りたいとおっしゃるのでしたら
    テンプレートのスタイルシートからヘッダー部に背景を表示する指示を取り払って
    HTML上でイメージタグを使って表示されたらよいのではないでしょうか。
    そちらにはリンクが張れます。

    もっとも
    SEO上、<h1>タグと<%blog_name>は残しておく方が有益です（たぶん）。

    2012年07月28日 11:44 by 標野ゆき

  • かぶせ書きをすると成功しました！！
    ありがとうございます。感謝いたします！m(__)m

    これの仕組みってブログ名を透明にしているのですよね？

    このままで十分満足しているのですが、贅沢を言うと
    画像全体にリンクを貼るという事は可能でしょうか？

    もしできないとか、面倒くさいなぁと思われましたらすいません。

    よろしくお願いします。。。

    2012年07月27日 18:51 by ユー

  • <div id="header">
    <a href="<%url>" accesskey="0" title="<%blog_name>"><h1><%blog _name></h1></a>
    <p></p>
    </div><!-- /header -->

    は
    テンプレートHTMLの該当部分に
    そのまま かぶせ書きしてください。

    2012年07月27日 18:27 by 標野ゆき

  • ご返答ありがとうございます。
    同じ質問記事は削除致しました。ご指摘ありがとうございます。


    太文字のところを追加すればいいのですよね？
    追加してみたのですが、ダメでした。
    ブログ名を消す為に

    <body>
    <div id="container">
    <div id="header">
    <h1></h1>

    で、<h1>の間を削除しているのですが、これと何か関係があるでしょうか？

    2012年07月26日 18:41 by ユー

  • shiroineko_01　を
    全くカスタマイズしていないケースからの編集例です。


    ＜HTML＞
    <div id="header">
    <a href="<%url>" accesskey="0&qu ot; title="<%blog_name>"><h1><%b log_name></h1></a>
    <p></p>
    </div><!-- /header -->

    ＜スタイルシート＞
    /* Layout
    ----------------------------------------------------------- - */

    #container {
    width: 900px;
    text-align: center;
    background-color: #f7ffdf;
    margin: 0 auto 20px auto;
    }

    #header a{
    width: 100%;
    overflow: hidden;
    height: 475px;
    padding-top: 15px;
    text-align: left;
    background: url(画像ＵＲＬ) #ffffff no-repeat left bottom;
    display:block;
    }
    #header h1 { visibility: hidden; }

    シメノが試したときにはこれで首尾よく動作しましたが
    あちこちカスタマイズしてある場合には同じように行かないケースも多いので悪しからず。

    それとほぼ同じ質問を別に投稿されているのは削除されたほうがいいと思います。

    2012年07月26日 16:33 by 標野ゆき

Copyright(c)1999 FC2, Inc. All Rights Reserved.

ジャンル一覧