5594


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

![picture](https://i.stack.imgur.com/NPiQm.png)

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

[code]

    <!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>
    
[/code]

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

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

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


CC BY-SA 3.0
2015-01-29T13:26:53.610
5577
2015-03-01T01:59:03.887
2015-01-29T13:33:10.590
4978
7647
question
css jquery
LightBox2 でキャプチャのサイズをそれぞれ指定などしたい

[code]

    <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>
    
[/code]

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


CC BY-SA 3.0
2015-01-30T01:49:41.863
5594
2015-01-30T01:49:41.863
7887
5577
answer