2014/01/04  40 Shares

Meta Sliderを使ってStinger3にスライダーを導入する方法

Stingerにスライダー導入

たかよしさんからのリクエストで、Stinger3のヘッダー画像をスライダーに変更するカスタマイズをご紹介します。

今回は「Meta Slider」というプラグインを使用しました。それではさっそく導入方法をご覧ください。

Meta Slider導入全手順

プラグインインストール

プラグイン新規追加画面から、「Meta Slider」を検索し「いますぐインストール」を選択。

Meta Slider 追加

インストール後、左サイドバーに「Meta Slider Lite」という項目が表示されます。Lite版は機能制限されていますが、通常で使う分には問題ありません。

Meta Slider Lite

設定画面

設定画面に移ったら、左上に表示されている「+」マークをクリック。

Meta Slider

「Add Slide」からスライダーに適用する画像を選びます。今回はStingerヘッダー部分に採用するので、幅986px・高さ150pxの画像を作ると綺麗に表示されます。

Meta Slider 新規作成

右側の設定ボタンで動きを調整できます。「Save & Preview」ボタンをクリックしてどんな動きになるか確認してみましょう。あとから自由に変更できます。

「Width」は986px、「Height」は150pxで固定しました。

Meta Slider Setting

「Advance Setteing」ではさらに詳細な設定ができます。「Auto play」にチェックを入れておけば、自動でスライドされます。その他とくにいじらなくてもOK。

テーマに挿入するコードを確認

右下の「Usage」にコードが表示されています。記事内で使う場合は「Shortcode」ですが、今回はテーマに適用するので「Template Include」タブを選んでください。

Meta Slider Usage

ここに表示されているコードをテキストエディタ等にコピペしておきましょう。

コード挿入部分

Stinger3のヘッダー画像は「gazou」というIDが振られている部分になります。

<div id="gazou">
  <div id="gazou-in">
    <?php if (is_home()) { ?>
    <?php //カスタムヘッダー画像// ?>
    <?php if(get_header_image()): ?>
    <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
    <?php endif; ?>
    <?php } else { ?>
    <?php //カスタムヘッダー画像// ?>
    <?php if(get_header_image()): ?>
    <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
    <?php endif; ?>
    <?php } ?>
  </div>
  <!-- /#gazou-in --> 
</div>
<!-- /#gazou -->

中身を丸ごと消して差し替えても良いのですが、復元することも考えて残しておきます。下記の直前に、先ほどコピペしたコードを挿入します。

  </div>
  <!-- /#gazou-in --> 
</div>
<!-- /#gazou -->

挿入後はこんな感じになります。

<div id="gazou">
  <div id="gazou-in">
    <?php if (is_home()) { ?>
    <?php //カスタムヘッダー画像// ?>
    <?php if(get_header_image()): ?>
    <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
    <?php endif; ?>
    <?php } else { ?>
    <?php //カスタムヘッダー画像// ?>
    <?php if(get_header_image()): ?>
    <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
    <?php endif; ?>
    <?php } ?>
<?php 
    echo do_shortcode("[metaslider id=990]"); 
?>
  </div>
  <!-- /#gazou-in --> 
</div>
<!-- /#gazou -->

ID番号は変わりますので、自分でコピペしたコードを使ってください。

CSS設定

このままだとうまく反映されないので、CSSに下記を追加します。

#gazou-in {
	margin: 0 auto 50px auto;
}

#header {
	min-height: 100px;
}

「min-height」の高さは、ブログタイトル部分です。ご自分のブログに合わせて調整してください。

見た目を確認してみよう

これで一通りの設定が終わりました。ヘッダー画像はそのまま表示されているので、こんな感じになります。

Stinger3スライダー導入後

ヘッダー画像を残す場合

ヘッダー画像とスライダーを表示させたい場合は、このままでOK。すき間があるので、気になる方は下記CSSを変更してください。

◆変更前

#container #gazou #gazou-in #headimg {
	margin-bottom: 10px;
}

◆変更後

#container #gazou #gazou-in #headimg {
	margin-bottom: 0;
}

アイディア次第で、面白いヘッダーになる気がします。

ヘッダー画像を消す場合

ヘッダーを消してスライダーのみ表示させる場合は、【外観】→【ヘッダー】から「ヘッダー画像を削除」してください。

ヘッダー画像削除

スライダーのみ表示されます。

Stingerスライダー導入

まとめ

動きのあるブログにしたいなら、ぜひチャレンジしてみてください。

スライド画像から指定した記事へリンクすることもできます。

スライド画像にリンクをつける

スライドの数が多くなりすぎると重くなるので、3~5枚ほどが良いと思います。

それでは、また。