1

テキスト内で Jquery スクリプトと Div を組み合わせて使用​​しています。Tumblr は、孤立したテキストの周りに自動的に段落を配置するため、リンクの後ろにスペースができます。これは、html モードで手動で削除しても発生します。

どうすればこれを解決できますか?どんな答えにもとても感謝しています。

私はそれを次のようにしたいと考えています: Lorem Ipsum は、印刷および植字業界の
単なるダミーテキストです。
リンク 1リンク 2

しかし、最終的には次のようになります。 Lorem Ipsum は、印刷および植字業界の
単なるダミーテキストです。リンク 1リンク 2

例を参照してください: http://roingbaer.com

tumblr が台無しにした後の HTML:

<p>Lorem Ipsum is simply dummy</p>
<div class="hover"><a href="http://example.com">text</a>
<div class="front"><img src="http://images.roingbaer.com/ludvig.png" /></div>
</div>
<p>, of the printing and typesetting industry.</p>
<div class="hover">Link 1
<div class="front"><img src="http://24.media.tumblr.com/tumblr_lyz7fjMdnN1rp3eymo1_r2_500.jpg" /></div>
<div class="back"><img src="http://24.media.tumblr.com/tumblr_lyz7fjMdnN1rp3eymo1_r2_500.jpg" /></div>
</div>
<p>,</p>
<div class="hover">Link 2
<div class="front"><iframe frameborder="0" height="233" src="http://www.youtube.com/embed/VMeXGE_a8Gg" width="400"></iframe></div>
<div class="back"><iframe frameborder="0" height="480" src="http://www.youtube.com/embed/VMeXGE_a8Gg" width="853"></iframe></div>
</div>

Javascript:

$(".front").each(function() {
 var right = Math.floor(Math.random()*800);
 var top = Math.floor(Math.random()*500);

 $(this).css({'margin-right': right});
 $(this).css({'margin-top': top});
});

hoverdiv = $("div.hover")

hoverdiv.on("hover", function() {
$(this).children(".front").show()
});
hoverdiv.on("mouseleave", function() {
$(this).children(".front").hide()
})
hoverdiv.on("click", function() {
$(this).children(".back").toggle()
$(this).children(".front").hide()
});

CSS

.back { 
display:none;
width:100%;
height:100%;
position:fixed;
top:0;
text-align:right;
}

.front
{ 
display:none;
max-height:200px;
max-width:auto;
position:fixed;
z-index:-50;
top:0;
right:100px;
}

.hover { 
cursor:pointer;
margin:0;
padding:0;
font-style:italic;
display:inline;
}

関連するTumblrコード:

<div id="content">
<!-- Loops for each post-type -->
{block:Posts}
  <div class="post {TagsAsClasses}">
    <div class="post-header">
{block:Text}
      <p class="post-metadata">
      </p>
    </div> <!-- end post-header -->

              <div class="text">
                        <h3>{Title}</h3>

      {Body}
    </div>
    {/block:Text}
4

0 に答える 0