人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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


●質問者: yumehashi
●カテゴリ:はてなの使い方 ウェブ制作
✍キーワード:background-image background-position background-repeat COLOR FFF
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rouge_2008

こちらでは「<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>
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ