0
XHTMLで作成したtumblrでsimple blogを実行します。自分のサイドバーを自分のコンテンツの横に配置します
ご覧のとおり、ブラウザの中央に1列（800ピクセル幅）の列があります。ブラウザのウィンドウをどのように拡大しても、ブログのコンテンツは中央にとどまります。私が今したいのは、このメイン列の右側に小さなサイドバーを追加することです。
自分でサイドバーを作成することができましたが、ブログの一番下にスクロールすると、サイドバーがコンテンツの下にあり、横にないことがわかります。私は自分のコンテンツの横にそれをどうやって手に入れますか？私は、CSSのコーディングと編集については何も言いませんが、私がこれまでに作ったものはすべて、既存のテーマをカスタマイズすることだけです。だから私は誰かが私を助けることを願っています！
大変申し訳ございませんが、私は自分自身を完全に明確にして、誰かが助けることができるようにしたいと思います。 確かに、私はあなたが探している結果を見ることができるようにフォトショップのスクリーンショットを追加しました。
例のスクリーンショット：
注：以下は
http://img94.imageshack.us/img94/5103/whatiwanto.jpg
は、コードで使用すると、配置（またはCSS）サイドバーの#rightside下とで、サイドバーの実際のコンテンツを見つけることができます下のコードの下に<div id="rightside">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!--
"Quite Big" theme designed by
| | |
_` | _ \ _ \ __| _` | _ \ _` | | | __ \ |/| _ \ | |
( | __/ ( | | ( | __/ ( | | | | | < | __/ | |
\__, |\___|\___/ _| \__, |\___| \__,_|\__,_|_| _|_|\_\_|\___|\__, |
|___/ |___/ ____/
http://www.tumblr.com/theme/3531
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Title" content="#000000"/>
<meta name="color:Text" content="#202020"/>
<meta name="color:Minor Text" content="#999999"/>
<meta name="color:Line" content="#EEEEEE"/>
<meta name="color:Link" content="#49D28D"/>
<meta name="color:Hover Link" content="#3FB67A"/>
<meta name="color:audio" content="#000000"/>
<meta name="color:TopLine" content="#eeeeee"/>
<meta name="color:BottomLine" content="#eeeeee"/>
<meta name="if:CenterAll" content="0"/>
<meta name="font:Heading" content="Futura"/>
<meta name="image:Header" content="0">
<meta name="if:Show notes on permalink pages" content="1">
<meta name="if:Show Album Art on Audio Posts" content="1" />
<meta name="if:Ask Enabled" content="0" />
<meta name="font:Description" content="Georgia"/>
<meta name="font:Body" content="Georgia"/>
<meta name="text:Disqus Shortname" content=""/>
<title>{Title}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
<link rel="shortcut icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<style type="text/css">
body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,dl,dt,dd,ul,ol,li,th,td,form,fieldset,legend,input,textarea, {margin:0;padding:0;}
html{font-size:14px;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
h1,h2,h3,h4,h5,h6{font-size:14px;font-weight:normal; padding:5px 0;}
abbr,acronym{border:0;}
body {background:{color:Background}; color:{color:Text}; font:1em/1.5 {font:Body}; margin:0 0 0 0;}
h1, h3 {font-family:{font:Heading};}
pre,code {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif}
a:link, a:visited {color:{color:Link}; text-decoration:none;}
a:hover, a:active {color:{color:Hover Link};}
#header {color:{color:Minor Text}; position:relative; margin:-49 auto; padding-top:25px; width:875px;}
#header h1 {color:{color:Title}; font-weight:bold; text-align:center; font-size:80px; line-height:65px; margin-bottom:15px; margin-top:-30px;
letter-spacing:-.05em;}
#header h1 a:link, #header h1 a:visited {color:{color:Title}; display:block;}
#header h1 a:hover, #header h1 a:active {color:{color:Hover Link};}
#description {font-family:{font:Description}; font-size:12px; text-align:center; line-height:16px; margin-bottom:20px; margin-top:-5px;}
#header form {margin-bottom:20px;}
#header form input {width:630px;}
#header ul {margin:0 -0.25em 1.5em;}
#header li {list-style:none; text-transform:lowercase;}
#header li a {background:{color:Background}; display:block; padding:0 0.25em;
text-decoration:none;}
#header li a:hover {background:none;}
#container {background-color:{color:Container}; margin:30px auto; padding-top:5px; width:875px}
#rightside {
margin: 0px auto;
position: relative;
left: 750px;
padding-top:0px;
width:240px;}
#posts {background-color:{color:Background}; border-top:1px solid {color:TopLine};
border-bottom:1px solid {color:BottomLine}; margin:0px; padding:0px; {block:IfCenterAll}text-align:center;{/block:IfCenterAll}font-size:14px;}
#posts .post {list-style:none; padding-bottom:10px; max-width:800px;
clear:both;}
#posts .content {color:{color:Text}; padding:0; margin-left:0px;}
#footer {margin:0 auto; max-width:800px; padding-bottom:30px;}
#pagination p {font-size:14px; min-width:150px; line-height:16px; margin:0 0 10px;
white-space:nowrap;}
#pagination p.back {display:inline; text-align:right; float:right; margin-left:20px;}
#pagination p.forward {display:inline; float:left; margin-right:1.5em;}
#pagination a {font-style:italic;}
#pagination .page {text-align:center; font:12px {font:Body};
margin-bottom:20px; text-transform:lowercase;}
#credits {clear:both; display:inline; text-align:center; font-size:12px; color:{color:Minor Text}; margin:0; padding:1.5em 0;}
#footer a:hover, #footer a:active {text-decoration:none;}
p {margin-bottom:25px;}
form .submit {height:0; overflow:hidden; display:block;}
.meta {float:left; clear:left; width:65px; {block:IfCenterAll}width:800px{/block:IfCenterAll}; font-size:14px; text-align:left; line-height:10px;}
.meta h2 {font-size:14px; margin-bottom:5px; border-bottom:1px solid {color:Line};}
.meta h2 a {text-decoration:none; display:block; padding:0px 0px;}
.meta h2 a:hover {background:none;}
.meta p {color:{color:Minor Text}; font-style:italic; margin:0 0 0 1em;
text-indent:-0.75em; text-transform:lowercase;}
p.meta {color:{color:Minor Text}; font-style:italic; margin:0;
width:150px; text-indent:-0.75em; text-transform:lowercase;}
.meta a {font-style:normal; white-space:nowrap;}
.meta .plays {font-weight:bold; font-style:normal;}
h3 {font-size:16px; line-height:20px; padding-bottom:10px; font-weight:bold;}
.content a {border-bottom:1px solid {color:Line};}
.content a:hover {border-bottom-width:2px;}
.content .photo a {border:none !important;}
.content ul, .content ol {margin:20px;}
.content ul li {list-style:square;}
blockquote {margin:0 20px 20px; font-style:italic;}
blockquote i, blockquote em, blockquote [lang="ja"] {font-style:normal;}
pre, code {font-size:14px; line-height:12px;}
pre {background:#e1e1e1; margin:15px; padding:10px;
overflow-x:auto;}
pre code {display:block;}
pre i, code i {font-style:normal; color:{color:Minor Text};}
ins {text-decoration:none; font-style:italic;}
blockquote ins, em ins, ins em {font-style:normal;}
abbr, acronym, .caps {font-size:12px; letter-spacing:0.1em; word-spacing:0.1em;}
abbr, acronym {text-transform:uppercase;}
.caps {text-transform:uppercase;}
.text, .caption {margin-bottom:20px;}
.post img, .post object, .post embed {max-width:100%;}
.link-post h3 {padding:0; margin-bottom:15px;}
.photo-post .photo, .video-post .video {margin-bottom:20px; margin-top:20px; }
.quote-post .quote {font-family:{font:Body};}
.quote-post .source, .cite
{float:right; margin:0 40px 20px 50px; text-indent:-1.5em;}
.quote-post .source a:first-child, .cite
{letter-spacing:0;}
.short-quote .quote, .medium-quote .quote
{font-size:14px; line-height:16px; margin:20px 40px 20px 0;}
.long-quote .quote {margin:20px;}
.audio-post .audio {height:27px; background: {color:audio};
display: block;
margin-bottom: 5px;
padding: 0px;}
.audio-post .audio_player {width:auto;}
.chat-post ol {list-style:none; margin:15px 0;}
.chat-post li {margin-left:1.5em; text-indent:-1.5em;}
.chat-post .label {font-weight:bold; padding-right:0.125em;}
.chat-post .speaker {font-style:italic;}
.chat-post .speaker2 .label, .chat-post .speaker4 .label,
.chat-post .speaker6 .label, .chat-post .speaker8 .label
{color:{color:Minor Text};}
.chat-post .speaker3 .label, .chat-post .speaker4 .label,
.chat-post .speaker7 .label, .chat-post .speaker8 .label
{text-transform:uppercase; letter-spacing:0.1em;}
.chat-post .speaker5 .label, .chat-post .speaker6 .label,
.chat-post .speaker7 .label, .chat-post .speaker8 .label
{font-family:{font:Heading};}
.day .month {text-transform:uppercase;}
{block:DayPage}.day {font-weight:bold;}{/block:DayPage}
.content.text-post img {
max-width: 100%;
}
.multi {margin-bottom:30px; margin-right:15px; {block:IfCenterAll}margin-right:10px; margin-left:10px;{/block:IfCenterAll};}
.inst {
background-color: #49d28d;
}
.video embed, .video object, .video iframe {width:800px; height:450px;}
#comment {
font-size: 14px;
text-align: left;
line-height: 18px;
margin: 0px 0px 0px 0px;
}
#comment a {
text-decoration: none;
color: {color:Caption};
}
#comment a:hover {
text-decoration: none;
color: {color:Link Hover};
}
#dsq-content {
background: rgba(0, 0, 0, .30);
background: url(' ');
padding: 5px 20px 20px 20px;
margin-top: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
{block:PermalinkPage}
p.answer_form_container { width: 512px; }
ol.notes { width: 800px; list-style-type: none; margin:20px auto; padding: 0; }
ol.notes li.note { background: #F7F7F7; margin: 0 0 0px 0; padding: 0 4px; }
ol.notes a { color: {color:Links In Notes}; }
ol.notes img.avatar { display: none; }
ol.notes blockquote { margin: 0; }
ol.notes blockquote a { text-decoration: none; }
{/block:PermalinkPage}
a.install {
width: 96px;
height: 20px;
background: url(http://static.tumblr.com/thpaaos/dHHkt0jor/install_theme.png);
display: block;
position: absolute;
top: 26px;
right: 3px;
}
a {
outline: none;
}
{CustomCSS}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://static.tumblr.com/xz44nnc/zNHlmnd4b/jquery.killphotoset.js"></script>
<script>
$(function() {
$(".html_photoset").killPhotoset({
photoSize: 1280
});
});
</script>
<script type="text/javascript">
<!--
function handleThis(formElm)
{
window.location="http://iloveyourvideo.tumblr.com/tagged/"+formElm.number.value+"";
return false;
}
// -->
</script>
</head>
<body>
<div id="container">
<div id="header">
<a href="/">
{block:IfHeaderImage}<h1><img src="{image:Header}" class="logo" /></h1>{/block:IfHeaderImage}
{block:IfNotHeaderImage}<h1>{Title}</h1>{/block:IfNotHeaderImage}</a>
{block:Description}<p id="description">
{Description}
</p>{/block:Description}
<p>
{block:IfCenterAll}<center>{/block:IfCenterAll}
{block:Pages}
<a class="multi" href="{URL}">{Label}</a>
{/block:Pages}
{block:IfAskEnabled}
<a class="multi" href="/ask">{AskLabel}</a>
{block:IfAskEnabled}
{block:IfCenterAll}</center>{/block:IfCenterAll}</p>
</div>
<ol id="posts"><br>
{block:Posts}
<li class="post" id="post{PostID}">
{block:Text}
<div class="meta">
{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}
</div><br><br>
<div class="content text-post">
{block:Title}<h3><span>{Title}</span></h3>{/block:Title}
<div class="text">{Body}</div>
</div>
{/block:Text}
{block:Photo}
<div class="meta">
{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}
</div><br>
<div class="content photo-post">
<div class="photo">
{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
<img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}">
{block:IndexPage}</a>{/block:IndexPage}
{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Photo}
{block:Photoset}
<div class="meta">
{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}
</div><br>
<div class="content photo-post">
<div class="photo">
{Photoset-500}
</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Photoset}
{block:Quote}
<div class="meta">
{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}
</div><br><br>
<div class="content quote-post {Length}-quote">
<blockquote class="quote">{Quote}</blockquote>
{block:Source}<div class="source">— {Source}</div>{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="meta">
{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}
</div><br><br>
<div class="content link-post">
<h3 class="link"><a href="{URL}">{Name}</a></h3>
{block:Description}<div class="caption">{Description}</div>{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="meta">
{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}
</div><br><br>
<div class="content chat-post">
{block:Title}<h3>{Title}</h3>{/block:Title}
<ol class="chat">
{block:Lines}<li class="{Alt} speaker{UserNumber}">
{block:Label}<span class="label">{Label}</span>{/block:Label}
<span class="line">{Line}</span>
</li>{/block:Lines}
</ol>
</div>
{/block:Chat}
{block:Video}
<div class="meta">
{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}
</div><br>
<div class="content video-post">
<div class="video">{Video-500}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Video}
{block:Audio}
<div class="meta">
{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}
</div><br><br>
{block:IfShowAlbumArtOnAudioPosts}
{block:AlbumArt}
<div class="album_art">
<img src="{AlbumArtURL}" alt="{block:Artist}{Artist}{/block:Artist}{block:TrackName} - {TrackName}{/block:TrackName}" style="margin-bottom: 5px"/>
</div>
{/block:AlbumArt}
{/block:IfShowAlbumArtOnAudioPosts}
<div class="content audio-post">
<div class="audio">
<script type="text/javascript" language="javascript" src="http://assets.tumblr.com/javascript/tumblelog.js?7"></script>
<span id="audio_player_{PostID}">[<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank">Flash 9</a> is required to listen to audio.]</span>
<script type="text/javascript" src="/api/read/json?id={PostID}"></script>
<script type="text/javascript">
var color = "FFF700";
var player = tumblr_api_read['posts'][0]['audio-player'].replace("color=FFFFFF", "color=" + color);
replaceIfFlash(9, "audio_player_{PostID}", player);
</script>
</div>
<p>plays: <span class="plays">{FormattedPlayCount}</span></p>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Audio}
<div class="clear"> </div>
</li>
{/block:Posts}
{block:IfDisqusShortname}
{block:Permalink}
<div id="disqus">
<div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script><noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">View the discussion thread.</a></noscript>
</div>
{/block:Permalink}
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}
</div> <!-- .box -->
{/block:Posts}
</div> <!-- .posts -->
<div style="clear: both"></div>
{block:PermalinkPage}
{block:IfShowNotesOnPermalinkPages}
{PostNotes}
{/block:IfShowNotesOnPermalinkPages}
{block:PermalinkPage}
<div style="clear: both;"></div>
<div id="rightside">
<div class="widget">
</div>
<p><a href="http://iloveyourvideo.tumblr.com/">I Love Your Video | 2012</a></p>
<p> <form onsubmit="return handleThis(this)">
<input type="text" name="number" />
<input type="submit" value="Search" />
</form> </p>
<p>Maybe some links
<a href="http://twitter.com/">twitter</a></br>
<a href="http://facebook.com/">facebook</a></br>
<a href="http://www.flickr.com/">flickr</a></br>
<a href="/">website</a></p>
<p><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpakhuis.dezwijger&width=240&height=258&colorscheme=light&show_faces=true&border_color=white&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:258px;" allowTransparency="true"></iframe></p>
<p>Advertisement</p>
<img src="http://i188.photobucket.com/albums/z152/dunkley2007/ad-2.png" border="0"</a>
</div>
</div>
</div><!--/rightside-->
</ol>
<div id="footer">
<div id="pagination">
{block:Pagination}
<p class="back"> {block:NextPage}
<a href="{NextPage}">next</a> >>>
{/block:NextPage}</p>
<p class="forward">{block:PreviousPage}
<<< <a href="{PreviousPage}">prev</a>
{/block:PreviousPage} </p>
{/block:Pagination}
{block:PermalinkPagination}
{block:PreviousPost}<p class="back">
<a href="{PreviousPost}">next</a> >>>
</p>{/block:PreviousPost}
{block:NextPost}<p class="forward">
<<< <a href="{NextPost}">prev</a>
{/block:NextPost}</p>
{/block:PermalinkPagination}
{block:DayPagination}
{block:PreviousDayPage}<p class="back">
<a href="{PreviousDayPage}">next</a> >>>
{/block:PreviousDayPage}</p>
{block:NextDayPage}<p class="forward">
<<< <a href="{NextDayPage}">prev</a>
</p>{/block:NextDayPage}
{/block:DayPagination}
</div>
<br><br />
<center>
<a href="/archive">archive</a> //
<a href="/random">random post</a> //
<a href="{RSS}">RSS</a>
<br />
<font size="2"><i>powered by <a href="http://www.tumblr.com/">tumblr</a> -
<a href="http://www.tumblr.com/theme/9601">Quite Big theme</a> by <a href="http://georgedunkley.tumblr.com/">George Dunkley</a></i></font></center>
</div>
</div>
</div>
</body>
</html>
同じ中心のコンテナにそれらを保持しながら、左側のメインコンテンツと右側の2次コンテンツをフロートします。 – powerbuoy