『ボヘミアン・ラプソディ』はなぜ人々を魅了したのか >>

gooブログを使っています。

ブログのタイトルの文字列をクリックするとブログトップに飛ぶようになっていますが

カスタムテンプレートのCSSの編集で(HTMLではなく)
ヘッダーのタイトル画像をクリックして同じようにブログトップへ飛ぶようにリンクを付けたいのですが
どのように指定すれば良いのでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (4件)

あ、No.3です。

補足です。

No.3で書いたように、書き換える箇所には、トップページへのリンクは書かれてませんね。

No.1さん、No.2さんがおっしゃるように、スタイルシートだけでリンクを設定することはできません。

何故できるかというと、gooブログが、「スタイルシートさえ書き換えれば、タイトルを画像にして、かつ画像をクリックすればテキストと同じくトップページにリンクできる」ように、あらかじめHTMLを書いてくれているためです。
    • good
    • 0

できますよ。


gooブログの「カスタムブルー」の場合は以下のとおりです。

/* ブログのタイトル */
.bTitle {
color: #******;
font-size: **px;
overflow: hidden;
display: none;
}

/* ブログタイトルのリンク(<a href="#" class="etTitleLink">で使用) */
.bTitleLink {
width: ***px;
height: **px;
background-repeat: no-repeat;
background-image: url("http://**タイトル画像**");
display: block;
text-decoration: none;
}

「***」の箇所には適当な数値を入れてください。
    • good
    • 0

CSSとは見栄えを定義するための物であり、HTMLの代用を行うものではありません。


よってCSSで画像にリンクを貼り付けることは不可能です。
    • good
    • 0

CSSはスタイルの設定をしますが、リンクの設定はできなかったように思います。

    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qリンクの下線を消したいのに消せない(CSS)

自分でタグを入力して、XHTMLとCSSでサイトを作っているのですがどうしても解決できない問題があるので質問させていただきます。

サイトの各ページに飛ぶテキストリンクをページの上部に作っていて、そのリンクを

・通常時(a:link)は・・・・・・・・下線なし
・訪問後(a:visited)は・・・・・・・下線なし
・マウスオーバー時(a:hover)は・・・下線あり

というふうにしたいので、CSSに書いたのですがどの場合においても下線が表示されてしまいます。

CSSをどのように書き直せば、上記のように下線が表示されるのでしょうか教えてください。

XHTML:http://love.meganebu.com/~twilight/question/index.html

CSS:http://love.meganebu.com/~twilight/question/mainstyle.css

Aベストアンサー

このあたりのサイトが参考になるかと。
http://www.tagindex.com/stylesheet/link/text_decoration.html

Qスタイルシートの外部ファイルでリンク先を指定できますか

外部ファイル読み込みによるスタイルシートを
作成する予定です。
(今まではエディタでHTMLタグを打って
ホームページを作成していました)

セレクタでCLASSを使って、
色などを指定することは分かりますが、
この要領で、リンク先を指定することはできますか?

よく、ホームページのページ構成で、
入り口から、いくつかのコンテンツに行く形のとき、
それぞれのコンテンツのページ上に他のコンテンツへのリンク先を
つけているレイアウトがよく見られますよね。

私もこのレイアウトをとっているのですが、
リンク先のひとつのレンタル掲示板が都合で何度も変わりました。
その都度、掲示板のリンク先を載せているページのソースを
書き換えました。

そこで、CLASSでの色などの指定ができるのなら、
リンク先も指定してしまえば、外部ファイルにして、
リンク先を変更しなければならなくなったときに、
外部ファイルだけにリンク先を変更するだけですむのでは?
と思いました。
しかし、参考書には色や背景などについてなら載っているのですが、
リンク先については書かれていませんでした。
無理でしょうか?

よろしくお願いします。
「最新スタイルシート辞典」(初版)を読んでいます。

外部ファイル読み込みによるスタイルシートを
作成する予定です。
(今まではエディタでHTMLタグを打って
ホームページを作成していました)

セレクタでCLASSを使って、
色などを指定することは分かりますが、
この要領で、リンク先を指定することはできますか?

よく、ホームページのページ構成で、
入り口から、いくつかのコンテンツに行く形のとき、
それぞれのコンテンツのページ上に他のコンテンツへのリンク先を
つけているレイアウトがよく見られますよね。

私もこのレイアウト...続きを読む

Aベストアンサー

こんにちは。

CLASSでの詳しい事は分かりませんが、
それでしたら、
一度ダミーファイルを作ってそこへリンクさせればどうですか?
そして、そのダミーファイルからセコンド0にて掲示板などへ転送させちゃうんですよ。

これでしたら、
ダミーファイルの転送先URLを書き換えるだけで済みますし。

都度、CLASSを書き換えるのと作業的には同じでしょう。

私はこういう方法で今までやってきました。

Q背景画像をリンクにする?

タイトルの通りなのですが、よくブログなどにある、headerの部分を画像にしてtopへのリンクを張る方法が分かりません。
例えば森永卓郎さんのブログだと、タイトルの「つながるモリタクBLOG」の部分にリンクが張ってあり
ブログのトップページに移動するようになっていますが、このクリックできる範囲を広げて、
緑色の背景画像の部分をクリックしても同じく移動できるように指定することはできませんでしょうか?
単に画像にリンクを張るだけならできますが、背景にしてみたところ詰まってしまいました…。
よろしくお願いいたします。

Aベストアンサー

背景とタイトルを別に考えないで、背景も含めた大きな1枚の画像にしたらどうですか?
<a href=""><img src="" alt="タイトル" widht="500" height="50"></a>

もしくはスタイルシートで範囲を指定するか
a#header{
display: block;
margin: 0px;
padding:0px;
width: 500px;
height: 50px;
}

<a href="" id="header">タイトル</a>

QCSSのtext-decoration: none;が効かない

こんにちは。
CSSでリストタグ内のリンクのアンダーラインを消すために、

.side_menu li {
line-height: 100%;
border-bottom: 1px solid #FFFFFF;
}
.side_menu a {
display: block;
padding-left: 30px;
background: #FFFFFF;
width: 160px;
text-indent: -17px;
text-decoration: none;
}
.side_menu a:hover {
background: #BDE2F7;
text-decoration: none;
}

としました。
作業しているうちに、きちんと消えていたリンクのアンダーラインが付いているのに気づきました。
すべてにではなく、数行なのです。付いてないところもあります。
htmlにゴミが入ってるのかと思い、再入力したのですがなぜか傷が広がります。
こんな現象って・・・?
text-decoration: none;を効かせるには、どう対処すればいいのでしょうか?
よろしくお願いします。

こんにちは。
CSSでリストタグ内のリンクのアンダーラインを消すために、

.side_menu li {
line-height: 100%;
border-bottom: 1px solid #FFFFFF;
}
.side_menu a {
display: block;
padding-left: 30px;
background: #FFFFFF;
width: 160px;
text-indent: -17px;
text-decoration: none;
}
.side_menu a:hover {
background: #BDE2F7;
text-decoration: none;
}

としました。
作業しているうちに、きちんと消えていたリンクのアンダーラインが付いているのに気づきました。
すべてに...続きを読む

Aベストアンサー

質問文に挙げられていない部分のCSSの記述が影響しているのかもしれません。
他のリンクに付けたつもりのtext-decoration:underline;が効いてしまっているとか。

念のために次のように書いておいてみてはどうでしょうか?
.side_menu a:link {text-decoration: none;}
.side_menu a:visited {text-decoration: none;}
.side_menu a:hover {background: #BDE2F7;text-decoration: none;}
.side_menu a:active {text-decoration: none;}
※ :link~ :activeまでの順序も大事です。

QCSSで指定した背景画像にリンクエリアを設定する方法。

メインビジュアルとしてCSSで背景画像として指定したものの中にリンクエリアを作って、そこの部分だけにマウスをもってきた時に、リンク先に飛ぶようにしたいのですが、毎回firefox, IE7,IE6でのmargin, padding,の違いに四苦八苦してます。
大抵は、margin-topを違うブラウザ用にpadding-topにして、*htmlや、*:first-child+html等のハックでカバーしてたりするのですが、今回はそれでもうまくいかず、どなたか教えて頂けたらと質問させて頂きました。

以下CSSのソースです。

#main_visual {
background:url(../img/main_visual.jpg) no-repeat;
width:666px;
height:418px;
text-indent:-9999px;
}

#main_visual a{
  display:block;
width:338px;
height:43px;
  position:relative;
top:324px;
left:308px;
}

上のように、666 X 418の画像の中に、
上から324px 左から308pxの位置に大きさ338 X 43のリンクエリアをつくリたいのですが、、上記だと、IE7 IE6ではうまくいくみたいですが、
firefoxとsafariだと、positionが全くきかず左上の位置(top:0 left:0)にリンクエリアがきてしまってます。。

どのようにリンクエリアを指定するのが最もスマートな方法なのでしょうか? 毎回悩んでます。。ちなみに、*:first-child+html このIE7用のハックってまだ使えたりするんでしょうか?^^;

メインビジュアルとしてCSSで背景画像として指定したものの中にリンクエリアを作って、そこの部分だけにマウスをもってきた時に、リンク先に飛ぶようにしたいのですが、毎回firefox, IE7,IE6でのmargin, padding,の違いに四苦八苦してます。
大抵は、margin-topを違うブラウザ用にpadding-topにして、*htmlや、*:first-child+html等のハックでカバーしてたりするのですが、今回はそれでもうまくいかず、どなたか教えて頂けたらと質問させて頂きました。

以下CSSのソースです。

#main_visual {
backgrou...続きを読む

Aベストアンサー

ANo.2です。
お役に立てた様で良かったです。

> あと、htmlのほうは、
> <div id="main_visual"><!--MAIN VISUAL-->
> <a href="https://www.rink.com">ここに文言が入ってます。</a>
> </div><!--MAIN VISUAL-->
>
> これだけのシンプルなもんです。。

そうでしたか。であれば、他の方のご指摘にもありますが、マークアップはulでされた方が妥当でしょうね。
ANo.2でのスタイルを、ulでマークアップする場合はちょっとした変更を加えるだけでOKです。
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
(省略)
<body>
<p>リンクより上のブロック</p>

<ul id="main_visual">
<li><a href="#">ここに文言が入ってます。</a></li>
</ul>

<p>リンクより下のブロック</p>
</body>
(省略)
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
ul#main_visual {←"ul"はなくてもいいです(以下同)
position: relative;
background: url(../img/main_visual.jpg) no-repeat;
width: 666px;
height: 418px;
list-style: none;
margin: 0;
padding: 0;
}
ul#main_visual li {
position: absolute;
top: 324px;
left: 308px;
width: 338px;
height: 43px;
}
ul#main_visual a {
display: block;
width: 100%;
height: 100%;
text-indent: -9999px;
}
---------------------------------------------------------------------

ANo.2からの変更点は:

・#main_visualをulのマークアップに都合がよい様にディフォルトのリストスタイルや余白をリセット
・aをliの子要素とする為、位置決めや縦横サイズはliで指定
・aには親要素の幅と高さを継承させる

だけです。リンクエリアとしている背景画像の部分には当然リンク箇所である事がわかる様な文言が明示されているなり、クリックを誘導する様なボタン的デザインがされているものと想定しています。

ANo.2です。
お役に立てた様で良かったです。

> あと、htmlのほうは、
> <div id="main_visual"><!--MAIN VISUAL-->
> <a href="https://www.rink.com">ここに文言が入ってます。</a>
> </div><!--MAIN VISUAL-->
>
> これだけのシンプルなもんです。。

そうでしたか。であれば、他の方のご指摘にもありますが、マークアップはulでされた方が妥当でしょうね。
ANo.2でのスタイルを、ulでマークアップする場合はちょっとした変更を加えるだけでOKです。
------------------------------------------...続きを読む

QjQueryのアコーディオンメニューで、他をクリックした際に自動で閉めたい。

JavaScript、CSS初心者のものです。
今回、jQueryのアコーディオンメニューを使用しているのですが、現状ではクリックするとメニューはうまく開くのですが、他をクリックした際にはじめにクリックした箇所が開いたままになってしまいます。
これを自動で閉じ、常に最新のクリックしたメニューのみ表示するにはどうすればよいのでしょうか?
お手数ですが、ご教示お願いします。

以下ソースを載せておきます。

◆javascript◆
<script type="text/javascript">
$(function()
{
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function(i)
{
var elementVal = $(this).next("div");

$(this).click(function()
{
elementVal.toggle("fast");
});
});
});
</script>

◆HTML◆
<div id="simpleAccordion">
 <h1>画像の箇所</h1>
 <h2><a href="#">クリックする箇所</a></h2>
 <div>クリックされると開く箇所</div>
 <h2><a href="#">クリックする箇所</a></h2>
 <div>クリックされると開く箇所</div>
</div>

JavaScript、CSS初心者のものです。
今回、jQueryのアコーディオンメニューを使用しているのですが、現状ではクリックするとメニューはうまく開くのですが、他をクリックした際にはじめにクリックした箇所が開いたままになってしまいます。
これを自動で閉じ、常に最新のクリックしたメニューのみ表示するにはどうすればよいのでしょうか?
お手数ですが、ご教示お願いします。

以下ソースを載せておきます。

◆javascript◆
<script type="text/javascript">
$(function()
{
$("#simpleAccordion div"...続きを読む

Aベストアンサー

#1です。

最初の1行目で、サブメニューを閉じて(=非表示にする)いるので、それをコピペすればよいだけでは?
自作ではなかったのかな?

$(function()
{
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function(i)
{
var elementVal = $(this).next("div");

$(this).click(function()
{
$("#simpleAccordion div").hide(); //←1行追加
elementVal.toggle("fast");
});
});
});
(これだと、トグルでクリックして閉じるようにはならないので、トグルを生かしたいのなら、自分以外を閉じるようにする必要あり)


ついでにちょっとだけコンパクトにして、不用のiを削除すれば

$(function() {
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function() {
$(this).click(function() {
$("#simpleAccordion div").hide();
$(this).next("div").toggle("fast");
});
});
});

#1です。

最初の1行目で、サブメニューを閉じて(=非表示にする)いるので、それをコピペすればよいだけでは?
自作ではなかったのかな?

$(function()
{
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function(i)
{
var elementVal = $(this).next("div");

$(this).click(function()
{
$("#simpleAccordion div").hide(); //←1行追加
elementVal.toggle("fast");
});
});
});
(これだと、トグルでクリックして閉じるようにはならないので、トグルを生かしたいのなら...続きを読む


人気Q&Aランキング