EZ-SPARROW > Meteor Slidesでタイトルを表示させる方法

Meteor Slidesでタイトルを表示させる方法

December 15, 2013

Meteor SlidesというWordpressプラグインはレスポンシブデザインにも対応した大変手軽なプラグインです。

このプラグインで画像スライドショーに画像のタイトルを表示させる方法の備忘録です。

詳しい解説は作者のホームページで確認できる。(英語)

http://jleuze.com/plugins/meteor-slides/customizing-the-slideshow-template/

Meteor Slidesでタイトルを表示させる方法

meteor-slideshow.phpファイルの

</div><!-- .mslide -->

というコードの上に下のコードを貼付けます。

<p><?php the_title(); ?></p>

CSSを追加

そのままでは表示されないので、CSSに下記を追加で完了です。

.meteor-slides p {
    background: rgba(0,0,0,0.2);
    bottom: 0;
    color: #000;
    left: 0;
    line-height: 20px;
    margin: 0;
    padding: 2%;
    position: absolute;
    text-align: center;
    width: 96%;
}

RELATED POSTS