2014/01/0712 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が振られている部分になります。

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

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

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

CSS設定

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

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

見た目を確認してみよう

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

Stinger3スライダー導入後

ヘッダー画像を残す場合

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

◆変更前

◆変更後

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

ヘッダー画像を消す場合

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

ヘッダー画像削除

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

Stingerスライダー導入

まとめ

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

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

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

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

それでは、また。