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 でどの様にプログラミングをしたらいいのでしょうか？

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