-7

この新しいテーマ ( http://soeststhemes.tumblr.com/casual ) を入手しましたが、残念ながらタグが表示されません。画像の上にカーソルを置いたときにタグを表示したいのですが、htmlでそれを行う方法を知っている人はいますか? このブログのようなもの: http://yixing.tumblr.com/ マウスを上に置くとタグが横に表示されます

4

1 に答える 1

2

このテーマにはタグがないため、タグを追加する必要があります。カスタム テーマの作成に関する tumblrの便利なガイドをご覧ください。

まず、構造用の HTML が必要です。これはタグの単純なセクションです。投稿にタグがある場合にのみ表示される div ボックスで、各タグへのリンクがスペースで区切られています。<div class="entry">これは、すべてのタイプの投稿に表示されるように、の各インスタンスの後に貼り付ける必要があります。

{block:HasTags}
 <div id="tags">
  {block:Tags}<a href="{TagURL}">{Tag}</a>&nbsp;{/block:Tags} 
 </div>
{/block:HasTags}

現在、CSS は、投稿にカーソルを合わせたときに表示および非表示にするだけでなく、書式設定するものでもあります。これは{CustomCSS}、テーマの CSS とともに、HTML コードの前に配置する必要があります。テーマに合わせてセクションをより流動的にするために、いくつかの行を追加しました。

#tags {
      /* Positions the tags section */
      position: absolute;
      bottom: 0px;
      left: 0px;
      /* Sets opacity to 0 to hide */
      opacity: 0;
      filter: alpha(opacity=0);
      /* Keeps the tags section over everything */
      z-index: 10;
      /* Extra: Width is the same as the post width */
      width: 100%;
      /* Extra: Background colour */
      background: white;
      /* Extra: Smooth transition (same as theme) */
      -webkit-transition: all 0.8s ease;
      -moz-transition: all 0.8s ease;
      transition: all 0.8s ease;
}

/* When hovering over .entry do this to #tags */
#entry:hover .tags {
      /* Opacity is maximum to show tags */
      opacity: 1;
      filter: alpha(opacity=100);
}

必要に応じて CSS を微調整するだけです。上または左の値を変更したり、右または下に変更したりできます。負の値も許可されます。

あなたが示したテーマを使用して、ここで私の例を見ることができます。

于 2013-05-15T06:10:14.967 に答える