以前、このブログのcssをカスタマイズした記事を書きました。
今後変更したいと思っていた「コンテンツ位置変更」は、KOTOBAKO – コトバコのしむさん（@46sym）に助言いただき、変更できました！
ありがとう！しむさん（@46sym）！
もうひとつの今後変更したいことだった「トップ画面にスライダー導入」も最近完成したので、ご紹介したいと思います。
ブログやウェブサイトにスライダーを導入しようとお考えの方必見です！
スライダー導入するだけでかっこよさひとつアップするよ！（当社比）
簡単！カッコいい！無料！三拍子そろったプラグイン
私は、SlideDeck 2 Lite Responsive Content Sliderを導入しました。
WordPress › SlideDeck 2 Lite Responsive Content Slider « WordPress Plugins
SlideDeck 2 Liteは、管理画面からすべての項目を設定でき、設定を変更するとそれなりにカッコよくなるのでカスタマイズ初心者にも導入しやすくオススメです！
ちなみに有料版では、もっとカッコいいテーマやいろんなSNSアカウントが使えるようになります。
SlideDeck 2 Liteインストール方法
では、SlideDeck 2 Liteのインストール方法を紹介していきます。
まずはWordpress管理画面より、
プラグイン＞新規追加＞「SlideDeck 2 Lite」で検索＞いますぐインストール＞有効化
※私はすでにインストール済みなので「インストール済み」と表示されています。
すると管理画面に「SlideDeck 2」が追加されます。
人気記事を表示するスライダーの作り方
今回は、このブログで導入しているような人気記事を表示するスライダーを作ってみたいと思います。
管理画面に追加された「SlideDeck 2」を開いて、「Crete SlideDeck」をクリック
クリックするとスライダーのソースを選ぶ画面が出てきます。
無料版で使えるのは、YouTube、Wordpressの記事、PinterestやFlicker。
有料版になるとFacebookやInstagramなどいろんなソースが使えるようになります。
使い方によっては、YouTubeにアップした動画を流してアクセスアップやPinterestやFlickerなどで画像を流して、オシャレなデザインにすることも出来ます。
今回は、最新記事のスライダーを作るということで「Your Post」を選択しました。
スライダーを設定する画面に移動します。
画像の通り左上の空欄にスライダーの名前を任意でつけましょう。
真ん中の画面には、プレビューが表示されます。
設定を変更するとリアルタイムで反映されますので、結果を確認しながら作ることが出来ます。
スライダーの背景色も選ぶことができます。
こちらはご自身のウェブサイトの背景色に合わせて選ぶといいですね。
表示する投稿を選ぶ
またWordpressアイコンからスライドさせる投稿の設定をすることが出来ます。
Preferred Image Source：どの画像を表示するか
Preferred Image Size：画像サイズ
Post Type：スライダーに表示する投稿の種類
Which post?(order by)：どの投稿を表示するか
Use Custom Excerpt?：抜粋文の表示・非表示
※私の環境では反映されませんでした。
Filter by Taxonomy?：表示される投稿をタグで指定
※スライダーで表示したい記事にあらかじめ「popular」とタグをつけることで人気記事を指定しています。
スライダーの外観を選ぶ「Lenses」
Lensesタブで、スライダーの外観を選ぶことが出来ます。
無料版の場合、3つからしか選ぶことが出来ません。
お好みのLensesを選んで下さい。
スライダーのサイズや数を設定「Setup」
スライダーのサイズや数を設定出来ます。
ご自身のウェブサイトに合わせて、設定してみてください。
文字に関する設定「Appearance」
文字に関する設定が出来ます。
Accent Color：タイトル文字色
カラーマップかカラーコードより指定します。
Macだとこのアプリがカラーコードを調べるのに便利ですよ。
あとこのウェブサイトも役に立ちますよ。
参考：十六進の色配合、色見本、パレット&変換 – Encycolorpedia
Title Font：タイトルフォント
Body Font：抜粋文のフォント
Lens Variation：スライダー枠
Border/Frame：スライダー枠のサイズ
「Thick」だと枠が付き、「Hairline」だとそれが細くなり、「None」だとなくなります。
Caption Position：タイトルや抜粋文の表示位置
Text Color Variation：テキストの背面色
Hyphenate Content：詳しい内容が読み取れませんでした。とりあえず「Off」にしてます。
Image Scaling：画像の表示を最適なサイズに切り抜くか
表示における様々な設定「Content」
表示における様々な設定です。
Link Entire Slide：スライダーをクリックするとそのページに移動するか
Title Length(with Media)：画像やビデオが表示されているときのタイトル文字数
Title Length(no Media)：画像やビデオが表示されていないときのタイトル文字数
Show Title：タイトルの表示・非表示
Link Title：タイトルをクリックするとそのページに移動するか
Excerpt Lenght(with Media)：画像やビデオが表示されているときの抜粋文文字数
Excerpt Lenght(no Media)：画像やビデオが表示されていないときの抜粋文文字数
Show Excerpt：抜粋分を表示するか
Show Read More：「Read More」を表示するか
Date Format：日付フォーマットの設定
Open links in…：ページを開くときの動作。
Show Author：筆者を表示するか
Show Author Avatar：アバターを表示するか
Link Author Name：筆者にリンクをつけるか
Cache Duration：キャッシュの持続時間
スライダーの動きに関する設定「Navigation」
スライダーの動きに関する設定です。
Show Slide Controls：スライドコントローラーの表示方法
「Always」だと常に表示、「On Hover」だとマウスをのせた時だけ、「Never」だと表示されません。
Keyboard Navigation：キーボードの右左でスライドさせるか
Mouse Wheel Naviation：マウスホイールでスライドさせるか
Touch Navigation：タップでスライドさせるか（タッチスクリーンデバイス限定）
Navigation Type：ナビゲーションパネルの位置
Navigation Type：ナビゲーションパネルのデザイン
Touch Senstivity：タップの感度（タッチスクリーンデバイス限定）
Navigation Style：ナビゲーションパネルの背面表示
Arrow Style：スライドコントローラーのデザイン
Thumbnail Arrow Style：どこが変わるのか分かりませんでした。分かる方いれば教えて下さい。
スライダーの動きに関する設定「Playback」
スライダーの動きに関する設定です。
Starting Slide：はじめのスライドを設定
Randomize Slide Order：ランダムに表示させるか
Autoplay SlideDeck：自動でスライドさせるか
Autoplay Interval：次のスライドに遷移するときの時間を設定
Loop Playback：スライドをループさせるか
Slide Transition：スライド設定
Animation Speed：アニメーションのスピード設定
Animation Easing：アニメーション設定
すべて設定出来れば「Save SlideDeck」をクリック。
これでスライダーが完成しました。
おつかれさまでした。
次は、スライダーをトップ画面に貼り付ける方法です。
スライダーをトップ画面のメニューバー下に貼り付ける方法
スライダーIDの確認方法
Manageを開くと、今まで作ったスライダーが表示されます。
1：スライダーの名前
2：作成した日にち
3：このスライダーのIDです。
4：ここからこのスライダーを複製や削除などが出来ます。左から1,2,3,4と数字をふり、順番に説明していきます。
4-1：このスライダーを貼り付ける方法が紹介されています。
4-2：プレビュー
4-3：複製
4-4：削除
3番のIDが必要となりますので確認しておいて下さい。
スライダーを貼り付ける位置について
※このブログは現在（2015/5/9）、Simplicity1.7のテーマを使用しています。
次はいよいよスライダーを貼り付けます。
外観＞テーマの編集＞編集するテーマを選択＞Simplicity1.7を選択＞navi.php
そして、navi.phpの次の箇所に下記でマークアップされている記述を追加します。
<!-- Navigation -->
<nav>
...
</nav>
/* ここにコードを挿入 */
<?php if (!is_mobile()) :?> /* モバイルでは表示しない */
<div class="slidebar" align="center"> /*スライダーを真ん中へセンタリング */
<?php echo do_shortcode( "[SlideDeck2 id=ご自身のid]" ); ?>
</div>
<?php endif; ?>
/* ここにコードを挿入 */
<!-- /Navigation -->参考DIV要素のセンタリング|虹色ミツバチ
参考wordpressでスマートフォンだけに表示・非表示を行う | 使える無料ソフト＆無料サービス
モバイルでは表示しないようにしたのと、スライダーを真ん中にセンタリングするように指定しました。
必要なければ6番、7番、9番と10番の記述は、削除しても大丈夫です。
こちらを参考にすれば好きな位置にスライダーを挿入出来ます。
参考WordPressのヘッダーや記事下など好きな位置にアドセンスを設置する方法 | メモロウ
またひとつ理想のデザインに近付いた！
いやーかっこ良くなりました！！じこまん
スライダーの導入を考えている方はぜひ導入を検討してみてください。
その他、Wordpressカスタマイズ記事はこちらからどうぞ
[kanren]
