はてなダイアリーで、日記のタイトルの前に出てしまう■を、画像に置き換えようとしています。


span.sanchor{
margin:0 0 0 0;
background-image:url('画像URL');
background-position: top left;
background-repeat: no-repeat;
font-size: 0px;
padding: 10px 10px 5px 5px;
color: #fff;
}

で指定したのですが、極小の■がどうしも表示されてしまいます。

↓の方のテンプレートを参考にしました。このテンプレートでは、■が表示されずに画像に置き換わっています。
http://d.hatena.ne.jp/sample/?publicdesignset=1850

どうしたらこうなるのでしょう?
お分かりの方よろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/08/31 11:48:31
  • 終了:2011/09/07 11:50:03

回答(1件)

id:rouge_2008 No.1

rouge_2008回答回数593ベストアンサー獲得回数3502011/09/01 03:25:10

こちらでは「<span class="sanchor">」は出力されていませんが、質問者さんのダイアリーでは次のように出力されるのですか?

※■はタイトルを空白にした場合、記事タイトルの代わりに自動で出力されているようです。

(個別記事へリンクするための代替テキストだと思いますが・・・)

<h3 class="title"><a href="http://~" name="**********"><span class="sanchor">■</span></a>[<a href="" class="sectioncategory"></a>] <span class="timestamp"></span></h3>

この場合はスタイルシート欄に次のように追記してみてください。

【修正済み】

h3.title a span.sanchor{
  float: left;
  display: block;
  background: #ffffff url('画像のURL') left top no-repeat;
  width: 100px; /* 画像の幅を指定します */
  height: 20px; /* 画像の高さを指定します */
  color: transparent;
}

※「<span class="sanchor">」が出力されていない場合は次のようにしてください。


h3.title a {
  float: left;
  display: block;
  background: #fff url('画像のURL') left top no-repeat;
  width: 100px; /* 画像の幅を指定します */
  height: 20px; /* 画像の高さを指定します */
  color: transparent;
}
.section h3.title a:hover {
  color: transparent;
}



【追記】上のコードは省略されているようでしたので、確認に使用したコードを掲載します。


<div class="section">
			<h3 class="title"><a name="12????????" href="/xxxxxx/20101224#12????????"><span class="sanchor">■</span></a><span class="hatena-star-comment-container"><img src="http://d.st-hatena.com/statics/theme/hatena_xxxxx/star-comment.gif" tabindex="0" alt="Comments" title="Comments" style="cursor: pointer; margin: 0pt; padding: 0pt; border: medium none; vertical-align: middle; display: none;" class="hatena-star-comment-button"></span><span class="hatena-star-star-container"><img src="http://d.st-hatena.com/statics/theme/hatena_xxxxx/star-add.gif" tabindex="0" alt="Add Star" title="Add Star" style="cursor: pointer; margin: 0pt 3px; padding: 0pt; border: medium none; vertical-align: middle;" class="hatena-star-add-button"></span></h3>
			<p class="sectionheader"><span class="sectioncategory"><a class="sectioncategory" href="/xxxxx/xxxx">ダイアリー</a></span> |  <span class="timestamp">02:12</span> | <span class="edit"><a class="editinplace" style="cursor: pointer;">編集</a></span></p>
			<p>サンプルテキスト</p>
			<p>サンプルテキスト</p>
</div>
  • id:rouge_2008
    記事タイトルの前の長方形の飾りのような物の事でしょうか?
    sanchorが付与されたspanタグ(要素)がどこに使われているのか分かりませんが、記事のタイトルでしたら、クラス名titleが付与されたh3タグ(要素)です。

    .body h3.title {
    border-left: 6px solid #E98383;
    (~ 略 ~)
    }

    上記の記述が原因ですので、スタイルシート欄に以下のように記述してみてください。

    /* 記事タイトル背景画像指定 */
    .body h3.title {
    border-left: none;
    background: #ffffff url('画像のURL') left top no-repeat;
    }
    /* 記事タイトル背景画像指定ここまで */


    「left」「top」等のキーワードで指定する場合、順序は関係なく反映されるようですが、数値で指定する場合は「横位置、縦位置」の順で指定しますので、キーワードで指定する場合も同様にすると混乱しなくていいかもしれません。
    http://www.dspt.net/stylesheet_css/004/003.html

    http://www.dspt.net/stylesheet_css/004/008.html
  • id:yumehashi
    回答ありがとうございます。
    それのことではないです。
    このIDで公開している日記がありますが、それとは別のIDで未公開の日記をつけていて、そちらのテンプレートの質問なのです。
    ややこしくて申し訳ありません。
    そちらの日記では、タイトル名を空白にしているからなのか、すべてのタイトルに■が自動で挿入されてしまっています。

    <h3><a href="" name=""><span class="sanchor">■</span></a>[<a href="" class="sectioncategory"></a>] <span class="timestamp"></span></h3>

    このように・・・。

    この<span class="sanchor">■</span>
    内の■を画像に変えようとしています。
  • id:rouge_2008
    回答に提示したコードで上手くいかない場合は、使用しているデザイン名を教えてください。
  • id:yumehashi
    再度ありがとうございます。
    画像が表示されないようです。
    使用しているデザインは、(タイトル未設定)です。
    新しいデザインを作るで設定されるものです。
  • id:rouge_2008
    画像が小さくて■の後ろに隠れて見えないという状態でしょうか?
    「h3.title a {」を「.body h3.title a {」としてみてください。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません