2

Lightbox2 で小さい画像をクリックして下の画像のように大きく表示させるまではできました。しかし、本来は赤丸の内部にキャプチャを表示させたいですし、 "Go to blog!" のフォントは "Taro Yamada" より小さくしたいです(それぞれフォントサイズをコントロールできるようにしたいです)

picture

現状のプログラムは以下のとおりです。

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">

<title>Welcome to Web Site </title>

<link href="boilerplate.css" rel="stylesheet" type="text/css">

<style type="text/css">
a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFFFFF;
}
a:hover {
    text-decoration: none;
    color: #ADFFE9;
}
a:active {
    text-decoration: none;
}
</style>

<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css">

<!-- 
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build 
-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script>


<script type="text/javascript" src="lightbox/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="lightbox/js/lightbox.min.js"></script>

<script type="text/javascript" src="jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>


<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/alike:n4:default.js" type="text/javascript"></script>
<script src="jquery-1.11.2.min.js"></script>

</head>

  <body>

                 <div class="acc-btn">
                      <div class="btn-picture"><img src="icon/weare2.png"></div>
                      <div class="btn-font"> We are</div>
                      </div> <!--end acc-btn-->

                          <div id="acc_contents_we-are">

                              <img src="images/we-are-picture-png.png">

                                <h2>Staff</h2>



                                            <a rel="lightbox" href="ty.png" title="Taro Yamada (<a TARGET='_blank' href='http://aaa.biz/wp/'>Jump to Blog!</a>)">
                                            <img src="ty11.png" alt="" />
                                            </a>


                          </div>
</body>
</html>

一部改定しておりますが、おおむねこのような感じです。
ただ、Lightbox2 の <a> タグはこのままです。

CSS でどの様にプログラミングをしたらいいのでしょうか?

よろしくお願いいたします。

1
  • Lightbox2のバージョンはいくつですか? 本家のサンプルと書き方が違う気がするのですがこれで動作しますか? ちなみにこのようなプラグインは星の数ほどあり、使ったことのある人は限られるため、回答をする人の環境でも動くようなソースを書いた方が回答を得られやすいです。
    – kotatsu
    2015年1月30日 1:41

1 件の回答 1

1
<style>
.hogehoge {
   font-size: 12px; /* お好きなサイズ */
}
</style>

<a rel="lightbox" href="ty.png" title="Taro Yamada (<a TARGET='_blank' href='http://aaa.biz/wp/' class='hogehoge'>Jump to Blog!</a>)">
  <img src="ty11.png" alt="" />
</a>

子要素のaタグにCLASSを付けてあげればサイズの変更は可能ではないでしょうか?
位置に関しましては、親要素の箱などにかけられているプロパティにより変わってくると思います。
もう少し詳しい情報があれば実際に記述できると思うのですが、手っ取り早くお済ませになりたいのでしたらposition:absolute;やposition:relative;を用いるのはどうでしょうか?
テストは行っておりませんので、動かない場合は申し訳ございません。

3
  • ありがとうございます! まずはやってみます!
    – webman
    2015年1月30日 2:34
  • フォントサイズは変更できました!すばらしい!! 後はポジションですね。 ちょっといじってみます。 そして、ソースをアップさせていただきます
    – webman
    2015年1月30日 2:40
  • 同じclass='hogehoge'にpositionプロパティを指定してあげれば動くと思います。 詳しくコードがわかればもっといい方法が出てくると思います。 2015年1月30日 3:46

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。