^サイトです。
http://www.tumblr.com/docs/en/custom_themes#posts < --ドキュメントはこちら
質問：
わかりましたので、リンクに移動して写真の投稿 (フォトセットではなく、個々の写真) をクリックすると、小さなライトボックスが作成されました。
画像の幅を上部に比例してスケーリングできないのはなぜですか。基本的に、すべての画像が常に画面に収まるように、下部に X、キャプション、およびそのテキスト行に十分なスペースを確保しようとしています... 何か考えはありますか?
コードがあります -->
<html>
<head>
<title>{Title}</title>
<divnk rel="shortcut icon" href="{Favicon}">
<divnk rel="alternate" type="appdivcation/rss+xml" href="{RSS}">
<link href='http://fonts.googleapis.com/css?family=Signika:400,300' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400' rel='stylesheet' type='text/css'>
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
</script>
<style>
body {
color:#A9D6D9;
font-family: 'Signika', sans-serif;
background: url(http://i.imgur.com/Obc50Hk.jpg);
background-size: 100%;
font-family: 'Quicksand', sans-serif;
}
h1 {
font-family: {TitleFont}, "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
}
h2, .attribution-tags {
font-family: 'Quicksand', sans-serif;
}
.sub-title {
width: 100%;
}
h1 {
color: cyan;
font-size: 60px;
font-weight: bold;
text-shadow: #1abc9c 0 0 1px,
#19B394 0 4px 3px,
#1AAD90 0 5px 3px,
#16a085 0 5px 1px,
cyan -14px 1px 300px,
cyan -16px 1px 300px,
cyan -22px 2px 300px;
transition: all 1s ease;
}
h1:hover {
color: white;
text-shadow: #1abc9c 0 0 1px,
#19B394 0 4px 3px,
#1AAD90 0 5px 3px,
#16a085 0 5px 1px,
cyan 5px 1px 1px,
cyan 6px 1px 1px,
red -6px 2px 1px;
}
.floattyh
{
position: fixed;
top:14px;
right:-40px;
opacity: .6;
z-index:1000000000000;
}
.floattyh2
{
position: fixed;
top:94px;
right:-40px;
opacity: .6;
z-index:1000000000000;
}
.floattyh:hover, .floattyh2:hover {
right:-30px;
}
.transport
{
position: fixed;
top:65%;
right:-140px; opacity: .6;
z-index:1000000000000;
}
.transportleft
{
position: fixed;
top:65%;
left:-140px; opacity: .6;
text-align: right;
z-index:1000000000000;
}
.footer, #footer {
position: absolute;
bottom:0px;
width:100%;
margin: auto;
right: 70%;
opacity: .6;
}
.the_head {
margin: auto:
text-align: center;
BACKGROUND: URL(http://i.imgur.com/0vf1t2M.jpg);
PADDING-TOP:200PX;
padding-bottom: 30px;}
.textualpleasure, h1 {
margin: auto;
width: 100%;
TEXT-ALIGN: CENTER;
}
.LEFT {
MARGIN-LEFT:-10px;
text-align: right;
BACKGROUND: black;
width: 70%;
-webkit-border-radius: 44px;
-moz-border-radius: 44px;
border-radius: 44px;
-webkit-border-bottom-left-radius: 0;
-moz-border-bottom-left-radius: 0;
-border-bottom-left: 0;
-webkit-border-top-left-radius: 0;
-moz-border-top-left-radius: 0;
-border-top-left: 0;
opacity: .5;
PADDING:35PX;
box-shadow: inset 1px 3px 3px cyan;
}
.RIGHT {
MARGIN-left:200px;
text-align: left;
opacity: .5;
BACKGROUND: black;
-webkit-border-radius: 44px;
-moz-border-radius: 44px;
border-radius: 44px;
-webkit-border-bottom-right-radius: 0;
-moz-border-bottom-right-radius: 0;
-border-bottom-left: 0;
-webkit-border-top-right-radius: 0;
-moz-border-top-right-radius: 0;
-border-top-left: 0;
PADDING:35PX;
box-shadow: inset 1px 3px 3px red;
}
h1 a,
.load-more,
.exposed-nav-wrapper li a,
.sub-title,
.search-header {
color: {TitleColor};
}
.h-line {
background: {TitleColor};
}
a {
color: {LinkColor};
}
body {
MARGIN: AUTO;
width:100%
}
#posts {
margin: atuo;
}
h2 {
BACKGROUND: black;
-webkit-border-radius: 44px;
-moz-border-radius: 44px;
border-radius: 44px;
PADDING: 20PX;
box-shadow: inset 3px 2px 0px red;
font-size: 20px;
width: 300px;
margin-top: 100px;
margin: auto;
}
h2 a {color: white}
.posts{
margin-top:100px;
text-align: center;
}
.row {
margin: auto;
text-align: center;
padding-left: 100px;
}
.post{
background: white;
width:300px;
height: 300px;
float: left;
padding: 10px;
overflow: hidden;
margin:auto;
/*
position: relative;
text-align: center;
*/
}
.post img,.caption {
width:90%;
}
.griddy {
width: 90%;
margin: auto;
}
.hider_seeker {
display:none;
}
.clickit_boy {
}
</style>
<script>
$('.floattyh2').click(function(){
$('.hider_seeker').toggle('slow');
})
/* $("postcontainer").parent(".post").css("background", "yellow");
*/
</script>
<style>
.postcontainer {
/*
transform: scale(.2,.2);
-ms-transform: scale(.2,.2);
-webkit-transform: scale(.2,.2); */
}
</style>
</head>
<!-- Start of Tumblrbox Code -->
<body>
<div class="floattyh">
<h2>
<a href="http://en.wikipedia.org/wiki/Anaglyph_3D" target="_blank">What's an anaglyph?</a>
</h2>
</div>
<div class="floattyh2">
<h2>
<span onclick="$('.hider_seeker').show('slow'); window.scrollTo(1, 300);;">About this stuff.</span>
</h2>
</div>
<div class='the_head'>
<h1>THE ASTONISHING 3D ART OF<BR> WILL DELPHIA<br><br></h1>
<div class="hider_seeker scaled">
{block:Description}
<p id="description">{Description}</p>
{/block:Description}
</div>
</div>
<div id="posts" class="row">
{block:Posts}
{block:Text}
<div class="post text col-lg-3">
{block:Title}
<h3><a href="{Permadivnk}">{Title}</a></h3>
{/block:Title}
{Body}
</div>
{/block:Text}
<style>
.photoset , .photo, .video, .Audio, .text, .quote {
margin: 20px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
.photo_thatis_hover {
width:100%;
height: 80%;
position: fixed;
top: 0px;
left:0px;
display: block;
padding-top: 200px;
-moz-box-shadow: 0 12 10px #000000;
-webkit-box-shadow: 0 12 10px #000000;
box-shadow: 0 12 10px #000000;
z-index: 10000000;
text-align: center;
}
.the-black-back {
display: none;
position: fixed;
top:0px;
left:0px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.9);
z-index: 100;
}
.closeit {
position: relative;
background-color: black;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
z-index: 1000000000000000000000000000000000000000000000000000;
font-size: 50px;
text-align: center;
padding: 20px;
margin:auto;
margin-top: -70px;
margin-bottom: 5px;
text-shadow: #1abc9c 0 0 1px,
#19B394 0 4px 3px,
#1AAD90 0 5px 3px,
#16a085 0 5px 1px,
cyan -14px 1px 300px,
cyan -16px 1px 300px,
cyan -22px 2px 300px;
transition: all 1s ease;
width: 100px;
}
.closeit:hover {
position: relative;
background-color: #33bfb3;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
z-index: 1000000000000000000000000000000000000000000000000000;
font-size: 50px;
text-align: center;
padding: 20px;
margin:auto;
margin-top: -70px;
margin-bottom: 5px;
text-shadow: #1abc9c 0 0 1px,
#19B394 0 4px 3px,
#1AAD90 0 5px 3px,
#16a085 0 5px 1px,
cyan -14px 1px 300px,
cyan -16px 1px 300px,
cyan -22px 2px 300px;
transition: all 1s ease;
width: 100px;
}
}
.griddy_up {
margin: auto;
}
.theimage {
margin: auto;
}
</style>
{block:Photo}
<div class="post photo col-lg-3">
<div class="postcontainer">
<img class="griddy" src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
<script>
$(".griddy").click(function(){
$(this).siblings(".photo_thatis_hover").show();
$(this).siblings(".the-black-back").show();
});
</script>
<div class="the-black-back"></div>
<div style="display:none" class="photo_thatis_hover" >
<img class="theimage" height="500px" width="" src="{PhotoURL-500}" alt="{PhotoAlt}"/>
<p align="center"><div class="closeit">X</div><br><br>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
<br><span style="font-size: 10px">want to order prints of this photo? contact me at willdelphia (at) gmail...</span></p>
<script>
$(".closeit").click(function(){
$(".photo_thatis_hover").hide();
$(".the-black-back").hide();
});
$(".the-black-back").click(function(){
$(".photo_thatis_hover").hide();
$(".the-black-back").hide();
});
</script>
</div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
</div>
{/block:Photo}
{block:Panorama}
<div class="post panorama col-lg-3">
<div class="postcontainer">
{divnkOpenTag}
<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
{divnkCloseTag}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
</div>
{/block:Panorama}
{block:Photoset}
<li class="post photoset">
{Photoset-250}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption} {ReblogButton size="20"}
</li>
{/block:Photoset}
{block:Quote}
<div class="post quote col-lg-3">
<div class="postcontainer">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</div>
</div>
{/block:Quote}
{block:divnk}
<div class="post divnk col-lg-3">
<div class="postcontainer">
<a href="{URL}" class="divnk" {Target}>{Name}</a>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
</div>
</div>
{/block:divnk}
{block:Chat}
<div class="post chat col-lg-3">
{block:Title}
<h3><a href="{Permadivnk}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:divnes}
<div class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{divne}
</div>
{/block:divnes}
</ul>
</div>
{/block:Chat}
{block:Video}
<div class="post video col-lg-3">
<div class="postcontainer">
{Video-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
</div>
{/block:Video}
{block:Audio}
<div class="post audio col-lg-3">
<div class="postcontainer">
{AudioPlayerBlack}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
</div>
{/block:Audio}
{/block:Posts}
</div>
<div class="transportleft">
{block:PreviousPage}
<h2> <a href="{PreviousPage}">« Previous</a></h2> {/block:PreviousPage}
</div>
<div class="transport">
{block:NextPage}
<h2> <a href="{NextPage}">Next »</a> </h2>
{/block:NextPage}
</div>
<div id="footer">
{block:PreviousPage}
{/block:PreviousPage}
{block:NextPage}
{/block:NextPage}
<a href="/archive">Archive</a>
</div>
<style>
.scootch {
left: -120px;
}
</style>
</body>
</html>