0

ワードプレスの「スライダーサイクル」プラグインで、各画像に大きな「テキストキャプション」（透明な黒）を重ねることに興味があります。

functions.php で、

function slideshow_featured_posts() {
    wp_reset_query();
    $featured = 1; // Assuming that the name of the category ID number 1 is "Featured".
    $count = 3; // How many post to be shown as slides. Ideally, it should be more than 3 posts.
    add_filter('excerpt_length', 'hook_excerpt_featured_length');
?>

<div class="list">
    <?php while (have_posts()) : the_post(); ?>
    <div class="item">
        <a class="image" href="<?php the_permalink(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>">
        <?php the_post_thumbnail('slideshow'); ?>
        </a>
        <div class="meta">
            <h3><a href="<?php the_permalink(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
            <?php the_excerpt(); ?>
        </div>
        <div style="clear: both"></div>
    </div>
    <?php endwhile; ?>
</div>

<?php
    wp_reset_query();
    remove_filter('excerpt_length','hook_excerpt_featured_length');
}

インデックス.php

<div id="slideshow-wrapper">
<?php slideshow_featured_posts(); ?>
</div>

CSS、

div#slideshow { position: relative; width: 780px; height: 300px; padding: 0 0 40px; margin: 0 auto; }
div#slideshow .list { position: absolute; width: 780px; height: 300px; z-index: 1; overflow: hidden; }

div#slideshow .button {
    width: 64px; height: 64px; position: absolute; top: 118px;
    outline: 0; cursor: hand; border: 0 none; color: #333; font-size: 45px; line-height: 45px; font-weight: bold;
}
div#slideshow #jqc-prev {
    border-bottom: 0 none;
    left: -74px;
}
div#slideshow #jqc-next {
    border-bottom: 0 none;
    right: -74px;
}

div#slideshow .item { width: 780px; margin: 0; }
div#slideshow .item .image { display: block; float: right; padding: 0; }
div#slideshow .item .meta  { width: 280px; padding: 0; float: left; }
div#slideshow h3 {
    font: bold 28px/32px Helvetica, Arial, sans-serif;
    display: block; padding: 0; margin: 0 0 20px 0;
}
div#slideshow h3 a:hover, div#slideshow h3 a:active {
    border: 0 none;
    text-decoration: underline;
}
div#slideshow p { display: block; padding: 0; margin: 0 0 20px 0; }

オーバーレイする透明な黒のキャプション div はどこに配置すればよいですか? z-インデックス?

4

1 に答える 1

0

何を試しましたか？結果はどうでしたか？

私だったら、Chrome の Webmaster Tools や FireBug など、CSS をその場で変更できるものを使って実験します

于 2012-06-15T07:50:44.353 に答える