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
どうしたらこうなるのでしょう？
お分かりの方よろしくお願いします。
No.1
595
351
こちらでは「<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>
この場合はスタイルシート欄に次のように追記してみてください。
【修正済み】
3
0
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>
1
1
1
コメント（5件)
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で公開している日記がありますが、それとは別のIDで未公開の日記をつけていて、そちらのテンプレートの質問なのです。
ややこしくて申し訳ありません。
そちらの日記では、タイトル名を空白にしているからなのか、すべてのタイトルに■が自動で挿入されてしまっています。
<h3><a href="" name=""><span class="sanchor">■</span></a>[<a href="" class="sectioncategory"></a>] <span class="timestamp"></span></h3>
このように・・・。
この<span class="sanchor">■</span>
内の■を画像に変えようとしています。
画像が表示されないようです。
使用しているデザインは、（タイトル未設定）です。
新しいデザインを作るで設定されるものです。
「h3.title a {」を「.body h3.title a {」としてみてください。