たぶんCSSの質問です。

phpでHTMLコードを作成して他人のブログに張ってもらおうと考えており、Wordpressで作った自分のブログでテストしています。
http://q.hatena.ne.jp/1429708544
の続きのようなものですが、今回はある事情でiFrameを使いません。

<a href="#" style="text-decoration:none;margin:0;padding:0;">i</a>
としますがiマークに下線が表示され、グレーの四角から少しはみ出しています。
画像左上のiマークの位置がずれているのを正常な位置(グレーの四角)に収めることと、iマークの下線を表示したくないのですが何かいい方法はありますか?

サンプルをアップしました。
http://neoregi.com/wp/?p=6
<p class="adtest-box">…</p>を含む部分が、PHPで作成したHTMLコードです。
よろしくお願いします。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2015/06/03 17:10:12
  • 終了:2015/06/04 00:55:33

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4545ベストアンサー獲得回数18952015/06/03 18:35:52

ポイント100pt

アンダーラインは、style.css の 1721 行目の .entry-content a に border-bottom を指定してるのが効いています。
位置がずれるのは、小文字の i は、フォントとして行の高さ方向に上に隙間があることが大きいのかな、と思います。
i を持っている A 要素に以下のスタイルを指定します。

    /* 下線 */
    border-bottom: none;

    /* 位置 */
    display: inline-block;
    position: absolute;
    width: 1em;
    height: 1.5em;
    top: -6px;
    left: 0;

f:id:a-kuma3:20150603183448p:image
高さ方向は、i の上に隙間があるので、大きめに高さを取って上に少しだけずらします。
A 要素は、それを囲んでいる DIV.adtest-link の幅と合わせておかないと、クリックできる場所が i の幅だけになっちゃう(狭いっ!)ので、inline-block にして幅を合わせてます。

# 位置合わせは、ちょっと無理矢理かな...

他1件のコメントを見る
id:a-kuma3

ブラウザというか、それが使ってるフォントによって微妙に位置は変わると思うので、ぴたっと納めるなら画像を使った方が良いんじゃないかなと思います。
2色だったら、そう大きくはならないし、外部のファイルを増やすのが嫌だ、ということであれば、データスキームURI という方法もありますし。

2015/06/03 21:44:01
id:wsapp

iマークを画像に変えてみました。
こっちの方がいいです。
ありがとうございました。
あとで、データURIスキームというのにも挑戦してみます。

2015/06/04 00:55:16

その他の回答(1件)

id:fatena No.1

suinger回答回数126ベストアンサー獲得回数262015/06/03 18:23:58

ポイント100pt

▼iの下線を消す
border-bottom:0 を記載すると良いです
【変更前】

<a href="#" style="text-decoration:none;margin:0;padding:0;">i</a>

【変更後】

<a href="#" style="border-bottom:0;margin:0;padding:0;">i</a>

▼iを枠内に納める(グレー枠のサイズを広げて調整しました)
width: 1.5em;height: 1.5em;にするとよいです。
【変更前】

<div class="adtest-link" style="width: 1em;height: 1em;background:#eee;text-align:center;position:absolute;top:0;left:0;">

【変更後】

 <div class="adtest-link" style="width: 1.5em;height: 1.5em;background:#eee;text-align:center;position:absolute;top:0;left:0;">
id:wsapp

ご回答ありがとうございます。
無事希望通り表示されました。
"css a 下線消す"で検索すれば、text-decoration:none; ばかり目についたのでtext-decorationで消すものだとばかり思っていました。
border-bottom というのもあるのですね。
助かりました。
ありがとうございます。

2015/06/03 21:32:47
id:a-kuma3 No.2

a-kuma3回答回数4545ベストアンサー獲得回数18952015/06/03 18:35:52ここでベストアンサー

ポイント100pt

アンダーラインは、style.css の 1721 行目の .entry-content a に border-bottom を指定してるのが効いています。
位置がずれるのは、小文字の i は、フォントとして行の高さ方向に上に隙間があることが大きいのかな、と思います。
i を持っている A 要素に以下のスタイルを指定します。

    /* 下線 */
    border-bottom: none;

    /* 位置 */
    display: inline-block;
    position: absolute;
    width: 1em;
    height: 1.5em;
    top: -6px;
    left: 0;

f:id:a-kuma3:20150603183448p:image
高さ方向は、i の上に隙間があるので、大きめに高さを取って上に少しだけずらします。
A 要素は、それを囲んでいる DIV.adtest-link の幅と合わせておかないと、クリックできる場所が i の幅だけになっちゃう(狭いっ!)ので、inline-block にして幅を合わせてます。

# 位置合わせは、ちょっと無理矢理かな...

他1件のコメントを見る
id:a-kuma3

ブラウザというか、それが使ってるフォントによって微妙に位置は変わると思うので、ぴたっと納めるなら画像を使った方が良いんじゃないかなと思います。
2色だったら、そう大きくはならないし、外部のファイルを増やすのが嫌だ、ということであれば、データスキームURI という方法もありますし。

2015/06/03 21:44:01
id:wsapp

iマークを画像に変えてみました。
こっちの方がいいです。
ありがとうございました。
あとで、データURIスキームというのにも挑戦してみます。

2015/06/04 00:55:16

コメントはまだありません

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

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

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

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